Question

I would like to achieve something like this one: Circular Content Carousel
but I’m using Bootstrap and it already has it’s Carousel component.

Is there any way I can achieve the same functionality/effect using Bootstrap’s Carousel and perhaps some jquery? Or anyone knows any other way to achieve this? I am quite confused because of the grid layout.

P.S. I am not interested on the effect when the ‘read more’ is clicked on the referenced site.

Thanks so much for any help!

Answer 1

Okay, I just tried some expirement and I think I got what I want.
Basically, I was trying to fit 5 boxes in a span10 div.
But the 5 boxes isn’t static, so it may become 6 or 7 or more.
So I was trying to display 5 boxes(which is 1 ‘row’) at a time as the ‘active item’.
Each 5 boxes (which are divs actually) is 1 item.

So I guess, you got it already.
Here’s my code below with static data:

<div class="span10">
<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item">
            <div class="row">
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
            </div>                          
        </div>
        <div class="item">
            <div class="row">
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>
                <div class="span2 logs">                                                               
                    <h4>Span 2</h4>
                    <p>Carousel caption text<p>                            
                </div>                  
            </div>                          
        </div>                             
    </div>                  
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>                     
</div>

It will basically display 5 boxes in each scroll to the right or left.
Except if the last group is lesser than 5.