Как сделать каждый блок слайдера независимым друг от друга?

Question

[clavik1312]

Доброго времени суток, Есть слайдер который показывает фото "до" и "после"
https://atuin.ru/blog/slajder-do-i-posle/ (не реклама)

HTML:

<div class="sl-container">
    <div class="view view-after">
        <img src="winter.jpg"/>      
    </div>
    <div class="view view-before">
        <img src="summer.jpg"/>
    </div>
    <div class="dragme"><div class="dr-circle"><i class="fa fa-arrows-h" aria-hidden="true"></i></div></div>
</div>

CSS:

.sl-container {
    border: 10px solid #BFE2FF;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 640px;
    height: 420px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.sl-container .view {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.sl-container .view img {
    width: 640px;
    max-width: 640px;
}
.sl-container .view-before {
    z-index: 100;
}
.sl-container .view-after {
    width: 100px;
    z-index: 200;
}
.sl-container .dragme {
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0px;
    left: 100px;
    background-color: #BFE2FF;
    cursor: pointer;
    z-index: 300;
}
.sl-container .dr-circle {
    position: absolute;
    top: calc(50% - 20px);
    left: -15px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #BFE2FF;
    cursor: pointer;
    z-index: 300;
}
.sl-container .dr-circle i {
    line-height: 40px;
    font-size: 20px;
    color: #337AB7;
    font-weight: bold;
}
@media screen and (max-width: 600px) {
    .sl-container {
        width: 320px;
        height: 210px;
    }
    .sl-container .view img {
        width: 320px;
        max-width: 320px;
    }
}

JS:

(function($) {
    var $dragMe = $(".dragme"),
    $container = $(".sl-container"),
    $viewAfter = $(".view-after");
    $dragMe.draggable({
        containment: "parent",
        drag: function() {
            $viewAfter.css({
                width : parseFloat($(this).css('left')) + 5
            });
        }
    });
    $container.on("click", function(event) {
        var eventLeft = event.pageX - $container.offset().left - 15;
        animateTo(eventLeft);
    });
    animateTo("50%");
    function animateTo(_left) {
        $dragMe.animate({
            left: _left
        }, 'slow', 'linear');
        $viewAfter.animate({
            width: _left
        }, 'slow', 'linear');
    }
})(jQuery);

+ подключена библиотека jQuery

Суть в том что если создать 2 таких слайдера на 1 странице то при изменении одного слайдера
будет автоматически двигаться и второй слайдер.
Нужно сделать так что бы при смене одного слайдера, другие слайдеры никак на это не реагировали

Answer 1

[Exploding]

Наверно надо так:

$( ".slider_container" ).each(function() {
   var slider = $(this);
   //и дальше уже со slider делайте что нужно, плагины или что там...
   //не проверял, он должно все работать
});

Comments

[clavik1312]

HTML:

<div class="sl-container">
    <div class="view view-after">
        <img src="winter.jpg"/>      
    </div>
    <div class="view view-before">
        <img src="summer.jpg"/>
    </div>
    <div class="dragme"><div class="dr-circle"><i class="fa fa-arrows-h" aria-hidden="true"></i></div></div>
</div>

CSS:

.sl-container {
    border: 10px solid #BFE2FF;
    margin: 20px auto;
    overflow: hidden;
    position: relative;
    width: 640px;
    height: 420px;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
.sl-container .view {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.sl-container .view img {
    width: 640px;
    max-width: 640px;
}
.sl-container .view-before {
    z-index: 100;
}
.sl-container .view-after {
    width: 100px;
    z-index: 200;
}
.sl-container .dragme {
    position: absolute;
    width: 10px;
    height: 100%;
    top: 0px;
    left: 100px;
    background-color: #BFE2FF;
    cursor: pointer;
    z-index: 300;
}
.sl-container .dr-circle {
    position: absolute;
    top: calc(50% - 20px);
    left: -15px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #BFE2FF;
    cursor: pointer;
    z-index: 300;
}
.sl-container .dr-circle i {
    line-height: 40px;
    font-size: 20px;
    color: #337AB7;
    font-weight: bold;
}
@media screen and (max-width: 600px) {
    .sl-container {
        width: 320px;
        height: 210px;
    }
    .sl-container .view img {
        width: 320px;
        max-width: 320px;
    }
}

JS:

(function($) {
    var $dragMe = $(".dragme"),
    $container = $(".sl-container"),
    $viewAfter = $(".view-after");
    $dragMe.draggable({
        containment: "parent",
        drag: function() {
            $viewAfter.css({
                width : parseFloat($(this).css('left')) + 5
            });
        }
    });
    $container.on("click", function(event) {
        var eventLeft = event.pageX - $container.offset().left - 15;
        animateTo(eventLeft);
    });
    animateTo("50%");
    function animateTo(_left) {
        $dragMe.animate({
            left: _left
        }, 'slow', 'linear');
        $viewAfter.animate({
            width: _left
        }, 'slow', 'linear');
    }
})(jQuery);

+ подключена библиотека jQuery

в js делаю вот так, но мне кажется что то не то я делаю

$( ".sl-container" ).each(function() {
   var slider = $(this);
(function($) {
    var $dragMe = $(".dragme"),
    $container = $(".sl-container"),
    $viewAfter = $(".view-after");
    $dragMe.draggable({
        containment: "parent",
        drag: function() {
            $viewAfter.css({
                width : parseFloat($(this).css('left')) + 5
            });
        }
    });
    $container.on("click", function(event) {
        var eventLeft = event.pageX - $container.offset().left - 15;
        animateTo(eventLeft);
    });
    animateTo("50%");
    function animateTo(_left) {
        $dragMe.animate({
            left: _left
        }, 'slow', 'linear');
        $viewAfter.animate({
            width: _left
        }, 'slow', 'linear');
    }
})(jQuery);
});

[Exploding]

clavik1312,

(function($){
	$( ".sl-container" ).each(function() {
		var $container = $(this),
			$dragMe = $container.find(".dragme"),
			$viewAfter = $container.find(".view-after");
			$dragMe.draggable({
				containment: "parent",
				drag: function() {
					$viewAfter.css({
						width : parseFloat($(this).css('left')) + 5
					});
				}
			});
		$container.on("click", function(event) {
			var eventLeft = event.pageX - $container.offset().left - 15;
			animateTo(eventLeft);
		});
		animateTo("50%");
		function animateTo(_left) {
			$dragMe.animate({
				left: _left
			}, 'slow', 'linear');
			$viewAfter.animate({
				width: _left
			}, 'slow', 'linear');
		}
	});
})(jQuery);

[clavik1312]

Exploding, ты лучший просто, спасибо

Answer 2

[Lord_Dantes]

Используйте разные наименования классов для активации слайдеров.

Comments

[clavik1312]

а если у меня таких слайдеров около 30 ? есть решение по проще ?

[Lord_Dantes]

clavik1312, сделать цикл по инициализации слайдера. Например, как обычный счетчик на js который показывает цифры от 1 до 9, вставьте эту цифру в класс слайдерам. Сделайте в дом столько слайдеров и запустите цикл.

[Rustam Bainazarov]

clavik1312, я лично всегда инициализирую слайдеры по data-атрибуту.

А-ля data-slider-init="products".

И нет привязки к классам вообще. Правда, я ничего не знаю, что там за слайдер у вас.

Answer 3

[Типа Программист]

Не знаю как они работают, но можно попробовать сделать два слайдера в разных блоках.. Или сделать в jquery слайдер только в этом блоке..