JQuery: как реализовать контроллер для слайдера (карусель)?

Question

JQuery: как реализовать контроллер для слайдера (карусель)?

0

Я построил слайдер, используя jQuery, который отлично работает. Это была быстрая разработка, так что не было времени добавить контроллер. В настоящее время становится сложно установить контроллер для карусели.

Есть ли у кого-нибудь решение или альтернатива исправить это?

Демо- версия http://jsfiddle.net/sweetmaanu/Pn2UB/16/

$.fx.speeds._default = 1000;
function slider(container) {
    var currPg = null,
        firstPg = null;
    container.find('> .pg').each(function (idx, pg) {
        pg = $(pg);
        var o = {
            testimonial: pg.find('> .testimonial'),
            thumb: pg.find('> .testimonial-thumb'),
            pg: pg
        };
        o.pg.css({
            position: 'absolute',
            width: '100%',
            height: '100%',
        });

        if (idx > 0) {
            o.pg.css({
                opacity: 0,
                    'z-index': -1
            });
            o.testimonial.css({
                'margin-left': '100%'
            });
            o.thumb.css({
                'bottom': '-100%'
            });
        } else {
            firstPg = o;
        }
        o.prev = currPg;
        if (currPg) {
            currPg.next = o;
        }
        currPg = o;
    });
    firstPg.prev = currPg;
    currPg.next = firstPg;
    currPg = firstPg;

    this.advance = function advance(duration) {
        console.log("advance!", this);
        var dur = duration || $.fx.speeds._default;
        var dur2 = Math.ceil(dur / 2);

        var dh = container.height();
        var dw = container.width();
        var nextPg = currPg.next;

        nextPg.pg.css({
            opacity: 1,
                'z-index': null
        });

        var _pg = currPg;
        currPg.testimonial.stop().animate({
            'margin-left': -dw
        }, dur, function () {
            _pg.pg.css({
                opacity: 0,
                    'z-index': -1
            });
            _pg = null;
        });
        nextPg.testimonial.stop()
            .css({
            'margin-left': dw
        })
            .animate({
            'margin-left': 0
        }, dur);
        currPg.thumb.stop().animate({
            'bottom': -dh
        }, dur2, function () {
            nextPg.thumb.stop()
                .css({
                'bottom': -dh
            })
                .animate({
                'bottom': 0
            }, dur2);
            nextPg = null;
        });
        currPg = nextPg;
    }
}
var s = new slider($('#banner'));

function scheduleNext() {
    setTimeout(function () {
        s.advance();
        scheduleNext();
    }, 5000);
}
scheduleNext();

Muhammed 02 окт. 2013, в 16:09

Источник

0

Вам нужно определить, что вы подразумеваете под «контроллером», более конкретно о его назначении. Поскольку ваш код выглядит так, как будто его сбил грузовик, вы можете рассмотреть возможность добавления комментариев.
Mike H. 02 окт. 2013, в 14:03
0

Контроллер @MikeHometchko для слайдера, который означает next для перехода к слайду и prev чтобы показать предыдущий слайдер. Я хотел бы получить совет или предложение, которое отлично.
Mo. 02 окт. 2013, в 14:06

Теги:

javascript

jquery

html

css

carousel

2 ответа

1

Для следующего слайдера вам понадобятся:

$('#next').click(function(){
s.advance();
});

Но в любом случае вам нужно построить универсальные методы анимации с параметрами. Проверьте следующие примеры: http://jsfiddle.net/lalatino/pjTU2/ и http://sorgalla.com/projects/jcarousel/examples/static_controls.html

PingOfDeath 02 окт. 2013, в 12:14

0

в следующий раз я так и сделаю. Спасибо за ваш совет и предложение
Mo. 02 окт. 2013, в 16:13

Ещё вопросы

Вам нужно определить, что вы подразумеваете под «контроллером», более конкретно о его назначении. Поскольку ваш код выглядит так, как будто его сбил грузовик, вы можете рассмотреть возможность добавления комментариев.
Контроллер @MikeHometchko для слайдера, который означает next для перехода к слайду и prev чтобы показать предыдущий слайдер. Я хотел бы получить совет или предложение, которое отлично.
в следующий раз я так и сделаю. Спасибо за ваш совет и предложение

Sanoob · Accepted Answer · 2013-10-02T14-20-00.000Z

Вы просто хотите добавить переменное направление и изменить его по щелчку как prev, так и next

var direction = 'left';



$('#next').click(function(event) {
    direction = 'right';
    s.advance(1000,direction);
});
$('#prev').click(function(event) {
    direction = 'left';
    s.advance(1000,direction);
});

затем добавьте строку, где он проверит переменную направления

    if(direction == 'left')
        var dw = container.width();
    else if(direction =='right')
        var dw = - container.width();
    else{
        console.log('Wrong direction')
        return;
    }

Карозал исправлен

Не забудьте добавить аргумент в расширенную функцию