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

Question

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

0

У меня есть несколько слайдеров, каждый в своей статье section->. Моя проблема заключается в следующем: когда я нажимаю следующую или предыдущую кнопку на одном из ползунков, все слайдеры начинают сползать одновременно.

HTML:

<section id="section01">
        <article class="article01">
            <div class="wrapper">
                <ul class="slider">
                    <li class="slide"></li>
                    <li class="slide"></li>
                    <li class="slide"></li>
                </ul>
            </div>
            <img class="previous" src="images/arrow-transparent.png">
            <img class="next" src="images/arrow-transparent.png">
        </article>
</section>

CSS

.wrapper{
    height: 342px;
    margin: 0 auto;
    overflow: hidden;
    width: 918px;
}

.slider{
    height: 342px;
    position: relative;
    width: 5000px;
}

.slide{
    float: left;
    height: 342px;
    position: relative;
    width: 306px;
}

JS

/* slider */
$(function(){
    var i = 0;
    $('.previous').click(function(){
        var currentSlides = $(this).parent().find('.slide'),
        parent = $(this).parent().find('.wrapper ul li');
        i = --i -2 % currentSlides.length;
        if(i - 3 >= -3) {
            $('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
        } else {
            i = 0;
        }
    });

    $('.next').click(function(){
        var currentSlides = $(this).parent().find('.slide'),
        parent = $(this).parent().find('.wrapper ul li'),
        current = i;
        i = ++i + 2 % currentSlides.length;
        if(i + 3 < currentSlides.length) {
            $('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
        } else {
            i = current;
        }
    }); 
});

Как это исправить?

Goran Tesic 19 март 2014, в 18:13

Источник

Теги:

javascript

jquery

2 ответа

1

Это связано с тем, что вы выбираете все элементы класса slider чтобы они оживили их все.

Что делать, если вы выбираете slide?

$(function(){
    var i = 0;
    $('.previous').click(function(){
        var currentSlides = $(this).parent().find('.slide'),
        parent = $(this).parent().find('.wrapper ul li');
        i = --i -2 % currentSlides.length;
        if(i - 3 >= -3) {
            $('.slide').animate({'left' : -(parent.eq(i).position().left)}, 600);
        } else {
            i = 0;
        }
    });

Dutts 19 март 2014, в 15:18

0

Нет. Ублюдки все еще скользят вместе с той, на которую я нажимаю. :)
Goran Tesic 19 март 2014, в 17:07

Ещё вопросы

Нет. Ублюдки все еще скользят вместе с той, на которую я нажимаю. :)

Goran Tesic · Accepted Answer · 2014-03-19T23-46-00.000Z

Я решил полностью вырвать javascript-код из моего оригинального сообщения и в итоге использовал это:

    $(function() {
    $('article .wrapper').each(function(){
        var slider = $(this).find('.slider'),
            parent = $(this),
            step =855,
            left = parseInt(slider.css('left'), 10),
            max = parent.width() - slider.width(),
            min = 0;

        parent.find(".previous").click(function() {
            if (left < 0) {
                var newLeft = left + step;
                left = (newLeft<min) ? newLeft : min;
                slider.animate({
                    "left": left + 'px'
                }, "slow");
            }
        });

        parent.find(".next").click(function() {
            if (left > max) {
                var newLeft = left - step;
                left = (newLeft>max) ? newLeft : max;
                slider.animate({
                    "left": left + 'px'
                }, "slow");
            }
        });
    });
});

Я также слегка модифицировал ширину нескольких элементов в css, и теперь все это работает как шарм.