How to do auto slide for divs [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have three main div for movie poster. I want that three div to auto slide and also want left and right navigation button. How can it be done?
HTML Code
<div class="movie-review">
<div class="single-movie">
<img src="style.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>
<div class="single-movie">
<img src="rasputin.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>
<div class="single-movie">
<img src="spirit.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>
</div>
CSS Code
.single-movie {width:250px; height:370px; float:left;}
.single-movie img {position:absolute; -webkit-transition: 0.4s ease; transition: 0.4s ease;}
.single-movie img:hover {-webkit-transform: scale(1.08); transform: scale(1.08);}
.description {background:rgba(0,0,0,0.9); color:#fff; padding:5px 9px; position:relative; top:290px;}
.movie_title {font-size:22px;}
.rating {color:#ff6000; font-size:18px;}

Answer 1

You can do that with slick slider. Here is my codepen link
$('.movie-review').slick();

Answer 2

You can do this with Bootstrap carousel
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: false,
});
});
/* carousel */
.media-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
/* Previous button */
.media-carousel .carousel-control.left
{
left: -12px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Next button */
.media-carousel .carousel-control.right
{
right: -12px !important;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
background: #333333;
}
.media-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<h2>Media Slider Carousel BS3</h2>
</div>
<div class='row'>
<div class='col-md-8'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
</div>
See Full Page Demo