0

I am trying to create a bootstrap carousel for single image sliding. This is an example which is exactly I need.

My problem is, I want to display thumbnail images in bootstrap columns. In this case it is 6 columns.

So I tried it something like this - 

<div class="container">
    <div class="col-sm-12">
        <div class="carousel slide" id="myCarousel">
          <div class="carousel-inner">
                <div class="item active">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a></div>
                </div>
                <div class="item">
                  <div class="col-sm-2">
                  <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">8</a></div>
                </div>
          </div>
          <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
    </div>
</div>

Problem is it display only 3 columns. This is a DEMO with the code sofar.

Can anybody tell me what is the problem in my code? Thank you.

user3733831
  • 2,886
  • 9
  • 36
  • 68
  • is your problem the extra white space left in each row at the end??? – Abhishek Ghosh Apr 10 '15 at 06:48
  • @AbhishekGhosh, I am not clear what you have mentioned. Can you kindly explain it little. Thank you. – user3733831 Apr 10 '15 at 06:51
  • Your code in the question and in the link http://jsbin.com/qujobaboku/1/ is different. – anpsmn Apr 10 '15 at 06:51
  • Assuming you need 6 columns to be shown then you need to have 6 `col-sm-2` classes inside one `.item` class – anpsmn Apr 10 '15 at 06:52
  • yes I need 6 columns – user3733831 Apr 10 '15 at 06:53
  • Then in the code above each item has only one column in it. You need to add 6 columns inside .item – anpsmn Apr 10 '15 at 06:54
  • @anpsmn, You mean this - http://jsbin.com/leyabutemu/1/ – user3733831 Apr 10 '15 at 06:57
  • @user3733831 No, something like this http://jsbin.com/diluzemuse/1/ – anpsmn Apr 10 '15 at 07:06
  • @anpsmn, your suggestion is ok. But I am looking a carousel something like to the example which I mentioned in my question. – user3733831 Apr 10 '15 at 07:12
  • @anpsmn, It sliding thumbnails one by one... – user3733831 Apr 10 '15 at 07:13
  • @user3733831 Oh sorry, I missed that. Looking at the example the script is for three elements only. If you see, it takes elements next two and appends the clone. You will have to modify the script by adding for next 4 siblings. – anpsmn Apr 10 '15 at 07:24
  • @user3733831 The example you provided is some kind of workaround, and it breaks if I copy it to JS bin. So it is hard to modify it without having working "base". Please also take a look at this answer http://stackoverflow.com/a/20450875/2522817 – mkutyba Apr 10 '15 at 07:38
  • @user3733831 You will have to do like this manually http://jsbin.com/notajuzoma/1/. Best is to use a plugin than use such hacky way. – anpsmn Apr 10 '15 at 07:51
  • @anpsmn, Thanks for your help.. This is how I figure it out - http://jsbin.com/qujobaboku/1/ – user3733831 Apr 10 '15 at 08:40

1 Answers1

0

Your code is fine , you need 6 sm-2 col

    <div class="container">
<div class="col-sm-12">
    <div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div>
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div>
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div><div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">2</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">3</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">4</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">5</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">6</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">7</a>
                </div>
            </div>
            <div class="item">
                <div class="col-sm-2">
                    <a href="#"><img src="http://lorempixel.com/400/200/" class="img-responsive">8</a>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
</div>

vinayak hegde
  • 2,117
  • 26
  • 26