0

jQueryのみを使用してカスタムスライダーを作成しようとしていますが、これを機能させる方法のベストプラクティスがわかりません。

私のスライダーには、3 つのスライドと、それぞれがスライドに関連するコントロール セクション (1、2、3) があります。

コントロールがクリックされると、スライドがフェードアウトするだけです。X コントロールがクリックされた場合、アクティブなクラスを関連するスライドに追加する方法がわかりません。

私は役立つことを願って説明するためにフィドルを作成しましたが、これを行う際のベストプラクティスの説明が必要ですか?

質問がわかりにくかったらすいません！

現在のスライドをフェードアウトするために使用しているものですが、それがなくなると、アクティブなクラスに頼って次の要素にクラスを追加することはできませんか?

$('.ctrl-one').click(function(){
    $('.active .slide-img').animate({
        'marginRight' : "-=350px"
    }, 500, 'easeOutQuint', function(){
        $('.active .description').fadeOut().promise().done(function(){
            $(this).parent().removeClass('active');
        });
    });
});

http://jsfiddle.net/Esm97/

4

1 に答える 1

1

これが必要なものだと思います。このコードを試してください。ただし、さまざまな方法を見つけることができると確信しています。

$('.controls a').click(function() {
                var current = $(this).attr('class').replace('ctrl-', '');

                if (!$('.sector-banner .' + current).hasClass('active')) {
                    $('.active').animate({
                        'marginRight': "-=350px"
                    }, 500, 'linear', function() {
                        $(this).fadeOut().promise().done(function() {
                            $(this).css('margin-right',0);
                            $(this).removeClass('active');
                            $('.sector-banner .' + current).addClass('active');
                            $('.sector-banner .' + current).fadeIn();
                        });
                    });
                }
            });
于 2013-10-02T14:13:57.050 に答える