Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Boris Kamp
Boris Kamp
16,660 Points
Posted by Boris Kamp
Boris Kamp
16,660 Points

Autoplay play and pause buttons.

Hi! I've created the following buttons to play and pause the autoplay feature in one of my carousels. Here is the css of the buttons:

<span class="glyphicon glyphicon-play play-properties"></span>
<span class="glyphicon glyphicon-pause pause-properties"></span>

I created the class .play-properties and .pause-properties to specifically play and pause the properties carousel seen here in my js file:

//call Owl-Carousel
$(document).ready(function(){

    $("#owl-properties").owlCarousel({
        nav: true,
        loop: true,
        dots: false,
        autoplay: true,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        navText: [
          "<span class='glyphicon glyphicon-chevron-left'></span>",
          "<span class='glyphicon glyphicon-chevron-right'></span>"
          ],
        margin:10,
        responsiveClass:true,
        responsive:{
            0:{
                items:2,
            },
            450:{
                items:3,
            },
            767:{
                items:4,
            },
            991:{
                items:5,
            },
            1199:{
                items:5,
            }
        }
    });

    $("#owl-nieuws").owlCarousel({
        nav: true,
        loop: true,
        dots: false,
        autoplay: true,
        autoplayTimeout:2000,
        autoplayHoverPause:true,
        navText: [
          "<span class='glyphicon glyphicon-chevron-left'></span>",
          "<span class='glyphicon glyphicon-chevron-right'></span>"
          ],
        margin:10,
        responsiveClass:true,
        responsive:{
            0:{
                items:3,
            },
            450:{
                items:4,
            },
            767:{
                items:2,
            },
            991:{
                items:2,
            },
            1199:{
                items:4,
            }
        }
    });
});

now how can I assign the play and pause options to those buttons? I found this http://www.owlcarousel.owlgraphic.com/demos/autoplay.html but I couldn't figure it out....

Thanks!