title: Make a responsive slider in mobile view not in a desktop view
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> 
  
  .box{
   //border: thin black solid;
   display: block;
   text-align: center;
  }
  
  .box ol{
   margin:auto;
  }
  
  .box ol li {
   list-style-type: none;
   display: inline;
   margin: auto;
  }
  
  ol li img {
   border-radius: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  &lt;ol class="carousel-indicators"&gt;
   &lt;li&gt;
    &lt;img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80"&gt;
   &lt;/li&gt;
   &lt;li&gt;
    &lt;img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80"&gt;
   &lt;/li&gt;
   &lt;li &gt;
    &lt;img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80"&gt;
   &lt;/li&gt;
   &lt;li&gt;
    &lt;img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80" style="border:2px black solid;"&gt;
   &lt;/li&gt;
  
   &lt;li &gt;
    &lt;img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80"&gt;
   &lt;/li&gt;
   &lt;li &gt;
    &lt;img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80"&gt;
   &lt;/li&gt;
   &lt;li&gt;
    &lt;img src="http://www.nature.com/nature/journal/v477/n7365/images/477415a-f1.2.jpg" width="80" height="80"&gt;
   &lt;/li&gt;
  
  &lt;/ol&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have n number of images. I have put images for testimonials.</p>
  
  <p>When I see in mobile view then all the images should have manual slider and center image should be active with black border. so when I scroll on the image to the left or right then it should slide accordingly in the mobile view.</p>
  
  <p><a href="https://i.stack.imgur.com/xvuac.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xvuac.png" alt="Just like this"></a></p>
  
  <p>so when I slide to left or right <strong>manually</strong> then the center image should be appeared as active. </p>
  
  <p>Thank you.</p>