CODEWITHSUNDEEP
jquerycsssliderdreamweaverflexslider
user3783172
user3783172

Reputation: 11

Flexslider sliding doesn't resume after using next/previous controls

No jquery background, just wanted a simple carousel for dreamweaver built site. All working nicely BUT - when you click on the next/previous arrows to move a slide forward/backward, on moving your cursor off the slider (arrows disappear) the image stays stuck on the last image you viewed instead of continuing/resuming functioning as a slider. Is this meant to happen? If so, is there any way to make it resume 'play'? Thanks

Upvotes: 0

Views: 3185

Answers (3)

onlykalu
onlykalu

Reputation: 288

$('.flexslider').flexslider({
   animation: "slide",
   slideshowSpeed: 1000,
   start: function(slider) {
      $('body').removeClass('loading');
   },
   after: function (slider) {
      if (!slider.playing) {
        slider.play();
      }
   }
});

Upvotes: 1

veuncent
veuncent

Reputation: 1712

Try setting the pauseOnAction parameter to false:

$(document).ready(function () {
    $('.flexslider').flexslider({
        pauseOnAction: false
    });
});

Upvotes: 1

K K
K K

Reputation: 18099

You can try this in your js code:

Solution 1:

$('.flex-next').on('click',function () {
    $('.flexslider').flexslider("play");
});
$('.flex-prev').on('click',function () {
    $('.flexslider').flexslider("play");
});

Demo: http://jsfiddle.net/lotusgodkk/n9JUc/22/

Solution 2: Add this in your flexslider initialisation code.

after: function (slider) {            
        if (!slider.playing) {
            slider.play();
        }
    }

Demo: http://jsfiddle.net/lotusgodkk/n9JUc/23/

Basically, whenever the next/prev buttons are clicked, we call the play method, where .flex-next and .flex-prev are the classes on next and previous buttons.

In your website, you have used:

$(window).load(function () {
    $('.flexslider').flexslider();
});
$('.flex-next').on('click', function () {
    $('.flexslider').flexslider("play");
});
$('.flex-prev').on('click', function () {
    $('.flexslider').flexslider("play");
});

Instead, just use this code:

    $(document).ready(function () {
    $('.flexslider').flexslider({
        after: function (slider) {
            if (!slider.playing) {
                slider.play();
            }
        }
    });
});

Use $(document).ready instead of $(window).load

Upvotes: 2

Related Questions