How to do auto slide for divs
<p>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?</p>

<p><a href="https://i.stack.imgur.com/B5wvr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/B5wvr.jpg" alt="enter image description here"></a></p>

<p>HTML Code</p>

<pre><code>&lt;div class="movie-review"&gt;
&lt;div class="single-movie"&gt;
&lt;img src="style.jpg" width="250" &gt;
&lt;div class="description"&gt;
&lt;span class="movie_title"&gt;Movie Title&lt;/span&gt;&lt;hr&gt;
&lt;span class="rating"&gt;Rating:&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="single-movie"&gt;
&lt;img src="rasputin.jpg" width="250" &gt;
&lt;div class="description"&gt;
&lt;span class="movie_title"&gt;Movie Title&lt;/span&gt;&lt;hr&gt;
&lt;span class="rating"&gt;Rating:&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="single-movie"&gt;
&lt;img src="spirit.jpg" width="250" &gt;
&lt;div class="description"&gt;
&lt;span class="movie_title"&gt;Movie Title&lt;/span&gt;&lt;hr&gt;
&lt;span class="rating"&gt;Rating:&lt;/span&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>CSS Code</p>

<pre><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;}
</code></pre>