Октябрь 29, 2019 Запись была обновлена
Креативный слайдер для сайта jQuery — необычные слайдеры для сайта
Много ли Вы видели разнообразных слайдеров? Я думаю достаточно, но этот слайдер для сайта выглядит очень креативно и необычно. Конечно, не так много мест, где его можно разместить, но то, что он сделает Ваш сайт более уникальным — это однозначно! На что похож эффекта этого слайдера? Возможно, у Вас в детстве была такая подзорная труба, где можно было крутить колесико и внутри появлялись различные фигуры, как мозаика.
Вот что я нашел на сайте еще на тему слайдеров:
- Слайдеры на чистом CSS + бонусный слайдер
- Вертикальный слайдер с помощью jQuery и CSS переходами
- Интересный слайдер на jQuery
- Раздвижной слайдер только на CSS3
Надеюсь Вы найдете что-то подходящее для себя из этой подборки. Если не нашли — тогда смотрите на слайдер для сайта, который мы рассмотрим в этой статье.
Посмотрите на слайдер для сайта jQuery по ссылке ниже:
Посмотреть примерСкачать
Вот как выглядят некоторые слайды из демо:
Как установить слайдер для сайта?
HTML часть
В качестве примера установки я выбрал Демо 1.
Подключаем между тегами <head> </head> следующие стили (normalize.css и component.css):
1 2 | <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/component.css" /> |
Данные файлы стилей необходимо подключать для каждого вида слайдера.
Сейчас давайте взглянем на HTML структуру слайдера для сайта:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <div class="content"> <div class="cache"> <img src="img/masks/prism-a.svg"> <img src="img/masks/prism-b.svg"> <img src="img/masks/prism-c.svg"> <img src="img/bird-a.jpg"> <img src="img/bird-b.jpg"> <img src="img/bird-c.jpg"> <img src="img/bird-d.jpg"> </div> <div class="wrapper"> <div class="prism-slider"> <ul class="navigation"></ul> </div> <div class="copy"> <!-- Текстовое описание --> </div> </div> </div> |
Что и в какой строчке находится:
- Строка: с 3 по 5 — указываем какую маску использовать. Всего их три — столько же, сколько видов слайдера. Маска отвечает за то «безобразие», которое получается в центре слайдера.
- Строки: с 7 по 10 — изображения для слайдера jQuery. Они «подхватываются» автоматически плагином, и затем добавляется соответствующее количество элементов управления.
- Строка: 15 — здесь размещается динамически сгенерированная навигация по элементам слайдера.
- Строка: 18 — в эту область Вы можете вписать своё описание для слайдера jQuery (также, как это сделано в демо).
Вы можете заменить изображения в папке img на свои собственные или же разместить свои изображения с произвольными названиями. После чего не забудьте их изменить в структуре HTML.
jQuery часть
Чтобы наш слайдер для сайта заработал перед закрывающим тегом </body> мы разместим несколько скриптов (rAF.js, easing.js, PrismSlider.js и slideshow1.js):
1 2 3 4 | <script src="js/utils/rAF.js"></script> <script src="js/utils/easing.js"></script> <script src="js/PrismSlider.js"></script> <script src="js/slideshow1.js"></script> |
Последний скрипт необходимо выбирать в зависимости от того, какой из слайдеров Вам понравился. Если 1-й слайдер для сайта — тогда slideshow1.js, если 2-й слайдер — slideshow2.js, если 3-й слайдер — то выбираем slideshow3.js.
Вывод
Согласен, слайдер очень необычный и его эффект также нестандартный. Но если Вы найдете применение данному слайдеру у себя на сайте — Ваш сайт обретет свою изюминку.
Успехов!
Источник: Оригинал
С Уважением, Юрий Немец
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
😈 😈 😈 мне не нравится… слишком АВАНГАРДНО…. 😮
А можно ли подключить автопрокрутку этого чуда?
спасибо
Александр, можно, подключайте!
А не подскажете, как сделать автопрокрутку, а то все переискал…
Добрый день, Александр!
Вам нужна автопрокрутка при клике?
Забыл сказать, — СПАСИБО!
Нет, автопрокрутка сразу по загрузке страницы
Один из вариантов — это jQuery:
Где #footer — это блок с идентификатором footer (<div id="footer">Lorem ipsum</div>).
Простите великодушно, надо менять код в существующем скрипте, или добавить?
Юрий, читаю Ваши статьи и всё отлично понятно, очень читабельно даже для чайников. Спасибо за Ваши труды. С удовольствием лопачу весь Ваш сайт. Надеюсь что будете продолжать выкладывать что то новое. Спасибо Вам
Спасибо, Валерий!
Надеюсь вы найдете еще много полезной информации на сайте. В свободное время стараюсь писать новые статьи. Буду рад видеть вас в рядах постоянных читателей! 🙂
Скажите Юрий, все данные материалы можно реализовать на CMS Joomla?
Валерий, все материалы можно реализовать на любой CMS, так как это лишь дизайн, который можно привязать к любому функционалу.
Спасибо большое, буду следить за вашими обновлениями.
Можно использовать этот слайдер на всю ширину шапки сайта 1208*668?
Добрый день, Андрей!
Конечно, данный слайдер можно сделать адаптивным под любое разрешение экрана. Если вы зайдете на страницу с демо-примером и начнете изменять окно браузера, то увидите, что галерея также изменяет свой размер.
Вам лишь останется правильно разместить кнопки управления слайдером.