Library for easily generates slider.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
img
js
README.markdown
slideMoo.html

README.markdown

slideMoo is a library to easily generate slider with mootools :

  • All you need is a list of elements (ul>li*n), a bit of css (float:left), and then invoke slideMoo on the ul, give it some options (number of visible items, duration, transition, direction etc...), and you have your slider.
  • It has automatic play, pause on hover, bullet pagination.
  • It can also fetch some data from your html (title,alt and any data-* attribute)
  • For more particular cases, you can disable the generation of the mask(overflow), in order to let you style your own slider.

That's my first plugin, and it's far from perfect, but any suggestions for improvements will be appreciated.

Also forgive me for my poor english.

Generating a slider with slideMoo :

Html :

<div id="sliderNG">
    <div class="wrapper"> <!-- i use my own "mask" on this one-->
        <ul id="slideNG">
            <li class="slide" ><img src="http://lorempixel.com/g/723/318" title="Title image 1" alt="Description image 1" data-href-dest="http://lorempixel.com/g/1400/636"></li>
            <li class="slide" ><img src="http://lorempixel.com/g/723/318" title="Title image 2" alt="Description image 2" data-href-dest="http://lorempixel.com/g/1400/636"></li>
            <li class="slide" ><img src="http://lorempixel.com/g/723/318" title="Title image 3" alt="Description image 3" data-href-dest="http://lorempixel.com/g/1400/636"></li>
            <li class="slide" ><img src="http://lorempixel.com/g/723/318" title="Title image 4" alt="Description image 4" data-href-dest="http://lorempixel.com/g/1400/636"></li>
            <li class="slide" ><img src="http://lorempixel.com/g/723/318" title="Title image 5" alt="Description image 5" data-href-dest="http://lorempixel.com/g/1400/636"></li>
            <li class="slide" ><img src="http://lorempixel.com/g/723/318" title="Title image 6" alt="Description image 6" data-href-dest="http://lorempixel.com/g/1400/636"></li>
            <li class="slide" ><img src="http://lorempixel.com/g/723/318" title="Title image 7" alt="Description image 7" data-href-dest="http://lorempixel.com/g/1400/636"></li>
        </ul>
    </div>
    <div class="slider-nav">
        <a href="#" id="left" class="arr left"></a>
        <a href="#" id="right" class="arr right"></a>
    </div>
    <div id="info"><!-- And i will gran some informations -->
        <h3 id="titreSlide" class="info">Je suis un titre de calibrage très très long</h3><br><br><br>
        <a id="descSlide" href="#" class="info">Je suis un texte de calibrage très très long</a>
    </div>
</div>

css :

    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    .clearfix {
      display: inline-block;
    }
    html[xmlns] .clearfix {
      display: block;
    }
    * html .clearfix {
      height: 1%;
    }
    div#sliderNG {
      position: relative;
      margin: 0 auto;
      padding: 0;
      width: 735px;
      height: 318px;
    }
    div#sliderNG div.slider-nav {
      margin: 0;
      padding: 0;
      width: 100%;
      display: block;
    }
    div#sliderNG div.slider-nav a.arr {
      top: 40%;
      width: 51px;
      height: 45px;
      position: absolute;
      border: none;
      text-decoration: none;
      z-index: 2;
      display: block;
      background: url(../img/slider_rarr.png) no-repeat top left;
      float: right;
      right: -4px;
    }
    div#sliderNG div.slider-nav a.arr.left {
      background: url(../img/slider_larr.png) no-repeat top left;
      float: left;
      left: 0;
    }
    div#sliderNG div.wrapper {
      position: relative;
      overflow: hidden;
      margin: 0 0 0 8px;
      padding: 0;
      width: 723px;
      height: 318px;
    }
    div#sliderNG div.wrapper ul#slideNG {
      margin: 0 0 0 0;
      padding: 0;
      position: absolute;
      width: 10000px;
      list-style: none;
    }
    div#sliderNG div.wrapper ul#slideNG li {
      float: left;
      width: 723px;
      height: 318px;
    }
    div#sliderNG #info {
      position: absolute;
      top: 180px;
      margin: 0 0 0 8px;
      padding: 0;
      width: auto;
      text-align: left;
      font-family: 'Tahoma', Arial, sans-serif;
      font-size: 16px;
      font-weight: 400;
    }
    div#sliderNG #info h3.info {
      color: #37b2d1;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 5px 25px 5px 10px;
      margin: 0;
      display: block;
    }
    div#sliderNG #info a.info {
      display: block;
      padding: 5px 25px 5px 10px;
      max-width: 100%;
      min-width: 40%;
      height: 19px;
      background: url(../img/slider_link_rarr.png) no-repeat top right rgba(117, 121, 129, 0.8);
      text-decoration: none;
      color: #FFF;
      margin: -55px 0 15px 0;
    }

js :

    window.addEvent('domready',function(){
      var sliderBig =  new slideMoo('slideNG','left','right',
      {
        autoPlay:true,          //automotion
        loop:true,              //Reset when it reaches the end.
        titleInfo:'titreSlide', //tag'id which receive Information    
        descInfo:'descSlide',   //same as above
        displayInfo:true,       //explicit enough.
        maskIsSet:true,         //Do not let the script generate the overflow.
        properties:['title','alt','data-href-dest'] //Tags to watch for informations.
      });
    });

The entire list of options :

    visibleItem         :   1,                                  //Defines how many elements are visible in the slider.
    autoPlay            :   false,                              //Defines if the slider starts automatically
    loop                :   false,                              //When the slider reachs the end,it restarts from the beginning
    maskIsSet           :   true,                              // The mask overlay is already in html code ?
    showDuration        :   8000,                               //Only used when autoPlay is true, duration bewteen to slide
    displayInfo         :   false,                              //Grabs Information from element and display it.
    titleInfo           :   undefined,                          //Parent's Element of elements which will receive data from images.
    descInfo            :   undefined,                          //Parent's Element of elements which will receive data from images.
    properties          :   undefined,                          //Array of name's properties where to find data. ordrer : 1) title 2) alt 3) custom property (html5 style)
    orientation         :   false,                              //Sliding orientation false: horizontal, true: vertical 
    durationAnimation   :   800,                                //duration of a slide (animation)
    transitionEffect    :   'Expo',                             //Type of transition
    transitionEasing    :   'easeOut',                          //Type of acceleration
    linkingAnimation    :   'ignore',                           //What happened if user is a trigger happy.
    tooltip             :   false,                               //Display nice tooltip
    classTooltip        :   undefined,                          //Class to gather all elements which receive to
    customTooltipClass  :   undefined,                          //Class to apply to the balloon tooltip
    titleAttrTooltip    :   undefined,                          //String which aims which attributes to get for title
    textAttrTooltip     :   undefined,                          //Same as above but for text
    tooltipFadeEffect   :   false,                              //Basic FadeIn FadeOut Effect on mouseEnter and mouseLeave;
    bulletNavigation    :   false,                              //Shall we display a bullet inline list
    bulletClass         :   undefined,                           
    bulletClassActive   :   undefined                           //If yes which class we will apply to the list