Question

I’ve been struggling with this and couldn’t find the solution in the documentation. AnythingSlider is creating the thumbnails as desired but they just won’t move. They seem to be fixed and it’s only displaying 9 thumbnails. The problem is when I add more than 9 photos the thumbnails stack in the next line instead of being added in the current and hiding.

This is the code I’m using:

$('#slider1')
              .anythingSlider({
               navigationFormatter : function(i, panel){ // add thumbnails as navigation links
                return '<img src="images/thumbs' + ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19',][i - 1] + '.jpg">';
               },
                // Callback when the plugin finished initializing
                onInitialized: function(e, slider) {

                    var time = 1000, // allow movement if < 1000 ms (1 sec)
                        range = 50,  // swipe movement of 50 pixels triggers the slider
                        x = 0, t = 0, touch = "ontouchend" in document,
                        st = (touch) ? 'touchstart' : 'mousedown',
                        mv = (touch) ? 'touchmove' : 'mousemove',
                        en = (touch) ? 'touchend' : 'mouseup';

                    slider.$window.add( slider.$controls )
                        .bind(st, function(e){
                            // prevent image drag (Firefox)
                            e.preventDefault();
                            t = (new Date()).getTime();
                            x = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX; 
                        })
                        .bind(en, function(e){
                            t = 0; x = 0;
                        })
                        .bind(mv, function(e){
                            e.preventDefault();
                            var newx = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
                            r = (x === 0) ? 0 : Math.abs(newx - x),
                            // allow if movement < 1 sec
                            ct = (new Date()).getTime();
                            if (t !== 0 && ct - t < time && r > range) {
                                if (newx < x) { 
                                    if ($(this).hasClass('anythingControls')) {
                                        slider.$controls.find('.next').trigger('click');
                                    } else {
                                        slider.goForward();
                                    }
                                    return false;
                                }
                                if (newx > x) {
                                    if ($(this).hasClass('anythingControls')) {
                                        slider.$controls.find('.prev').trigger('click');
                                    } else {
                                        slider.goBack(); 
                                    }
                                }
                                t = 0; x = 0;
                                return false;
                            }
                        });
                }
               });});});

Any idea of what could be wrong in this configuration?
Thanks in advance!

Answer 1

It looks like you are missing the navigationSize option setting. By default it is false and doesn’t limit the number of visible controls.

I believe this is the demo you are trying to emulate.