user6827401 user6827401 - 2 months ago 10
HTML Question

how to keep the thumbnail inline so that it is in one line with buttons to move from one to another

I obtained the code from online.
The thumbnail is below the image slider.
Here is the html code:

<div class="row">
<div class="col-md-12" id="slider">

<div class="col-md-12" id="carousel-bounding-box">
<div id="myCarousel" class="carousel slide">
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/1200x480&amp;text=one" class="img-responsive">
</div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/1200x480/888/FFF" class="img-responsive">
</div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/1200x480&amp;text=three" class="img-responsive">
</div>
<!--and so on-->
</div>
</div>
<!-- main slider carousel nav controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data- slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

</div>
</div>
<!--/main slider carousel-->

<!-- thumb navigation carousel items -->
</div>
<div class="row">

<ul class="list-inline" >
<li> <a id="carousel-selector-0" class="selected">
<img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-1">
<img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-2">
<img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-3">
<img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
</a></li>
<li> <a id="carousel-selector-4">
<img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
</a></li>
<!-- and so on -->

<li> <a id="carousel-selector-12">
<img src="http://placehold.it/80x60&amp;text=eight" class="img-responsive">
</a></li>
</ul>


</div>


jquery code:

$('[id^=carousel-selector-]').click( function(){
var id_selector = $(this).attr("id");
var id = id_selector.substr(id_selector.length -1);
id = parseInt(id);
$('#myCarousel').carousel(id);
$('[id^=carousel-selector-]').removeClass('selected');
$(this).addClass('selected');
});

// when the carousel slides, auto update
$('#myCarousel').on('slide', function (e) {
var id = $('.item.active').data('slide-number');
id = parseInt(id);
$('[id^=carousel-selector-]').removeClass('selected');
$('[id=carousel-selector-'+id+']').addClass('selected');
});
})


The thumbnail is inline at the bottom but it takes more than oneline. I want it to be in one line with buttons to move back and forth. How can I keep it in one line? Can anyone help me with the code for this?

Answer

in your html code you have some extra div and jQuery the last line '})' is extra and you need to add thumb section how many slider you have add in the main slider .. and this class in thumb section will hide in small device "col-md-12 hidden-sm hidden-xs" And try to understand how bootstrap work in responsive #responsive-utilities-bootstrap .. live fiddle link

  $('#myCarousel').carousel({
    interval: 4000
   });

 $('[id^=carousel-selector-]').click(function() {
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length - 1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});
// when the carousel slides, auto update
$('#myCarousel').on('slide', function(e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-' + id + ']').addClass('selected');
});
      ul.list-inline
       {
      display: inline-flex;
      cursor: pointer;
      }
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" > 

 </script>

   <body>
    <div class="container-fluid">
      <div class="row">
       <div class="col-md-12" id="slider">

        <div class="col-md-12" id="carousel-bounding-box">
         <div id="myCarousel" class="carousel slide">
          <!-- main slider carousel items -->
          <div class="carousel-inner">
            <div class="active item" data-slide-number="0">
              <img src="http://placehold.it/1200x480&amp;text=one" 
           class="img-responsive">
            </div>
            <div class="item" data-slide-number="1">
              <img src="http://placehold.it/1200x480&amp;text=two" 
             class="img-responsive">
            </div>
            <div class="item" data-slide-number="2">
     <img src="http://placehold.it/1200x480&amp;text=three" class="img-
      responsive">
            </div>
            <div class="item" data-slide-number="3">
              <img src="http://placehold.it/1200x480&amp;text=four" 
        class="img-responsive">
            </div>
            <div class="item" data-slide-number="4">
              <img src="http://placehold.it/1200x480&amp;text=five"
         class="img-responsive">
            </div>
            <div class="item" data-slide-number="5">
              <img src="http://placehold.it/1200x480&amp;text=six"
         class="img-responsive">
            </div>
            <div class="item" data-slide-number="6">
              <img src="http://placehold.it/1200x480&amp;text=seven"
      class="img-responsive">
            </div>
            <div class="item" data-slide-number="7">
              <img src="http://placehold.it/1200x480&amp;text=eight"
            class="img-responsive">
            </div>
            <!--and so on-->
          </div>
        </div>
        <!-- main slider carousel nav controls -->
        <a class="left carousel-control" href="#myCarousel" role="button" 
        data- slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">    
        </span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" 
         data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria- 
           hidden="true">
        </span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>

  </div>

  <!--/main slider carousel-->

  <!-- thumb navigation carousel items -->

  <div class="col-md-12 hidden-sm hidden-xs" id="slider-thumbs">

    <ul class="list-inline">
      <li>
        <a id="carousel-selector-0" class="selected">
          <img src="http://placehold.it/80x60&amp;text=one" class="img-responsive">
        </a>
      </li>
      <li>
        <a id="carousel-selector-1">
          <img src="http://placehold.it/80x60&amp;text=two" class="img-responsive">
        </a>
      </li>
      <li>
        <a id="carousel-selector-2">
          <img src="http://placehold.it/80x60&amp;text=three" class="img-responsive">
        </a>
      </li>
      <li>
        <a id="carousel-selector-3">
          <img src="http://placehold.it/80x60&amp;text=four" class="img-responsive">
        </a>
      </li>
      <li>
        <a id="carousel-selector-4">
          <img src="http://placehold.it/80x60&amp;text=five" class="img-responsive">
        </a>
      </li>
      <li>
        <a id="carousel-selector-5">
          <img src="http://placehold.it/80x60&amp;text=six" class="img-responsive">
        </a>
      </li>
      <li>
        <a id="carousel-selector-6">
          <img src="http://placehold.it/80x60&amp;text=seven" class="img-
       responsive">
        </a>
      </li>
      <li>
        <a id="carousel-selector-7">
          <img src="http://placehold.it/80x60&amp;text=eight" class="img-
        responsive">
        </a>
      </li>

      <!-- and so on -->
    </ul>
  </div>

</div>
 </body>