title: Responsive Product Slider Bootstrap 3
body: <p>I am trying to make a slider responsive that is a bit trickier than what I imagined. I need help with making it responsive and some javascript.</p>
  
  <p>I have a bootply set up for you and edited it several times. I think I broke the counter which really stinks but it works on my local files which is weird to me.</p>
  
  <p>Here are the states I need to try and match in order from Desktop, Tablet and mobile.</p>
  
  <p><img src="https://i.stack.imgur.com/vkIGI.jpg" alt="Desktop View"></p>
  
  <p>This will slide 4 at a time</p>
  
  <p><img src="https://i.stack.imgur.com/GPZ4L.jpg" alt="Tablet View"></p>
  
  <p>This will slide 3 at a time showing part of the 4th slide which will become the 1st</p>
  
  <p><img src="https://i.stack.imgur.com/N3efp.jpg" alt="Mobile View"></p>
  
  <p>This will slide 1 at a time showing part of the next slide.</p>
  
  <p>Each state wrapper uses the maximum column col-xs-12</p>
  
  <p>Here is the code I have so far and my bootply: <a href="http://www.bootply.com/2LWXK0Hu6C" rel="nofollow noreferrer">demo</a></p>
  
  <pre><code>$(document).ready(function() {
      $('#myCarousel').carousel({
      interval: 0
      })
  
      $('#myCarousel').on('slid.bs.carousel', function() {
          //alert("slid");
      });
  
          $('#myCarouselfeed').on('slid', function() {
              var to_slide = $('.carousel-item.active').attr('data-slide-no');
              $('.myCarousel-target.active').removeClass('active');
              $('.carousel-indicators [data-slide-to=' + to_slide + ']').addClass('active');
          });
          $('.myCarousel-target').on('click', function() {
              $('#myCarouselfeed').carousel(parseInt($(this).attr('data-slide-to')));
              $('.myCarousel-target.active').removeClass('active');
              $(this).addClass('active');
          });
  
  
  // Listen to the 'slide carousel' event
  // to trigger our code after each slide change
  $('.Leadership').on('slid.bs.carousel', function () {
  
    // This variable contains all kinds of data and methods related to the carousel
    var carouselData = $(this).data('bs.carousel');
    // EDIT: Doesn't work in Boostrap &gt;= 3.2
    //var currentIndex = carouselData.getActiveIndex();
    var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
    var total = carouselData.$items.length;
  
    // Create the text we want to display.
    // We increment the index because humans don't count like machines
    var strong = '&lt;strong&gt;';
    var strongClose = '&lt;/strong&gt;';
    var text = strong + 'Showing ' + (currentIndex + 1) + strongClose + ' out of ' + total;
  
    // You have to create a HTML element &lt;div id="carousel-index"&gt;&lt;/div&gt;
    // under your carousel to make this work
    $('#carousel-index').html(text);
  });
  
  });
  
  
  .leadershipSlider{
      margin-top:50px;
      }
  .leadershipCol {
      float: left;
      }
  .leadershipName{
      color:#fff; 
      height:auto; 
      width:62%; 
      background-color:Orange; 
      padding:10px; 
      margin:-85px 0 0 38%; 
      border:1px solid #fff; 
      display:block; 
      float:left;
      }
  .leadershipName .glyphicon.glyphicon-menu-right.pull-right{
      color:#fff; 
      margin:-8px 0;
      }
  .leadershipImg{
      display:block; 
      float:left
      }
  #carousel-index{
      margin:5px 0 0;
      }
  .thumbnail {
      display: block; 
      padding: 4px; 
      margin-bottom: 0px; 
      line-height: 1.42857143; 
      -webkit-transition: all .2s ease-in-out; 
      transition: all .2s ease-in-out; 
      border-radius: 0; border: none; 
      background-color: transparent;
      }
  .carousel-control {
      top: 0; 
      left: 0; 
      bottom: 0; 
      width: 15%; 
      opacity: 1; 
      font-size: 20px; 
      color: #fff; 
      text-align: center; 
      text-shadow: none;
      }
  .carousel-control.left {
      background-image: none; 
      position:relative; 
      display:table; 
      height:45px;
      width:45px;
      }
  .carousel-control.right {
      left: auto; 
      position:relative; 
      right: 0; 
      background-image: none; 
      display:table;
      height:45px;
      width:45px;
      }
  .carousel-control {
      padding-top:0;
      }
  .well{
      background-color: transparent; 
      padding: 0px; 
      border: 0px solid #fff; 
      box-shadow:none; 
      border-radius: 0px; 
      margin-bottom: 0px;
      }
  .btn-darkBlue{
      border-color:#fff; 
      background-color:blue; 
      height:45px;
      width:45px;
      }
  .btn-darkBlue:hover, .btn-darkBlue:active, .btn-darkBlue:focus{
      border-color:#fff; 
      background-color:blue;
      }
  .carouselNext, .carouselPrev {
      color:#fff;
      }
  
  
  &lt;!-- HTML --&gt;
  
  &lt;!-- BEGIN LEADERSHIP SLIDER --&gt;
  
  &lt;div class="container leadershipSlider"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-1 col-sm-offset-0"&gt;
              &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&lt;button type="go" title="Previous" class="btn btn-default btn-darkBlue"&gt;&lt;i class="glyphicon glyphicon-menu-left carouselPrev"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
              &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;button type="go" title="Next" class="btn btn-default btn-darkBlue"&gt;&lt;i class="glyphicon glyphicon-menu-right carouselNext"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;div class="col-sm-11"&gt;
          &lt;div class="well"&gt;
              &lt;div id="myCarousel" class="carousel slide Leadership" data-ride="carousel"&gt;
                  &lt;!-- Carousel items --&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;!--/items--&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                              &lt;div class="col-sm-3 leadershipCol"&gt;&lt;a class="thumbnail leadershipImg" href="#x"&gt;&lt;img title="TMC Connect" src="http://placehold.it/165x165" alt="Connect Blog" class="img-responsive pull-left"&gt;&lt;/a&gt; &lt;div class="leadershipName"&gt;&lt;strong&gt;Harold&lt;/strong&gt;&lt;br /&gt;Rogers &lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-menu-right pull-right"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
                              &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;!--/item--&gt;
                  &lt;/div&gt;
  
                  &lt;!--/carousel-inner--&gt; 
              &lt;/div&gt;
  
              &lt;!--/myCarousel--&gt;
          &lt;/div&gt;
          &lt;div id="carousel-index" style="text-align: left;"&gt;&lt;strong&gt;Showing 1&lt;/strong&gt; out of 3&lt;/div&gt;
          &lt;!--/well--&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- BEGIN FEED --&gt;
  
  &lt;!-- END HTML --&gt;
  </code></pre>