CODEWITHSUNDEEP
htmltwitter-bootstrapslider
Top Questions
Top Questions

Reputation: 1852

bootstrap data toggle carousel

I´ve got this html code in my overlay for an own-written image-viewer:

<div class="carousel slide" id="imgViewer">
        <div class="carousel-inner">
            <div id="item1" class="item active">
                <div id="pic1">
                    <center>
                          <img style="height: 100%;" src="./upload/offers/6/img.jpg" alt="">
                    </center>
                 </div>
            </div>
            <div id="item2" class="item ">
               <div id="pic2">
                 <center>
                   <img style="height: 100%;" src="./upload/offers/6/img2.jpg" alt="">
                 </center>
                </div>
            </div>
</div>
</div>

This is the Main-View (Slider on the left.)

On the right side i´ve got another view of all the images which are viewable in the slider. This is one of my last tries...

<a href="#item1" data-toggle="carousel-toggle" data-slide=""><img style="vertical-align: middle;" src="./upload/offers/6/img.jpg" alt="" /></a>

Proble is: It doesn´t work like this...i want to jump to the clicked image in the slider...how could i realize this?

Upvotes: 0

Views: 1634

Answers (2)

Top Questions
Top Questions

Reputation: 1852

$('#item1').click(function() {
                $('#item1, #item2, #item3, #item4, #item5, #item6, #item7').removeClass('active');
                $('#item1').addClass('active');
                return true;
            });

okay thought i coul do it with bootstrap something like data-toggle carousel...

data-slide-to

this will do it for everyone who is searching it...

Upvotes: 1

Will
Will

Reputation: 3044

You could add a onClick event to the image. That event could change the class to active on the div of the image you would like to show.

<div id="item1" class="item active">

The Class 'Active' is the slide that is showing.

Upvotes: 2

Related Questions