Создание собственного слайдера в jQuery

Question

Создание собственного слайдера в jQuery

0

Я пытаюсь создать пользовательский слайдер, используя jQuery, только я не уверен в лучшей практике, как это сделать.

Мой слайдер имеет 3 слайда и блок управления, каждый из которых относится к слайду (1, 2, 3).

Когда щелкнул элемент управления, у меня получилось, что мой слайд исчез, только я не уверен, как сказать, был ли нажат элемент управления X, добавьте активный класс к соответствующему слайду?

Ive сделал скрипку, чтобы объяснить, что я надеюсь, помогает, что мне нужно, однако, является объяснением лучшей практики в этом?

Извините, если вопросы трудно понять!

То, что я использую, чтобы погасить мой текущий слайд, но как только он ушел, я не могу полагаться на активный класс, чтобы сказать, добавьте класс в следующий элемент?

$('.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/

Liam 02 окт. 2013, в 15:46

Источник

Теги:

javascript

jquery

html5

1 ответ

Ещё вопросы

chakroun yesser · Accepted Answer · 2013-10-02T11-29-00.000Z

Я думаю, это то, что вам нужно, попробуйте этот код, но я уверен, что вы можете найти много разных методов.

$('.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();
                        });
                    });
                }
            });

Ваш код решил проблему, поддерживая версию OP, +1 для нее