Comments 36
В примере клик отрабатывает то как один, то как два из-за автопрокрутки. Сбрасывайте таймер )
+2
Я несколько раз перепроверял, но работает все прекрасно, как и должно работать, сбрасывать таймер вручную необходимо, если в слайдер не встроена функция сброса таймера при наведении, оно и логично, т.к. если пользователь делает клик по кнопке, то его курсор уже наведен на viewport, а значит таймер сброшен.
0
Он прав. То один один слайд сменится, то два.
Сижу с хрома.
Сижу с хрома.
+1
Ну, нормально получилось. Но… мне одному всегда глаз режет, когда слайдеры резко переходят в начало/конец? Можно ли, на транслейтах запилить бесконечный слайдер так, чтоб он не выглядел костылём? Это уже интереснее было бы)
0
Можно, конечно, скорее всего в ближайшие пару недель выложу подобную статью, да и вообще, запилю еще что-нибудь подобное на jQuery, все-таки анимации на страницах — вещь хорошая=)
-2
Кстати, jQuery немного убивает саму фишку «лёгкий слайдер руками, чтоб не тащить плагины». Если уж мы грузим jQuery, то почему бы не подгрузить какой-нибудь slick? Если пилить лёгкий слайдер, то на чистом JS )
+1
Анимации на страницах — вещь хорошая, анимация через jQuery — нет.
+1
+19
UFO just landed and posted this here
Простая карусель делается вполне тривиально. Более интересные пляски начинаются, когда нужно закольцевать слайды (а это часто нужно).
+1
Как писал выше, в скором времени будет выложена еще одна статья, где прокрутка идет бесконечно в одну сторону, логика вроде как уже продумана, осталось лишь реализовать и проверить.
0
Этот велосипед изобретен уже давно. Сдвигаем контейнер со слайдами в лево (в право) и переносим первый элемент в конец (последний в начало) после чего обнуляем сдвиг контейнера. Об этом то и заметку тяжело написать по объему, не то что статью.
+1
коротко и понятно, спасибо!
-1
Нет, там не все так просто. В частности, такая лобовая схема не будет работать, если в карусели всего 2 элемента. Там приходится дублировать крайние элементы, я встречал даже реализацию с несколькими задублированными элементами. Ну и плюс там есть нюансы с анимациями.
0
Только недавно такой сделал. Да, приходится дублировать первый и последний, но это работает и работает довольно просто.
Пример
0
А зачем следующая конструкция?
width: calc(100%/4);
Разве она не эквивалентна более читабельной
width: 25%
width: calc(100%/4);
Разве она не эквивалентна более читабельной
width: 25%
+2
Вместо
можно использовать короткую запись:
:)
$(document).ready(function () {
можно использовать короткую запись:
$(function () {
:)
+1
А слабо без jQuery?
+5
Можно поздравить — вы ознакомились с принципом работы слайдера.
Не останавливайтесь — в мире еще много интересных вещей.
Не останавливайтесь — в мире еще много интересных вещей.
+3
UFO just landed and posted this here
А чем же slick slider не угодил?
-1
Господи, мне вернули мой 2009й!
+1
Да уж, про производительность почему-то автор не подумал. Все повторяющиеся выборы элементов надо было сделать через переменые, тогда бы элементы выбирались из DOM только один раз. А кнопки, сделанные тегом div… Есть тег для этого
0
Нет, вы серьезно? Для этого jQuery? На обычном js код 10 строчек займет.
+1
А на гитхаб будете выкладывать?
0
Sign up to leave a comment.
Собственный слайдер изображений на jQuery