Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap carousel slide start without "active"

i like to use the Bootstrap carousel slider. Is it possible to start the slider without the active class in the first Image? The code is set with TYPOSCRIPT and i can not set the first item to active. Is there a way with JavaScript?

Thanx for help

Christian

HTML Code

<div class="carousel slide article-slide" id="myCarousel">
    <div class="carousel-inner cont-slider">
        <div class="item">
          <img class="img-responsive" src="http://placehold.it/800x300/cccccc/ffffff">
        </div>
       <div class="item">
          <img class="img-responsive" src="http://placehold.it/800x300/999999/cccccc">
        </div>
        <div class="item">
          <img class="img-responsive" src="http://placehold.it/800x300/dddddd/333333">
        </div>              
    </div>
</div>
like image 295
schani Avatar asked Oct 28 '15 12:10

schani


People also ask

How do I make bootstrap carousel not slide automatically?

$('. carousel'). carousel({ interval: false, }); That will make the auto sliding stop because there no Milliseconds added and will never slider next.

How do I change the timing of a bootstrap carousel slide?

You can simply use the data-interval attribute of the carousel class. It's default value is set to data-interval="3000" i.e 3seconds. All you need to do is set it to your desired requirements.

How do I stop carousel slider autoplay in bootstrap 4?

To turn off the autoplay set data-interval="false" to the carousel element.

Why is bootstrap carousel not sliding?

In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).


1 Answers

Yes, you can add class like this (using jQuery):

$(document).ready(function () {
  $('#myCarousel').find('.item').first().addClass('active');
});
like image 184
max Avatar answered Oct 19 '22 10:10

max