Pull to refresh

Comments 36

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

А селекторы — это и не была заслуга jquery. Это был Sizzle…
Slick очень неплох, но при сложной вёрстке может вести себя непредсказуемо :(
Это можно сказать о любом решении, включая сабж.

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

Нет, вы серьезно? Для этого jQuery? На обычном js код 10 строчек займет.
Sign up to leave a comment.

Articles