Собственный слайдер изображений на jQuery

[sidristij]

В примере клик отрабатывает то как один, то как два из-за автопрокрутки. Сбрасывайте таймер )

[Whiled0S]

Я несколько раз перепроверял, но работает все прекрасно, как и должно работать, сбрасывать таймер вручную необходимо, если в слайдер не встроена функция сброса таймера при наведении, оно и логично, т.к. если пользователь делает клик по кнопке, то его курсор уже наведен на viewport, а значит таймер сброшен.

[olenkill]

Он прав. То один один слайд сменится, то два.
Сижу с хрома.

[Whiled0S]

Зашел с хрома, у меня никаких багов нет, в таком случае могу лишь посоветовать и вправду сбрасывать таймер при нажатии на одну из кнопок, как писал sidristij

[HolyMaster]

Ну так скорее всего более правильно. Таймер автопрокрутки должен выключаться при выборе конкретного слайда пользователем. И по желанию запускаться через нужное время бездействия пользователя. Иначе часто совпадает нажатие пользователя и в следующее мгновение автопрокрутка.

[Krasnodar_etc]

Ну, нормально получилось. Но… мне одному всегда глаз режет, когда слайдеры резко переходят в начало/конец? Можно ли, на транслейтах запилить бесконечный слайдер так, чтоб он не выглядел костылём? Это уже интереснее было бы)

[Whiled0S]

Можно, конечно, скорее всего в ближайшие пару недель выложу подобную статью, да и вообще, запилю еще что-нибудь подобное на jQuery, все-таки анимации на страницах — вещь хорошая=)

[Krasnodar_etc]

Кстати, jQuery немного убивает саму фишку «лёгкий слайдер руками, чтоб не тащить плагины». Если уж мы грузим jQuery, то почему бы не подгрузить какой-нибудь slick? Если пилить лёгкий слайдер, то на чистом JS )

[Odrin]

Анимации на страницах — вещь хорошая, анимация через jQuery — нет.

[limonte]

[demimurych]

может быть потому что функционал фоторамы избыточен? 38Кб Js и 14Kb Css ради простенького слайдера как-то сверх меры.

[Denai]

Пишешь свой вариант, а потом оказывается что избыточность это не самое страшное в ситуации. Грабли то на каждом шагу и на все уже наступил.

[dom1n1k]

Простая карусель делается вполне тривиально. Более интересные пляски начинаются, когда нужно закольцевать слайды (а это часто нужно).

[Whiled0S]

Как писал выше, в скором времени будет выложена еще одна статья, где прокрутка идет бесконечно в одну сторону, логика вроде как уже продумана, осталось лишь реализовать и проверить.

[yan_azov]

Этот велосипед изобретен уже давно. Сдвигаем контейнер со слайдами в лево (в право) и переносим первый элемент в конец (последний в начало) после чего обнуляем сдвиг контейнера. Об этом то и заметку тяжело написать по объему, не то что статью.

[Di9]

коротко и понятно, спасибо!

[dom1n1k]

Нет, там не все так просто. В частности, такая лобовая схема не будет работать, если в карусели всего 2 элемента. Там приходится дублировать крайние элементы, я встречал даже реализацию с несколькими задублированными элементами. Ну и плюс там есть нюансы с анимациями.

[kot_mapku3]

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

[Akdmeh]

А зачем следующая конструкция?
width: calc(100%/4);
Разве она не эквивалентна более читабельной
width: 25%

[Whiled0S]

Эквивалентна, но если, допустим, слайдов 7, то легче будет заменить 4 на 7, чем высчитывать ширину в процентах и подставлять

[Akdmeh]

Мне казалось, ширина будет высчитываться динамически, поэтому ее не нужно вписывать каждый раз в CSS

[http3]

Вместо

$(document).ready(function () {

можно использовать короткую запись:

$(function () {

:)

[Psychosynthesis]

А слабо без jQuery?

[victorburre]

Можно поздравить — вы ознакомились с принципом работы слайдера.
Не останавливайтесь — в мире еще много интересных вещей.

[sgrogov]

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

[zShift]

А селекторы — это и не была заслуга jquery. Это был Sizzle…

[Eugeny1987]

А чем же slick slider не угодил?

[sgrogov]

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

[barbaricus]

Это можно сказать о любом решении, включая сабж.

[Quilin]

Господи, мне вернули мой 2009й!

[MisterPurple]

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

[aliencash]

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

[barbaricus]

А на гитхаб будете выкладывать?