Карусель Jquery добавить предыдущую и следующую функцию

Question

Карусель Jquery добавить предыдущую и следующую функцию

0

У меня есть небольшая карусель jQuery
HTML

<div class="advantages-slider">
<ul class="advantages-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</div>

JQuery

$.fn.carousel = function () {
var self = this;

var width = self.find('li').outerWidth(true);
self.find('li:nth-child(2)').addClass('main-item');

setInterval(function () {       

    self.find('li').removeClass('main-item');
    self.find('li:nth-child(3)').addClass('main-item')
        .delay(10000)
        .queue(function () {
        $(this).removeClass('main-item');
        $(this).dequeue();
    });

    var text = self.find('.advantage-item-text').html();

    $('.advantage-full-item .full-item-text').slideUp(1000).empty().html(text).slideDown(1000).delay(8000);

    self.delay(8000).animate({
        right: '+=' + width
    }, {
        duration: 2000,
        queue: false,
        complete: function () {

            var first = self.find('li:first-child');
            first.remove();
            self.append(first);
            self.css({
                right: '-=' + width
            });
        }
    });
}, 10000);

return this;
};

$('.advantages-list').carousel();

http://jsfiddle.net/8d4Fh/21/

Он работает автоматически. Но теперь мне нужно добавить кнопки управления, когда я нажимаю кнопку prev, чтобы перейти к предыдущему слайд назад, когда я нажимаю на next кнопку, чтобы прокрутить вперед один слайд.
Пожалуйста, покажите мне, как это сделать?

truslivii.lev 30 март 2014, в 13:27

Источник

Теги:

jquery

1 ответ

Ещё вопросы

Devima · Answer 1 · 2014-03-31T09-40-00.000Z

Если вы все еще заинтересованы, я попытался ответить на вопрос, который вы задали вчера.
скрипка
Я изменил ваш код css/javascript для более легкого нажатия на предыдущие и следующие кнопки.
Но конечный результат очень похож на ваш.
Я также добавил обратный отсчет, чтобы перезапустить слайд-шоу через десять секунд (нажмите prev next buttons)
Это просто пример, если вам это не нравится, извините за неудобства.

<script type="text/javascript">
    $.fn.carousel = function () {

        var giranews = setInterval(function(){move()},5000);
        var width = $(this).find('li').outerWidth(true); 
        $(this).find('li:nth-child(3)').addClass('main-item');
        var that=$(this);

        function move(){
            var first = that.find('li:first-child');
            first.animate({'margin-left': '-='+width},2000,function(){
                that.append(first);
                that.find('li').removeAttr('style');
                that.find('li:nth-child(3)').addClass('main-item');
                that.find('li:nth-child(2)').removeClass('main-item');
            });
        };

        function stopx(){
               clearInterval(giranews);
        };

        function countdown(a) {
            var count = a;
             timerId = setInterval(function() {
                count--;
                console.log(count);
                if(count == 0) {
                    clearInterval(timerId);
                    giranews = setInterval(function(){move()},5000);
                };
            }, 1000);
        };

        $('.next-button-1').click(function(e){
            e.preventDefault();
            stopx();
            if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
            var first = that.find('li:first-child');
            first.stop().animate({'margin-left': '-='+width},2000,function(){
            that.append(first);
            that.find('li').removeAttr('style');
            that.find('li:nth-child(3)').addClass('main-item');
            that.find('li:nth-child(2)').removeClass('main-item');
           });
        });

        $('.prev-button-1').click(function(e){
            e.preventDefault();
            stopx();
            if(typeof timerId!=='undefined'){clearInterval(timerId);countdown(10)}else{countdown(10)}
            var first = that.find('li:first-child');
            var last = that.find('li:last-child');
            first.stop().animate({'margin-left': '+='+width},2000,function(){
            that.prepend(last);
            that.find('li').removeAttr('style');
            that.find('li:nth-child(3)').addClass('main-item');
            that.find('li:nth-child(4)').removeClass('main-item');
            });
        });

    };
</script>