Как сделать сдвиг в слайдере?

Question

[Наталия]

Добрый день.
Помогите, пожалуйста, сориентироваться в следующем вопросе.

Есть такой слайдер: https://jsfiddle.net/nlynx/vvh4ogf7/7
при клике на зеленый квадрат слайдер должен сдвинуться на четыре блока влево.

новая версия с предложенными изменениями: https://jsfiddle.net/nlynx/vvh4ogf7/13/
но требуется доработака, а именно: эффект прокрутки, а не замены.

Может, у кого-нибудь будет мысль в какую сторону надо двигаться?

Comments

[kulaeff]

Там ошибки в консоли.

[kulaeff]

А еще вместо getElementsByClass надо getElementsByClassName и не забывать, что этот метод возвращает массив элементов.

[kulaeff]

А еще у вас отсутствует элемент с классом .sbis_ru-EdoSlider__content, однако в коде вы пытаетесь его получить и присвоить ему margin-left.

[Наталия]

kulaeff: спасибо за ответы, поправила. но пока не знаю в какую сторону двигаться.

Answer 1

[Vlad]

$('.marker').on('click', function() {
   var l = $('.content-list');
   var right_margin = parseInt($('.content-list-item').css('margin-right'));
   var offset = $('.content-list-item').width() * 4 + right_margin * 4 + right_margin;
   
   var current_offset = parseInt(l.css('margin-left'));
   
   if ($(this).hasClass('enabled')) {
	  l.css('margin-left', (current_offset + offset) + 'px');
   } else {
          l.css('margin-left', current_offset - offset + 'px');
   }
});

Ну или https://jsfiddle.net/vvh4ogf7/8/

Comments

[Наталия]

спасибо, но они не пролистываются, а происходит замена одних блоков на другие, а нужен эффект пролистывания.