Слайдер, карусель на Java Script для сайта

5 (100%) 14 vote[s]

Слайдер или карусель — почти обязательный элемент сайта. Есть масса вариантов их реализации, начиная от плагинов и виджетов, и заканчивая самодельными блоками, реализованными на чистом CSS или JS. Преимущества последнего — карусель или слайдер не занимает много места, не замедляют загрузку сайта, не конфликтуют с CSS стилями темы (как, например, с кастомными слайдерами и каруселями, написанными на бутстрап и вставленными на сайт, использующим старую тему без использования бутстрап).

Cамый простой слайдер на Java Script

Смотреть исходный код:

Вот вариант, такой же слайдер, но с нижней полосой прокрутки:

Смотреть исходный код:

Карусель на Java Script

Простенькая карусель, которая реализована путём изменения прозрачности картинок.

Задаем первый слайд, устанавливаем ему класс slide showing и прозрачность 1 (непрозрачный). Все остальные — задаем другой класс slide, устанавливаем opacity: 0;

В функции задаем интервал (2000), получаем доступ к атрибутам тега slides .slide и меняем класс на slide showing, и картинка становится видимой. z-index: 2; перекрывает первый слайд, у которого z-index устанавливаем 1. Чтобы картинки класса .slide накладывались одна на другую, задаем им position: absolute;

  • Слайдер - 1
  • Слайдер - 2
  • Слайдер - 3
  • Слайдер - 4
  • Слайдер - 5

Смотреть исходный код:

Горизонтальный параллакс слайдер-карусель с боковыми миниатюрами с использованием Swiper.js

Слайдер - 1

Shaun Matthews

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Слайдер - 2

Alexis Berry

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Слайдер - 3

Billie Pierce

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Слайдер - 4

Trevor Copeland

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Слайдер - 5

Bernadette Newman

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Смотрите исходник на CodePen. В слайдере используется SCSS. Онлайн-конвертер CSSS→СSS здесь или здесь. Импортируемые файлы: https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js

Swiper — это …бесплатный и самый современный мобильный сенсорный слайдер с аппаратным ускорением переходов и удивительным нативным поведением. Он предназначен для использования на мобильных веб-сайтах, мобильных веб-приложениях и мобильных /нативных/гибридных приложениях. Разработанный в основном для iOS, но также отлично работает на последних версиях Android, Windows Phone 8 и современных настольных браузерах. 

Swiper не совместим со всеми платформами, это современный сенсорный слайдер, который ориентирован только на современные приложения / платформы для обеспечения лучшего опыта и простоты .Swiper, наряду с другими замечательными компонентами, является частью Framework7 — полнофункционального фреймворка для создания приложений для iOS и Android. Swiper также является компонентом слайдера по умолчанию в Ionic Framework

Смотреть исходный код:

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 3018

Популярные записи