I am currently working on a carousel design. I have already finished coding the HTML and CSS, but I am unsure of how to shift the elements one by one to the right or left while ensuring that 7 pictures are always visible in the viewport.
.seccion {
max-height: 700px;
min-height: 700px;
}
div.animacionCel {
height: 60%;
min-height: 60%;
max-height: 60%;
overflow: hidden;
margin: 0px;
padding: 0px;
}
div.viewport {
width: 100%;
overflow: hidden;
height: 100%;
}
ul.slides {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
display: inline-table;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
ul.slides > li {
display: inline;
padding: 0px;
margin: 0px;
height: 100%;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
ul.slides > li > img {
padding: 0px;
margin: 0px;
height: 90%;
width: 14.28%;
}
ul.slides > li.activo > img {
padding: 0px;
margin: 0px;
height: 100%;
width: 14.28%;
}<html>
<head> </head>
<body>
<!-- second section -->
<section class="seccion center-block">
<div class="animacionCel center-block">
<div class="viewport">
<ul class="slides">
<li><img src="../images/screen_cel_1.png"/></li>
<li><img src="../images/screen_cel_2.png"/></li>
<li><img src="../images/screen_cel_3.png"/></li>
<li class="activo"><img src="../images/screen_cel_4.png"/></li>
<li><img src="../images/screen_cel_5.png"/></li>
<li><img src="../images/screen_cel_6.png"/></li>
<li><img src="../images/screen_cel_7.png"/></li>
<li><img src="../images/screen_cel_8.png"/></li>
<li><img src="../images/screen_cel_9.png"/></li>
<li><img src="../images/screen_cel_10.png"/></li>
<li><img src="../images/screen_cel_11.png"/></li>
<li><img src="../images/screen_cel_12.png"/></li>
<li><img src="../images/screen_cel_13.png"/></li>
<li><img src="../images/screen_cel_14.jpg"/></li>
<li><img src="../images/screen_cel_15.png"/></li>
<li><img src="../images/screen_cel_16.jpg"/></li>
<li><img src="../images/screen_cel_17.jpg"/></li>
</ul>
</div>
</div>
</section>
</body>
</html>Using JQuery animate has been my attempt so far.