<div class="slider-container" id="noWrapper">
<ul >
<li>
<img src="img/beach.jpg" class="img-background"/>
<h2>Beach is beautifull</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>
<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>
#noWrapper {position:relative;}
#noWrapper .slider-control {
position: absolute;
top:35%;
display:block;
width:48px;
height:48px;
cursor:pointer;
transition:all 1s ease;
z-index:2;
}
#noWrapper .slider-control span {
position: absolute;
display:block;
padding-top:1em;
text-align: center;
width:48px;
height:48px;
border-radius:100%;
background-color:#fff;
}
#noWrapper .slider-control.goLeft {
left:-1em;
}
#noWrapper .slider-control.goLeft:hover {
left:0em;
}
#noWrapper .slider-control.goRight {
right:-1em;
}
#noWrapper .slider-control.goRight:hover {
right:0em;
}
#noWrapper li {
position: relative;
display:block;
width:150px;
height:150px;
overflow: hidden;
}
#noWrapper li > img {
width:100%;
max-width: 100%;
height:auto;
display:block;
}
#noWrapper li .img-background {
position: absolute;
z-index:1;
width:100%;
height:100%;
left:0;
top:0;
}
#noWrapper li h2 {
position: relative;
z-index: 3;
font-size: 1em;
font-weight: bold;
background-color:rgba(0,0,0,0.2);
color:white;
padding:0.5em;
}
@media screen and (min-width:481px){
#noWrapper li {
display:block;
width:240px;
height:160px;
}
}
@media screen and (min-width:769px){
#noWrapper li {
display:block;
width:250px;
height:160px;
}
}
$(document).ready(function(){
$("#noWrapper").Listy();
});
