Comments
В примере клик отрабатывает то как один, то как два из-за автопрокрутки. Сбрасывайте таймер )
Я несколько раз перепроверял, но работает все прекрасно, как и должно работать, сбрасывать таймер вручную необходимо, если в слайдер не встроена функция сброса таймера при наведении, оно и логично, т.к. если пользователь делает клик по кнопке, то его курсор уже наведен на viewport, а значит таймер сброшен.
Зашел с хрома, у меня никаких багов нет, в таком случае могу лишь посоветовать и вправду сбрасывать таймер при нажатии на одну из кнопок, как писал sidristij
Ну так скорее всего более правильно. Таймер автопрокрутки должен выключаться при выборе конкретного слайда пользователем. И по желанию запускаться через нужное время бездействия пользователя. Иначе часто совпадает нажатие пользователя и в следующее мгновение автопрокрутка.
Ну, нормально получилось. Но… мне одному всегда глаз режет, когда слайдеры резко переходят в начало/конец? Можно ли, на транслейтах запилить бесконечный слайдер так, чтоб он не выглядел костылём? Это уже интереснее было бы)
Можно, конечно, скорее всего в ближайшие пару недель выложу подобную статью, да и вообще, запилю еще что-нибудь подобное на jQuery, все-таки анимации на страницах — вещь хорошая=)
Кстати, jQuery немного убивает саму фишку «лёгкий слайдер руками, чтоб не тащить плагины». Если уж мы грузим jQuery, то почему бы не подгрузить какой-нибудь slick? Если пилить лёгкий слайдер, то на чистом JS )
Анимации на страницах — вещь хорошая, анимация через jQuery — нет.
UFO landed and left these words here
может быть потому что функционал фоторамы избыточен? 38Кб Js и 14Kb Css ради простенького слайдера как-то сверх меры.
Пишешь свой вариант, а потом оказывается что избыточность это не самое страшное в ситуации. Грабли то на каждом шагу и на все уже наступил.
UFO landed and left these words here
Простая карусель делается вполне тривиально. Более интересные пляски начинаются, когда нужно закольцевать слайды (а это часто нужно).
Как писал выше, в скором времени будет выложена еще одна статья, где прокрутка идет бесконечно в одну сторону, логика вроде как уже продумана, осталось лишь реализовать и проверить.
Этот велосипед изобретен уже давно. Сдвигаем контейнер со слайдами в лево (в право) и переносим первый элемент в конец (последний в начало) после чего обнуляем сдвиг контейнера. Об этом то и заметку тяжело написать по объему, не то что статью.
Нет, там не все так просто. В частности, такая лобовая схема не будет работать, если в карусели всего 2 элемента. Там приходится дублировать крайние элементы, я встречал даже реализацию с несколькими задублированными элементами. Ну и плюс там есть нюансы с анимациями.

Только недавно такой сделал. Да, приходится дублировать первый и последний, но это работает и работает довольно просто.
Пример

А зачем следующая конструкция?
width: calc(100%/4);
Разве она не эквивалентна более читабельной
width: 25%
Эквивалентна, но если, допустим, слайдов 7, то легче будет заменить 4 на 7, чем высчитывать ширину в процентах и подставлять
Мне казалось, ширина будет высчитываться динамически, поэтому ее не нужно вписывать каждый раз в CSS
Вместо
$(document).ready(function () {

можно использовать короткую запись:
$(function () {

:)
Можно поздравить — вы ознакомились с принципом работы слайдера.
Не останавливайтесь — в мире еще много интересных вещей.
Эммм. Ну ладно, откопали стюардессу (jQuery). Вынесли (ого!) «настройки» в переменные. А про привязку к произвольно взятому селектору почему-то не подумали? А если слайдеров надо чуть больше чем один?

И да, поддержу комментатора выше, как-то странно в XXI веке использовать jQuery для того, что в браузерах есть встроенное — document.querySelector() для сложных случаев или вообще тысячелетней давности document.getElementById() и .style у элементов DOM дерева. MDN вам в помощь.

А за что минусы? Статья и в самом деле про то, что автор научился двигать слайды без jQuery-плагина.
Он конечно молодец, что разобрался в основах, но это не повод писать здесь.

Slick очень неплох, но при сложной вёрстке может вести себя непредсказуемо :(

Да уж, про производительность почему-то автор не подумал. Все повторяющиеся выборы элементов надо было сделать через переменые, тогда бы элементы выбирались из DOM только один раз. А кнопки, сделанные тегом div… Есть тег для этого

Only those users with full accounts are able to leave comments. Log in, please.