<div class="slider-container" id="noWrapper2">
<ul >
<li><img src="img/beach-full.jpg" /></li>
<li><img src="img/birds-full.jpg" /></li>
<li><img src="img/eagle-full.jpg" /></li>
<li><img src="img/lighthouse-full.jpg" /></li>
<li><img src="img/palms-full.jpg" /></li>
<li><img src="img/tower-full.jpg" /></li>
</ul>
<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>
#noWrapper2 {position:relative;}
#noWrapper2 .slider-control {
position: absolute;
top:35%;
display:block;
width:48px;
height:48px;
cursor:pointer;
transition:all 1s ease;
}
#noWrapper2 .slider-control span {
position: absolute;
display:block;
padding-top:1em;
text-align: center;
width:48px;
height:48px;
border-radius:100%;
background-color:#fff;
}
#noWrapper2 .slider-control.goLeft {
left:-1em;
}
#noWrapper2 .slider-control.goLeft:hover {
left:0em;
}
#noWrapper2 .slider-control.goRight {
right:-1em;
}
#noWrapper2 .slider-control.goRight:hover {
right:0em;
}
#noWrapper2 li {
display:block;
width:100%;
height:160px;
overflow: hidden;
}
#noWrapper2 li > img {
width:100%;
max-width: 100%;
height:auto;
display:block;
}
/*Setting new definitions for slides for widths above 480px*/
@media screen and (min-width:481px){
#noWrapper2 li {
min-height:320px ;
}
}
/*Setting new definitions for slides and controls for widths above 768px*/
@media screen and (min-width:768px){
#noWrapper2 li {
min-height:500px;
}
#noWrapper2 .slider-control{
width:120px;
height:120px;
}
#noWrapper2 .slider-control span {
padding-top:.75em;
font-size:3em;
width:120px;
height:120px;
}
}
@media screen and (min-width:1200px){
#noWrapper2 li {
min-height:768px;
}
}
$(document).ready(function(){
$("#noWrapper2").Listy({
handleLeft: "#noWrapper2 .goLeft",
handleRight: "#noWrapper2 .goRight",
fullWidth:true});
});
This documentation is used to learn how to use the Listy Slider and also see other examples on how it can be used