<div id="Wrapper2">
<div class="slider-container" >
<ul >
<li><img src="img/beach.jpg" /></li>
<li><img src="img/birds.jpg" /></li>
<li><img src="img/eagle.jpg" /></li>
<li><img src="img/lighthouse.jpg" /></li>
<li><img src="img/palms.jpg" /></li>
<li><img src="img/tower.jpg" /></li>
</ul>
<div>
<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>
/*Setting the slider container*/
#Wrapper2 {position:relative;margin:0 auto;}
/*CSS for positioning slider controls*/
#Wrapper2 .slider-control {
position: absolute;
top:35%;
display:block;
width:48px;
height:48px;
cursor:pointer;
/*For HOVER Effect*/
transition:all 1s ease;
}
#Wrapper2 .slider-control span {
position: absolute;
display:block;
padding-top:1em;
text-align: center;
box-shadow: 0px 0px 5px #ccc;
width:48px;
height:48px;
border-radius:100%;
background-color:#fff;
}
#Wrapper2 .slider-control.goLeft {
left:-1em;
}
#Wrapper2 .slider-control.goLeft:hover {
left:0em;
}
#Wrapper2 .slider-control.goRight {
right:-1em;
}
#Wrapper2 .slider-control.goRight:hover {
right:0em;
}
/*Styling Slides*/
#Wrapper2 li {
display:block;
width:150px;
height:150px;
overflow: hidden;
}
/*Making Images wrap inside the LI*/
#Wrapper2 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){
#Wrapper2 li {
display:block;
width:240px;
height:160px;
}
}
/*Setting new definitions for slides for widths above 768px*/
@media screen and (min-width:769px){
#Wrapper2 li {
display:block;
width:250px;
height:160px;
}
}
$(document).ready(function(){
$("#Wrapper2 .slider-container").Listy({
container:"#Wrapper2",
handleLeft: "#Wrapper2 .goLeft",
handleRight: "#Wrapper2 .goRight",
});
});
