Book List
Book List should have small sized images and represent their eBook size ratio if wanted
In this example we pretend that every slide is a Book Cover.
Birds Flying
Eagle Eye
The Lighthouse
Palms
Baywatch
-
Birds Flying
-
Eagle Eye
-
The Lighthouse
-
Palms
-
Baywatch
<div id="widget1" class="panel panel-default">
<div class="panel-heading">Product List
<a class="goRight slider-control" >
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<a class="goLeft slider-control" >
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<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;width:300px;}
#widget1 .slider-control {
float: right;
display:block;
width:24px;
height:24px;
cursor:pointer;
text-transform: none;
}
#widget1 .slider-control span {
display:block;
text-align: center;
width:24px;
height:24px;
}
#widget1 li {
position: relative;
display:block;
width:220px;
height:320px;
border:10px solid white;
background-color:#2c3e50;
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
},
},
animationEffect: "ease-in-out",
animationDuration: 1000
});
});