Как исправить неправильный счетчик в слайдере?

Question

[Денис]

В общем такая ситуация. Написал сам слайдер, принцип работы которого основан на анимационном сдвиге свойства left либо с отрицательным значением, либо с 0, если счетчик > чем число слайдов. Двигается блок - обертка, в котором находятся слайды. Все в принципе удовлетворительно, но если ты щелкаешь, например, по 3 -му табу(thumbnails) именно! во время анимации с 4-го слайда на 1, то после первого слайда, прокрутка идет сразу к 4-му

<section id="slider" class="slider">
					<h1>Слайдер</h1>

					<section class="slider-area">
						<div class="slider-menu">
							<article class="slider-menu-item">
								<div class="slider-menu-item-content">
									<img src="../images/content/slider/slide-thumb1.png" alt="">
									<span>VIBE X и VIBE Z</span>
								</div>
							</article>

							<article class="slider-menu-item">
								<div class="slider-menu-item-content">
									<img src="../images/content/slider/slide-thumb2.png" alt="">
									<span>YOGA TABLET</span>
								</div>
							</article>

							<article class="slider-menu-item">
								<div class="slider-menu-item-content">
									<img src="../images/content/slider/slide-thumb3.png" alt="">
									<span>НОВЫЙ  IdeaPad Miix2</span>
								</div>
							</article>

							<article class="slider-menu-item">
								<div class="slider-menu-item-content">
									<img src="../images/content/slider/slide-thumb4.png" alt="">
									<span>A-SERIES</span>
								</div>
							</article>
						</div>
						
						<div class="slider-track">
							<article class="slide">
								<img src="../images/content/slider/slide1.jpg" alt="">
							</article>
						
							<article class="slide">
								<img src="../images/content/slider/slide2.jpg" alt="">
							</article>
						
							<article class="slide">
								<img src="../images/content/slider/slide3.jpg" alt="">
							</article>
						
							<article class="slide">
								<img src="../images/content/slider/slide4.jpg" alt="">
							</article>
						</div>
					</section>
				</section>

$(function() {
	slider($('#slider'), 5000, 800);
});

function slider(container, slideDur, offsetDur) {

	var slideSelector = '.slide',
		$track = container.find('.slider-track'),
		$slides = container.find(slideSelector),
		$thumbPanel = container.find('.slider-menu'),
		$thumbs = $thumbPanel.find('.slider-menu-item'),
		step = container.width(),
		offset,
		position = 0,
		timer,
		totalSlides = $slides.length,
		slideFlag = false;


	$track.width(totalSlides * step);

	for(var i = 0; i < $thumbs.length; i++) {
		$thumbs.eq(i).attr('data-target', i);
	}

	$thumbs.eq(0).addClass('active');

	$thumbs.on('click', function() {
		target = $(this).data('target');
		clearTimeout(timer);
		changeSlides(target);
	});


	function waitForNext() {
		timer = setTimeout(function() {
			changeSlides('next');
		}, slideDur);
	};


	timer = setTimeout(function() {
		changeSlides('next');
	}, slideDur);


	function changeSlides(target) {
		if(target == 'next') {
			position = position + 1;
			// offset = -(step * position);

			if(position > (totalSlides -1)) {
				position = 0;
				offset = 0;
			}
		}

		else {
			position = target;
			// offset = -(step * position);
		}

		offset = -(step * position);

		animateSlides($track, offset);
	};


	function animateSlides(track, offset) {
		if(slideFlag) {
			return false;
		}

		slideFlag = true;

		$thumbs
		.removeClass('active')
		.eq(position).addClass('active');

		track.animate(
			{
				'left': offset
			},
			{
				duration: offsetDur,
				easing: 'linear',
				complete: function() {
					slideFlag = false;
					waitForNext();
				}
			} 
		);
	};
};

Comments

[littleguga]

Загрузите код на jsbin/jsfiddle

Answer 1

[Сергей Сергей]

$thumbs.on('click', function() {
    target = $(this).data('target');
    clearTimeout(timer);
    changeSlides(target);
  });

здесь таргет меняется же. при клике. Получается, что changeSlides уже поставила свой таргет, а по клику он меняется уже после. А функция анимации не реагирует, так как там флаг стоит.

кстати, в setTimeout можно не засылать анонимные функции,
setTimeout( func, delay, arg1, arg2, arg3 );