Twitter-Bootstrap-3 Carousel Modifications

Question

So guys, I have a carousel which works perfectly. Now I want to be able to modify it slightly so heres my script:

Solution 1:

If you want to achieve something like this this is what you have to do:

HTML code:

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="active item" id="id1">
            <img src="http://placehold.it/300x200/888&text=Item 1" />
        </div>
        <div class="item" id="id2">
            <img src="http://placehold.it/300x200/aaa&text=Item 2" />
        </div>
        <div class="item" id="id3">
            <img src="http://placehold.it/300x200/444&text=Item 3" />
        </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>  

<div class="container">
    <ul>
        <li style="display:inline-block;"><a href="javascript:slideTo('0')">Dashobard</a></li>
        <li style="display:inline-block;"><a href="javascript: slideTo('1')">Timeline</a></li>
        <li style="display:inline-block;"><a href="javascript: slideTo('2')">Visionboard</a></li>                                       
    </ul>
</div>

JavaScript code:

function slideTo(valoare){
    if (valoare == 0) $('#myCarousel').carousel(0)
    if (valoare == 1) $('#myCarousel').carousel(1)
    if (valoare == 2) $('#myCarousel').carousel(2)    
}

And the CSS code i've used for this example:

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

.container {
    text-align: center;
}

ul {margin: 0;}

Here is the jsfiddle

This example uses .carousel(number)

Cycles the carousel to a particular frame (0 based, similar to an array).

Update 1:

Baca Juga

Result here
Code here

Update 2:

Result here
Code here

Solution 2:

You can try something like this..

http://bootply.com/113737

This example uses the data-target and data-slide-to navigate to specific slide.

javascript sammlung

Twitter-Bootstrap-3 Carousel Modifications

Solution 1:

Solution 2:

Post a Comment for "Twitter-Bootstrap-3 Carousel Modifications"