Рубрика «slider»

Создаем генератор адаптивной галереи изображений со встроенным слайдером - 1

Доброго времени суток, друзья!

Вместо введения (постановка задачи)

Все началось с изучения чужих слайдеров (готовых решений в сети, типа bxslider, owlcarousel и slick). Когда-нибудь я напишу подробные руководства по работе с этими инструментами (sweet dreams). Появилось желание написать свой слайдер. Однако вскоре (в том числе, после прочтения нескольких статей на Хабре) пришло осознание, что просто слайдер — это для слабаков. Нужно что-то более радикальное.

В итоге придумал себе такую задачу: написать генератор адаптивной галереи со встроенным слайдером.

Условия:

  • Возможность загружать любое количество изображений (из любого места на жестком диске).
  • Галерея состоит из загруженных изображений, разметка формируется «на лету» с соблюдением семантики HTML5.
  • Галерея одинаково хорошо смотрится на экранах с различным разрешением.
  • При клике на любом изображении генерируется слайдер.
  • При генерации слайдера затемняется фон.
  • Изображение, по которому кликнули — первый слайд.
  • Переключение слайдов реализовано через DOM.
  • Слайды переключаются плавно.
  • Возможность управлять переключением слайдов с помощью кнопок и клавиатуры.
  • Возможность вернуться к галерее при клике на текущем слайде и кнопке, а также с помощью клавиатуры.
  • Возможность получить готовый код.
  • Чистый JavaScript (вся разметка через JS).
  • Минимум кода.

Итак, поехали (как сказал Гагарин, отправляясь в космос).
Читать полностью »

Есть много разных библиотек для реализации слайдера со всеми возможными эффектами. Для React одни из лучших это: ReactSlick и Swiper. Но когда для моего проекта потребовался горизонтальный sticky-эффект, то ничего подходящего не нашлось.

Делаем крутой sticky-эффект для слайдера на React - 1

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

Читать полностью »

Автор уже опубликовал скрипт карусели, который также использует только CSS и Javascript. Теперь давайте рассмотрим скрипт слайдера. Он отличается от карусели тем, что одновременно виден только один элемент, а не несколько, и элементы не прокручиваются, а медленно замещаются одно другим. И ещё. В данном слайдере в качестве элементов используются только изображения (слайды), поэтому и называется он простой слайдер изображений.

Навигация осуществляется стрелками “Следующий элемент” или “Предыдущий элемент” и индикаторными точками. Стрелки и точки можно отключить в настройках скрипта. Элементы могут быть показаны с остановкой на первом и последнем элементе или в цикле, когда за последним элементом вновь следует первый. Можно включить автоматический просмотр (пролистывание) элементов, длительность просмотра (интервал между переключениями) регулируется. При наведении мыши на элемент пролистывание прекращается.
Читать полностью »

Очень часто на сайтах интернет-магазинов, и не только, можно фильтры со слайдером выбора диапазона значений. В одном из проектов мне тоже понадобилось сделать такой слайдер.

Первое, что приходит в голову — найти уже готовый и вставить себе на сайт. Тут то я и столкнулся с проблемой. Найденный мною плагин JqueryUI.slider отказался работать на некоторых мобильных устройствах. Проблему я выявить не смог (да не особо и хотел ковыряться в чужом коде) и решил сделать свой "велосипед".

Читать полностью »

BlackBerry Priv (exVenice) поступит в продажу в ноябре - 1
Пока большинство людей стоят в очередях за новым iPhone6 и разбирают его, для любителей смартфонов с qwerty-клавиатурой, похоже, настают хорошие времена.
Если Вы по каким-то причинам не можете отказаться от экосистемы Google, но ищите смартфон с физической клавиатурой — добро пожаловать под кат.
Читать полностью »

Идея сделать видео слайдер, да и к тому же моторизованный, мне пришла в голову в августе 2014-го. К тому времени я уже чуть больше года занимался ночной съёмкой звёздных пейзажей и решил попробовать себя в timelapse-деле.

В timelapse всегда ценится «живость картинки»! Смена кадров, сделанных на статично установленный фотоаппарат в большинстве случаев не так эффектно влияет на зрителя, как тот же сюжет, но уже снятый на движущуюся в пространстве камеру. Композиция видео наполняется безграничной динамикой, оставляя хорошие впечатления о ролике!

Моторизованный timelapse видео слайдер - 1

Как обстоит дело с продажами такого оборудования? Да без проблем! Вот только космические цены пугают… В процессе поиска вариантов, будь это фирменный или китайский, делаешь вывод, что понятия «бюджетный моторизованный слайдер» не существует в природе! Бюджетный вариант — это только если сконструировать подобное самому! Я так и сделал!
Читать полностью »

Примечание

Хоть я сам не люблю такие твиттер-новости, но не смог не поделиться с этой новостью с сообществом, т.к. это довольно радостная (я надеюсь) новость для тех, кто любит слайдеры.
Ну и по традиции — если нашли ошибку/не точность, пожалуйста напишите в личку.

BlackBerry похвасталась новым BlackBerry 10 - 1
Зовите всех фанатов BlackBerry Torch! BlackBerry похвасталась новым слайдером BlackBerry 10 на выставке Mobile World Congress. Хотя у устройства пока еще нет официального названия и характеристики устройства еще не точны, мы знаем, что у устройства будет двойной изогнутый дисплей и, конечно, великолепная клавиатура.
Читать полностью »

image

Всем привет. Хочу поделиться опытом в изготовлении простого и бюджетного TimeLapse слайдера длинной 2 метра для камеры (в моем случае в качестве камеры выступает телефон).
Читать полностью »

Часто по работе приходится встраивать в страницу слайдеры прокрутки изображений, блоков и т.д. Наигравшись с «чужими» разработками, которые часто обладают лишним и ненужным мне функционалом было решено сделать свой велосипед и оформить его в виде плагина для jQuery, который бы банально выполнял свои функцию горизонтального слайдера, и был бы мне понятен От и До.

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js