Хочу усовершенствовать слайдер
Здравствуйте уважаемые, в javascript не силен, поэтому обращаюсь к Вам за помощью. Суть задачи – есть простенький слайдер на javascript (код ниже), работает идеально, все хорошо, но есть одно но, а именно – мне нужно разместить на одной странице шесть таких слайдеров. Проблема в том, что когда я копирую блоки слайдера еще раз (код ниже), то при нажатии на одну из кнопок «вперед» или «назад» на одном из слайдеров, элементы перемещаются на всех слайдерах одновременно. Прошу помочь мне допилить код скрипта. Спасибо
<div class="slider"> <div class="slide-list"> <div class="slide-wrap"> <div class="slide-item"> Элемент слайдера </div> <div class="slide-item"> Элемент слайдера </div> <div class="slide-item"> Элемент слайдера </div> <div class="slide-item"> Элемент слайдера </div> </div> <div class="clear"></div> </div> <div class="namecat">ИМЯ КАТЕГОРИИ</div> <div class="prjamu"></div> <div class="navyp prev-slide"></div> <div class="navy next-slide"></div> <!--<div class="auto play"></div>--> </div> Сам код скрипта:
jQuery(document).ready(function(){
function htmSlider(){
/* Зададим следующие переменные */
/* обертка слайдера */
var slideWrap = jQuery('.slide-wrap');
/* ссылки на предудыщий иследующий слайд */
var nextLink = jQuery('.next-slide');
var prevLink = jQuery('.prev-slide');
var playLink = jQuery('.auto');
var is_animate = false;
/* ширина слайда с отступами */
var slideWidth = jQuery('.slide-item').outerWidth();
/* смещение слайдера */
var newLeftPos = slideWrap.position().left - slideWidth;
/* Клик по ссылке на следующий слайд */
nextLink.click(function(){
if(!slideWrap.is(':animated')) {
slideWrap.animate({left: newLeftPos}, 500, function(){
slideWrap
.find('.slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
});
}
});
/* Клик по ссылке на предыдующий слайд */
prevLink.click(function(){
if(!slideWrap.is(':animated')) {
slideWrap
.css({'left': newLeftPos})
.find('.slide-item:last')
.prependTo(slideWrap)
.parent()
.animate({left: 0}, 500);
}
});
/* Функция автоматической прокрутки слайдера */
function autoplay(){
if(!is_animate){
is_animate = true;
slideWrap.animate({left: newLeftPos}, 500, function(){
slideWrap
.find('.slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
is_animate = false;
});
}
}
/* Клики по ссылкам старт/пауза */
playLink.click(function(){
if(playLink.hasClass('play')){
playLink.removeClass('play').addClass('pause');
jQuery('.navy').addClass('disable');
timer = setInterval(autoplay, 1000);
} else {
playLink.removeClass('pause').addClass('play');
jQuery('.navy').removeClass('disable');
clearInterval(timer);
}
});
}
/* иницилизируем функцию слайдера */
htmSlider();
});
|
Chmil,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
jQuery(function() {
jQuery(".slider").each(function(indx, el) {
var slideWrap = jQuery(".slide-wrap", el);
var nextLink = jQuery(".next-slide", el);
var prevLink = jQuery(".prev-slide", el);
var slideWidth = jQuery(".slide-item", el).outerWidth();
var newLeftPos = slideWrap.position().left - slideWidth;
nextLink.click(function() {
if (!slideWrap.is(":animated")) {
slideWrap.animate({
left: newLeftPos
}, 500, function() {
slideWrap.find(".slide-item:first").appendTo(slideWrap).parent().css({
"left": 0
});
});
}
});
prevLink.click(function() {
if (!slideWrap.is(":animated")) {
slideWrap.css({
"left": newLeftPos
}).find(".slide-item:last").prependTo(slideWrap).parent().animate({
left: 0
}, 500);
}
});
});
});
</script>
</head>
<body>
<div class="slider">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item">
Элемент слайдера 1
</div>
<div class="slide-item">
Элемент слайдера 2
</div>
<div class="slide-item">
Элемент слайдера 3
</div>
<div class="slide-item">
Элемент слайдера 4
</div>
</div>
<div class="clear"></div>
</div>
<div class="namecat">ИМЯ КАТЕГОРИИ</div>
<div class="prjamu"></div>
<div class="navyp prev-slide">prev</div>
<div class="navy next-slide">next</div>
</div>
<div class="slider">
<div class="slide-list">
<div class="slide-wrap">
<div class="slide-item">
Элемент слайдера 1
</div>
<div class="slide-item">
Элемент слайдера 2
</div>
<div class="slide-item">
Элемент слайдера 3
</div>
<div class="slide-item">
Элемент слайдера 4
</div>
</div>
<div class="clear"></div>
</div>
<div class="namecat">ИМЯ КАТЕГОРИИ</div>
<div class="prjamu"></div>
<div class="navyp prev-slide">prev</div>
<div class="navy next-slide">next</div>
</div>
</body>
</html>
|
Спасибо, вы всегда помогаете
Увы, но данный код не работает, возможно я делаю что-то не правильно, ссылку на сайт засветил Вам в л/с.
|
Chmil,
обновите страницу и скопируйте код снова |
Все заработало, огромнейшее спасибо за помощь
|
| Часовой пояс GMT +3, время: 17:04. |