Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2018, 23:27
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 38

Хочу усовершенствовать слайдер
Здравствуйте уважаемые, в 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();
});
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2018, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,620

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>

Последний раз редактировалось рони, 04.03.2018 в 00:24.
Ответить с цитированием
  #3 (permalink)  
Старый 04.03.2018, 00:09
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 38

Спасибо, вы всегда помогаете
Увы, но данный код не работает, возможно я делаю что-то не правильно, ссылку на сайт засветил Вам в л/с.
Ответить с цитированием
  #4 (permalink)  
Старый 04.03.2018, 00:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,620

Chmil,
обновите страницу и скопируйте код снова
Ответить с цитированием
  #5 (permalink)  
Старый 04.03.2018, 00:40
Аспирант
Отправить личное сообщение для Chmil Посмотреть профиль Найти все сообщения от Chmil
 
Регистрация: 07.07.2017
Сообщений: 38

Все заработало, огромнейшее спасибо за помощь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вкладки и слайдер slicks ildar94 Элементы интерфейса 6 16.01.2018 14:29
Как поместить слайдер в модальное окно? ИщуПомощь Элементы интерфейса 2 24.08.2017 20:27
Слайдер с каруселью миниатюр - Uikit Lutidza Общие вопросы Javascript 0 10.03.2016 10:00
Нужно сделать слайдер контента OgecuT Элементы интерфейса 2 23.07.2014 13:31
Нужно отредактировать слайдер glavkot Работа 0 22.08.2011 13:14