Scrollable list – add a Pause button

With Content Views Pro, you can enable next, prev and indicator buttons in the Scrollable list with friendly settings.
To add the pause button, please add this code to Custom JS field in Content Views >> Settings page:

/* Add pause button for scrollable list */
$('.pause.carousel-control').on('click',function(){
    var $carousel = $(this).closest('[data-ride="cvcarousel"][data-interval]'), $button = $(this).find('span');
    if($button.hasClass('glyphicon-pause')){
        $carousel.cvcarousel('pause');
        $button.removeClass('glyphicon-pause').addClass('glyphicon-play');
    } else {
        $carousel.cvcarousel('cycle');
        $button.addClass('glyphicon-pause').removeClass('glyphicon-play');
    }
});

To show the pause button for all scrollable lists, add this code below above code

$('.left.carousel-control').after('<a class="pause carousel-control"><span class="glyphicon glyphicon-pause"></span></a>');

To show the pause button for specific scrollable lists only, add this code below above code:

$('.left.carousel-control', '#pt-cv-view-VIEWID').after('<a class="pause carousel-control"><span class="glyphicon glyphicon-pause"></span></a>');

(replace VIEWID with ID of your View)

Best regards,

Scroll to Top