Example | Listy - A Responsive List Slider

Birds Flying
Eagle Eye
The Lighthouse
Palms
Baywatch
Birds Flying
Eagle Eye
The Lighthouse
Palms
Baywatch

        
  <div id="widget1" >

 <a class="goLeft  slider-control" >
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="goRight   slider-control" >
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
<div class="slider-container" >
        
  <ul >
   
    <li>
      <img src="img/birds.jpg"  class="img-background"/>
      <h2>Birds Flying</h2>
    </li>
    <li>
      <img src="img/eagle.jpg"  class="img-background"/>
      <h2>Eagle Eye</h2>
    </li>
    <li>
      <img src="img/lighthouse.jpg"  class="img-background"/>
      <h2>The Lighthouse</h2>
    </li>
    <li>
      <img src="img/palms.jpg"  class="img-background"/>
      <h2>Palms</h2>
    </li>
    <li>
      <img src="img/tower.jpg"  class="img-background"/>
      <h2>Baywatch</h2>
    </li>
     <li>
      <img src="img/birds.jpg"  class="img-background"/>
      <h2>Birds Flying</h2>
    </li>
    <li>
      <img src="img/eagle.jpg"  class="img-background"/>
      <h2>Eagle Eye</h2>
    </li>
    <li>
      <img src="img/lighthouse.jpg"  class="img-background"/>
      <h2>The Lighthouse</h2>
    </li>
    <li>
      <img src="img/palms.jpg"  class="img-background"/>
      <h2>Palms</h2>
    </li>
    <li>
      <img src="img/tower.jpg"  class="img-background"/>
      <h2>Baywatch</h2>
    </li>
  </ul>
  
 
  </div>
</div>

        

   #widget1  {position:relative;margin:0 auto;overflow:hidden;}
  #widget1 .slider-control {
    position: absolute;
    top:35%;
    display:block;
    width:48px;
    height:48px;
    cursor:pointer;
    transition:all 1s ease;
    z-index: 2;
  }
  #widget1 .slider-control span {
  
    position: absolute;
    display:block;
    padding-top:1em;
    text-align: center;
    
    width:48px;
    height:48px;
    border-radius:100%;
    background-color:#fff;
   
  }
  #widget1 .slider-control.goLeft {
    left:-1em;
  }
   #widget1 .slider-control.goLeft:hover {
    left:0em;
   }
  #widget1 .slider-control.goRight {
    right:-1em;
  }
  #widget1 .slider-control.goRight:hover {
    right:0em;
  }
  
  #widget1 li {
    position: relative;
    display:block;
   

    overflow: hidden;
      }
 #widget1 li > img {
    width:100%;
    max-width: 100%;
    height:auto;
    display:block;
 }

  #widget1 li .img-background {
    position: absolute;
    z-index:1;
    width:100%;
    height:auto;
    left:0;
    top:0;
  }
  #widget1 li h2 {
    position: relative;
    z-index: 3;
    font-size: 1em;
    margin-top:10em;
    font-weight: bold;
    background-color:rgba(0,0,0,0.2);
    color:white;
    padding:0.5em;
  }

        
$(document).ready(function(){
      $("#widget1 .slider-container").Listy({
          configDefault: {items:1, sliding:1},
          config: {
            "480": {
              items: 1,
              sliding: 1
            },
            
          },
          autoWidth: true,
          container: "#widget1",
          animationEffect: "ease-in-out",
          animationDuration: 1000,
          fullPage: true,
      });

  
  });