0

My current slider functions perfect, and also has a working pagination (paginated dots, active state, and control) but I just want to add ONE new feature without breaking anything:

The ability for my slider to autoplay on page load.

Any suggestions, greatly appreciated.

HTML / Markup:

<div class="allslideshow">
    <div class="slideshow-wrapper">
        <div class="slide" id="s1"></div>
        <div class="slide" id="s2"></div>
        <div class="slide" id="s3"></div>
    </div>
    <div class="slideshow-nav"> <a href="#s1">•</a>
 <a href="#s2">•</a>
 <a href="#s3">•</a>
    </div>
</div>

jQuery

jQuery(document).ready(function($) {
var Slideshow = {
    paginate: function () {
        var slides = $('div.slide', '.allslideshow'),
            total = slides.length;
        $('.slideshow-nav-total').text(total);
        slides.each(function (i) {
            $(this).data('index', i + 1);
        });
    },
    navigate: function () {
        $('a', '.slideshow-nav').click(function (e) {
            e.preventDefault();
            var $a = $(this);
            var slide = $($a.attr('href'));
            var wrapper = $('.slideshow-wrapper');
            wrapper.animate({
                left: -slide.position().left
            }, 500, 'linear', function () {
                $('.slideshow-nav-current').text(slide.data('index'));
                $a.addClass('active').siblings('a').removeClass('active');
            });

        });
    },
    init: function () {
        this.paginate();
        this.navigate();
    }
};
$(function () {
    Slideshow.init();
    });
});

Attempt:

// autoplay: function () {
//      .ready(function) { 
//         e.preventDefault();
//         var $a = $(this);
//         var slide = $($a.attr('href'));
//         var wrapper = $('.slideshow-wrapper');
//         wrapper.animate({
//             left: -slide.position().left
//         }, 300, 'linear', function () {
//             $('.slideshow-nav-current').text(slide.data('index'));
//             $a.addClass('active').siblings('a').removeClass('active');
//          });

//     });
// },
Zentaurus
  • 749
  • 2
  • 10
  • 25
fred randall
  • 7,023
  • 18
  • 73
  • 167

3 Answers3

1

You have to add a timeout that will automatically call the function that changes images So it would be something like

              setInterval(function(){
                    //call the function here
                }, 6000);
sinanspd
  • 1,989
  • 2
  • 14
  • 28
  • Makes sense! So, in my case I should just wrap it around starting at e.prevent? – fred randall Mar 25 '15 at 20:39
  • So one thing to keep in mind is that if you wrap it around start/end, the initializer would be called after a certain time which is bad. So what I would suggest is either keeping the initilizer out or assigning names to your functions such as loadImage so you can just call loadImage() outside to initilize and inside the setInterval to automatically change – sinanspd Mar 25 '15 at 20:41
1

SetIntervl will cause a delayed intialization.Just call your initializer function on window load like this:

window.onload = function(){
 //call the init function here
}
facebook-100003209134068
  • 66
  • 1
  • 10
  • Set Interval will cause a delay if you wrap the whole code inside it, if have a global call to the initilizing function it wont be a problem. And how does this create an autoplay? – sinanspd Mar 25 '15 at 20:54
1

The way to move forward is to abstract away the animation function from the "click" event handler on your links. That way you can call the animation function from both a click and a timer event. The tricky thing about this is that you have to capture the this context in order to use it inside a closure. Here's what I mean:

//...
moveTo: function($a) {
  var slide = $($a.attr('href'));
  var wrapper = $('.slideshow-wrapper');
  wrapper.animate({
    left: -slide.position().left
  }, 500, 'linear', function () {
    $('.slideshow-nav-current').text(slide.data('index'));
    $a.addClass('active').siblings('a').removeClass('active');
  });
},
navigate: function () {
    var self = this;
    $('a', '.slideshow-nav').click(function (e) {
        e.preventDefault();
        if (self.interval) {
          clearInterval(self.interval);
          self.interval = false;
        }
        var $a = $(this);
        self.moveTo($a);
    });
},
autoPlay: function() {
  var $alist = $('a', '.slideshow-nav');
  var i = 0;
  var self = this;
  this.interval = setInterval(function() {
    var $a = $alist.eq(i++);
    i %= $alist.length;
    self.moveTo($a);
  }, 1000);
},
init: function () {
    this.paginate();
    this.navigate();
    this.autoPlay();
}
//...

Try it in a plunker.

Austin Mullins
  • 6,869
  • 2
  • 31
  • 47