Скрипт для слайдера на JQuery?

Question

[phookasymi]

Всем привет!
Имеется вот такой слайдер -

Я только начала осваивать JS. По уроку сверстала с иконками Вперед/Назад. Все работает.

А как реализовать именно как в макете? Чтобы при клике на миниатюру, был переход на нужный отзыв?

Сейчас код у меня такой в js. Сам слайдер - ul, слайды - li. По дефолту у них opacity: 0, а при клике Вперед/Назад добавляется класс active к нужному слайду с opacity: 1, а с других убирается.

$(function () {
  $('.slider').each(function () {
    var $slide = $('.slide', this);
    var $prev = $('.prev', this);
    var $next = $('.next', this);


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

    $prev.click(function () {
      var index = $slide.filter('.active').index();
      if(index == -1) {
        index = $slide.lenght
      }
      $slide.eq(index-1).addClass('active').siblings().removeClass('active');
    });

    $next.click(function () {
      var index = $slide.filter('.active').index();
      if(index == $slide.lenght-1) {
        index = -1
      }
      $slide.eq(index+1).addClass('active').siblings().removeClass('active');
    });
  });
});

Может, есть у кого-нибудь ресурсы с похожей реализацией? Или принцип как это происходит?
Связывать по id как-то слайд с миниатюрой и по клику делать переход?
Плохо без знаний js, понимаю, но я только учусь.
Буду благодарна за любую помощь.

Answer 1

[Undo Redo]

На Хабре об этом хорошо рассказано, без воды

var slideNow = 1;
var slideCount = $('#slidewrapper').children().length;
var slideInterval = 3000;
var navBtnId = 0;
var translateWidth = 0;

$(document).ready(function() {
    var switchInterval = setInterval(nextSlide, slideInterval);

    $('#viewport').hover(function() {
        clearInterval(switchInterval);
    }, function() {
        switchInterval = setInterval(nextSlide, slideInterval);
    });

    $('#next-btn').click(function() {
        nextSlide();
    });

    $('#prev-btn').click(function() {
        prevSlide();
    });

    $('.slide-nav-btn').click(function() {
        navBtnId = $(this).index();

        if (navBtnId + 1 != slideNow) {
            translateWidth = -$('#viewport').width() * (navBtnId);
            $('#slidewrapper').css({
                'transform': 'translate(' + translateWidth + 'px, 0)',
                '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
                '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
            });
            slideNow = navBtnId + 1;
        }
    });
});


function nextSlide() {
    if (slideNow == slideCount || slideNow <= 0 || slideNow > slideCount) {
        $('#slidewrapper').css('transform', 'translate(0, 0)');
        slideNow = 1;
    } else {
        translateWidth = -$('#viewport').width() * (slideNow);
        $('#slidewrapper').css({
            'transform': 'translate(' + translateWidth + 'px, 0)',
            '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
            '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
        });
        slideNow++;
    }
}

function prevSlide() {
    if (slideNow == 1 || slideNow <= 0 || slideNow > slideCount) {
        translateWidth = -$('#viewport').width() * (slideCount - 1);
        $('#slidewrapper').css({
            'transform': 'translate(' + translateWidth + 'px, 0)',
            '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
            '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
        });
        slideNow = slideCount;
    } else {
        translateWidth = -$('#viewport').width() * (slideNow - 2);
        $('#slidewrapper').css({
            'transform': 'translate(' + translateWidth + 'px, 0)',
            '-webkit-transform': 'translate(' + translateWidth + 'px, 0)',
            '-ms-transform': 'translate(' + translateWidth + 'px, 0)',
        });
        slideNow--;
    }
}

Comments

[phookasymi]

Спасибо большое!)
Буду пытаться)

[Undo Redo]

phookasymi, не за что) Был очень рад помочь Вам)

[phookasymi]

Undo Redo, со слайдером разобралась, все работает прекрасно, спасибо еще раз)

[Undo Redo]

phookasymi, не за что, рад был помочь)
Обращайтесь)