Ho un Js che mi consente l'avanzamento tra una serie di slide, sia in modo sequenziale, sia in modo diretto, cliccando su una specifica icona.
Questo è il JS:
Codice PHP:
(function($) {
    $.fn.loopedSlider = function(options) {
        
    var defaults = {            
        container: '.container',
        slides: '.slides',
        pagination: '.pagination',
        containerClick: false, // Click container for next slide
        autoStart: 0, // Set to positive number for auto start and interval time
        restart: 0, // Set to positive number for restart and restart time
        slidespeed: 300, // Speed of slide animation
        fadespeed: 300, // Speed of fade animation
        autoHeight: false // Set to positive number for auto height and animation speed
    };
        
    this.each(function() {
        
        var obj = $(this);
        var o = $.extend(defaults, options);
        var pagination = $(o.pagination+' li a',obj);
        var m = 0;
        var t = 1;
        var s = $(o.slides,obj).children().size();
        var w = $(o.slides,obj).children().outerWidth();
        var p = 0;
        var u = false;
        var n = 0;
        var interval=0;
        var restart=0;
        
        $(o.slides,obj).css({width:(s*w)});
        
        $(o.slides,obj).children().each(function(){
            $(this).css({position:'absolute',left:p,display:'block'});
            p=p+w;
        });
        
        $(pagination,obj).each(function(){
            n=n+1;
            $(this).attr('rel',n);
            $(pagination.eq(0),obj).parent().addClass('active');
        });
        
        $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
        
        if (s>3) {
            $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:-w});
        }
        
        if(o.autoHeight){autoHeight(t);}
        
        $('.next',obj).click(function(){
            if(u===false) {
                animate('next',true);
                if(o.autoStart){
                    if (o.restart) {autoStart();}
                    else {clearInterval(sliderIntervalID);}
                }
            } return false;
        });
        
        $('.previous',obj).click(function(){
            if(u===false) {    
                animate('prev',true);
                if(o.autoStart){
                    if (o.restart) {autoStart();}
                    else {clearInterval(sliderIntervalID);}
                }
            } return false;
        });
        
        if (o.containerClick) {
            $(o.container ,obj).click(function(){
                if(u===false) {
                    animate('next',true);
                    if(o.autoStart){
                        if (o.restart) {autoStart();}
                        else {clearInterval(sliderIntervalID);}
                    }
                } return false;
            });
        }
        
        $(pagination,obj).click(function(){
            if ($(this).parent().hasClass('active')) {return false;}
            else {
                t = $(this).attr('rel');
                $(pagination,obj).parent().siblings().removeClass('active');
                $(this).parent().addClass('active');
                animate('fade',t);
                if(o.autoStart){
                    if (o.restart) {autoStart();}
                    else {clearInterval(sliderIntervalID);}
                }
            } return false;
        });
    
        if (o.autoStart) {
            sliderIntervalID = setInterval(function(){
                if(u===false) {animate('next',true);}
            }, o.autoStart);
            function autoStart() {
                if (o.restart) {
                clearInterval(sliderIntervalID);
                clearInterval(interval);
                clearTimeout(restart);
                    restart = setTimeout(function() {
                        interval = setInterval(    function(){
                            animate('next',true);
                        },o.autoStart);
                    },o.restart);
                } else {
                    sliderIntervalID = setInterval(function(){
                        if(u===false) {animate('next',true);}
                    },o.autoStart);
                }
            };
        }
        
        function current(t) {
            if(t===s+1){t=1;}
            if(t===0){t=s;}
            $(pagination,obj).parent().siblings().removeClass('active');
            $(pagination+'[rel="' + (t) + '"]',obj).parent().addClass('active');
        };
        
        function autoHeight(t) {
            if(t===s+1){t=1;}
            if(t===0){t=s;}    
            var getHeight = $(o.slides,obj).children(':eq('+(t-1)+')',obj).outerHeight();
            $(o.container,obj).animate({height: getHeight},o.autoHeight);                    
        };        
        
        function animate(dir,clicked){    
            u = true;    
            switch(dir){
                case 'next':
                    t = t+1;
                    m = (-(t*w-w));
                    current(t);
                    if(o.autoHeight){autoHeight(t);}
                    if(s<3){
                        if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                        if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
                    }
                    $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                        if (t===s+1) {
                            t = 1;
                            $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});                            
                            $(o.slides,obj).children(':eq(0)').css({left: 0});
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});                
                        }
                        if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                        if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                        u = false;
                    });                    
                    break; 
                case 'prev':
                    t = t-1;
                    m = (-(t*w-w));
                    current(t);
                    if(o.autoHeight){autoHeight(t);}
                    if (s<3){
                        if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                        if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
                    }
                    $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                        if (t===0) {
                            t = s;
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                            $(o.slides,obj).css({left: -(s*w-w)});
                            $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                        }
                        if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                        if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                        u = false;
                    });
                    break;
                case 'fade':
                    t = [t]*1;
                    m = (-(t*w-w));
                    current(t);
                    if(o.autoHeight){autoHeight(t);}
                    if (s<3){
                        if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                        if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
                        if (t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                        if (t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
                    }
                    $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                        if (t===s+1) {
                            t = 1;
                            $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});                            
                            $(o.slides,obj).children(':eq(0)').css({left: 0});
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});                
                        }
                        if (t===0) {
                            t = s;
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                            $(o.slides,obj).css({left: -(s*w-w)});
                            $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                        }
                        if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                        if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                        if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                        if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                        u = false;
                    });
                    break; 
                default:
                    break;
                }                    
            };
        }); 
    };
})(jQuery); 
Originariamente, lo script prevedeva che il passaggio da uno slide all'altro avvenisse con un effetto di scroll orizzontale, nel caso dell'avanzamento sequenziale, e con un effetto fade nel caso della selezione diretta. In pratica, cliccando sui pulsanti avanti ed indietro le slide scrollano verso destra o verso sinistra, mentre cliccando sulle icone relative a ciascuna slide il passaggio avveniva con una dissolvenza incrociata.
A me serviva, invece, che anche in questo caso ci fosse uno scroll.
Quindi, sono intervenuto sulla parte di codice del case fade.
Sono in effetti riuscito ad avere l'effetto scroll orizzontale anche utilizzando i link diretti, ma con un limite, che non riesco proprio a valicare: le slide sui cui agisco, sono 9, ma se clicco sull'icona dell'ultima, la slide corrente scompare e non appare nulla, a meno che non lo faccia mentre mi trovo con la slide precedente (8) visualizzata. Stessa cosa, con la 1: se mi trovo sulla 2, la 1 appare, altrimenti no.
Non riesco proprio a venirne a capo!
Qualche help?