Getting Started

Include the scripts and styles in your HTML:

<!DOCTYPE html>
<html>
<head>
  ...
  <link href="listy.css" rel="stylesheet" />
</head>
<body>
  ...
  <script src="listy.js"></script>
</body>
</html>

Listy Slider consists of few elements. The mandatory elements are:

A Parent element such as .slider-container on which we initalize the slider
An UL elements which holds all the slides
Two elements (example: a) for slider controls

In the example below we are using Glyphicons for controls from Bootstrap. It can be also other icons or just text. You define it yourself.

        
<div class='slider-container' id='MySlider' >
          <ul>
            <li> Slider Content #1 </li>
            <li> Slider Content #2 </li>
            <li> Slider Content #3 </li>
            ...
          </ul>
          <a class="goLeft carousel-control" >
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            
            <a class="goRight carousel-control">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
        </div>

Wrapper Container

Controls do not need to be under the .slider-container. They can be placed anywhere and then when initializing the Listy Slider we provide the elements to the options for control handles.

A common usage is having another container, Wrapper Container of the slider that wraps the whole .slider-container.

        
<div id='MySlider' >      
          <div class='slider-container' >
            <ul>
              <li> Slider Content #1 </li>
              <li> Slider Content #2 </li>
              <li> Slider Content #3 </li>
              ...
            </ul>
            
          </div>
          <a class="goLeft carousel-control" >
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
          <a>
          <a class="goRight carousel-control">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
          </a>
        </div>

By using the Wrapper Container we can have more freedom for the controls and anything else that can be done in CSS

Listy Slider is independant and can be stylized however you want!

There are some default css styles

      
.slider-container {
          overflow: hidden;
          margin: 0 auto; /*To center them horizontally*/
        }
        .slider-container li {
          float:left;
          display:block;
          list-style:none;
        }

        .slider-container  ul {
          padding:0;
        }

Media Queries - Responsive

Media Queries are used in CSS to define the elements of a webpage under different width of the screen.

Since Listy is independant and robust, you can define the block of the slides (width and height) with different values for each width

      
/*
  MOBILE
*/
@media screen and (max-width:480px){
  #MySlider.slider-container{width:153px; height:200px;} /*The WIDTH will be used if autoWidth is set to false;*/
  #MySlider.slider-container li {
    width:153px;
    height:200px;
  }
}

/*
  Wider than Small Mobile (Targeting Tablets && Mobile)
*/
@media screen and (min-width:481px){
  #MySlider.slider-container{width:306px; height:200px;} /*The WIDTH will be used if autoWidth is set to false;*/
  #MySlider.slider-container li {
    width:153px;
    height:200px;
  }
}

/*
  Wider than Mobile (Targeting Tablets)
*/
@media screen and (min-width:768px){
  #MySlider.slider-container{width:459px; height:200px;} /*The WIDTH will be used if autoWidth is set to false;*/
  #MySlider.slider-container li {
    width:153px;
    height:200px;
  }
}

/*
  Wider than Small Tablets (Targeting Tablets & Desktop)
*/
@media screen and (min-width:991px){

  
  #MySlider.slider-container{width:612px; height:200px;} /*The WIDTH will be used if autoWidth is set to false;*/
  #MySlider.slider-container li {
    width:153px;
    height:200px;
  }
  
}
/*
  Wider than Tablets (Targeting Desktop)
*/
@media screen and (min-width:1200px){
  #MySlider.slider-container{width:768px; height:200px;} /*The WIDTH will be used if autoWidth is set to false;*/
  #MySlider.slider-container li {
    width:153px;
    height:200px;
  }
 
}

List can be easily run by calling it on the element with .slider-container

      
$(document).ready(function(){
        //DOM is Loaded
        $("#MySlider").Listy();
      });

Media Queries - BreakPoints

If we have set some Media Queries in CSS, we also can defined the breakpoints in here to define how many items and how many sliding steps will be used under certain screen width

      
$(document).ready(function(){
        //DOM is Loaded
        $("#MySlider").Listy({

            configDefault: {items:2, sliding:2},
            config: {
                "480": {
                   items: 1,
                   sliding: 1
                },
                "768": {
                  items:2,
                  sliding:1
                },
                "991": {
                  items: 3,
                  sliding: 2
                },
                
              },
          
        });
      });

Here we are defining breakpoints for several widths. For Explanation on how to use them and set them go to the options and read the description.

Wrapper Container

If we have set a Wrapper Container in HTML and want it to get the same width of the slider we need to set it in the Slider options:

      
$(document).ready(function(){
        //DOM is Loaded
        //#MySlider is now a wrapper container, so we can target our slider element like this
        $("#MySlider .slider-container").Listy({
          container: "#MySlider"
        });
      });

HTML

Wrapper Container

CSS

Media Queries - Responsive

Javascript

Media Queries - BreakPoints

Wrapper Container