Как сделать карусель миниатюр на jquery?

Question

[FlapJalc]

Делаю галерею с миниатюрами: jsfiddle.net/azefmqjo/3

По умолчанию выводятся 6 миниатюр, остальные будут показываться при скролле влево. Как мне теперь сделать карусель миниатюр? Подключать сторонние плагины не хочу.

Answer 1

[0xD34F]

const $thumbs = $('.thumbs');

$('.show-image').click(function(e) {
  e.preventDefault();
  $('.images img.active').removeClass('active');
  $('.images img').eq(this.dataset.index).addClass('active');
}).attr('data-index', i => i);

$('.next').click(() => $thumbs.append($thumbs.find('.show-image').first()));
$('.prev').click(() => $thumbs.prepend($thumbs.find('.show-image').last()));

Comments

[FlapJalc]

Спасибо за помощь! Но в Вашем примере, карусель перелистывает по одному элементу. Мне же нужно чтобы при клике вправо показались следующие 6 миниатюр. Т.е от 7 - до 12

[0xD34F]

FlapJalc,

$thumbs.append($thumbs.find('.show-image').slice(0, 6));

$thumbs.prepend($thumbs.find('.show-image').slice(-6));