CODEWITHSUNDEEP
twitter-bootstrap
Alex
Alex

Reputation: 996

How to use data-pause attribute in Bootstrap Carousel

In Bootstrap carousel I want to disable pause on mouse over using data attribute is it possible. I am also trying to set data-interval but both doesn't work. However it works using JavaScript but i want to use it trough using data attribute.

Options can be passed via data attributes or JavaScriptz. For data attributes, append the option name to data-, as in data-interval=""

Thanks in Advance. JavaScript - 

<script type="text/javascript">
$(function(){
     $("#myCarousel").carousel();
});
</script>

HTML -

<div class="container">
    <div id="myCarousel" class="carousel slide" data-interval="2000" data-pause="false">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg" alt=""></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg" alt=""></div>
    <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg" alt=""></div>
    </div>
    <!-- Carousel nav -->
    <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>

Upvotes: 3

Views: 18102

Answers (2)

Alan Marvel
Alan Marvel

Reputation: 16

This is a little late, but I think it might benefit other people. I believe the problem is because you're trying to mix data attributes with JavaScript. Instead of adding the pause option as a data attribute, add it when you invoke the carousel function:

$(function(){
     $("#myCarousel").carousel({
          pause: false
     });
});

You may have to do it with the interval data attribute as well.

Upvotes: 0

Scott Drinkwater
Scott Drinkwater

Reputation: 81

Put this into div of the whole carousel

<div id="myCarousel" class="carousel" data-pause="false">

Upvotes: 6

Related Questions