Jquery фоновый слайдер. Интересный слайдер на jQuery

Офис

Слайдер Temdo — это мощный и простой в управлении инструмент для создания красивых слайдеров для вашего сайта. Основные возможности слайдера:

  • Фоном каждого слайда можно выбрать любое изображение или видео
  • Дополнительное наложенное изображение
  • Анимация при скроллинге
  • Анимация при смене слайдов

Если вам необходимо создать красивый «классический» слайдер (фон, не более двух дополнительных графических слоев, заголовок, подзаголовок, текст и не более двух кнопок на каждом слайде), рекомендуется использовать Temdo Slider, особенно если вам нужны полноэкранные слайдеры и фоновое видео.

Создание слайдера

Чтобы создать новый слайдер, в левом меню Консоли WordPress выберите пункт Слайдер > Добавить новый слайд:

Тип слайда

Базовый параметр слайда — это тип фона (изображение или видео). В зависимости от выбора этого параметра меняется интерфейс настроек слайда: при выборе видео вместо группы настроек Статический фон появляется группа Анимированный фон .

Фон слайда

Выберите фоновое изображение для слайда. Имейте в виду, что фоновое изображение будет растянуто на полную ширину экрана (с сохранением пропорций). Поэтому рекомендуется использовать изображения разрешения Full HD (1920 x 1080 пикселей). Если вы хотите, чтобы слайдер не занимал весь экран по высоте, нужно установить высоту в настройках слайдера.

Наложенное изображение

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

Анимация фона

Включите эту опцию, если вы хотите анимировать фоновое изображение. После включения становятся доступны следующие виды анимации:

  • Увеличение относительно центра (по умолчанию)
  • Увеличение относительно верхнего левого угла
  • Увеличение относительно верхнего правого угла
  • Увеличение относительно нижнего левого угла
  • Увеличение относительно нижнего правого угла

Фоновое видео

Слайдер Temdo поддерживает форматы видео webm, mp4 и ogg.

Для использование видео в качестве фона необходимо его сначала загрузить в библиотеку медиафайлов вашего сайта. Для этого в левой панели Консоли WordPress выберите пункт Медиафайлы > Добавить новый . После окончания загрузки видео скопируйте его адрес в буфер обмена и вернитесь к редактированию слайда. Вставьте путь к видеофайлу из буфера обмена в соответствующий раздел настроек слайда. Рекомендуется по возможности использовать видео во всех трех форматах для поддержки максимального количества современных браузеров.

Свойства слайда

В этом разделе задаются основные параметры слайда:

  • Дизайн заголовка: можно выбрать светлый дизайн для использования совместно с темным фоном, или темный дизайн для контрастного отображения заголовка на светлом фоне.
  • Цвет навигации: выберите цвет для стрелок вправо-влево и навигационных точек в нижней части слайдера
  • Скроллинг до раздела: показать стрелку, при нажатии на которую будет происходить прокрутка страницы до указанного места. Введите название якоря, например ‘#contact’
  • Не показывать заголовок: включите эту опцию, если вы не хотите, чтобы на этом слайде отображался заголовок
  • Не показывать тень от заголовка: отключить отображение тени от заголовка этого слайда
  • Анимация графики: выберите один из двух анимационных эффектов для графического элемента слайда
  • Анимация контента: выберите один из двух способов анимации заголовка, подзаголовка, текста и кнопок

Настройка стиля контента слайда

Настройки стиля текстового контента слайда (заголовок, подзаголовок и текст) задаются в соответствующих группах настроек:

  • Заголовок слайда
  • Подзаголовок слайда
  • Текст слайда

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

Графика и SVG графика

Здесь можно загрузить дополнительный графический элемент (), а также векторную графику в формате SVG. Для каждого из этих элементов можно задать ссылку, которая будет открываться по клику на элемент.

Кнопки на слайде

В этом разделе можно задать параметры для одной или двух кнопок:

  • Текст на кнопке
  • Ссылка
  • Анимация при наведении
  • Иконка

Анимация слайда при скроллинге

В этом разделе можно включать и выключать анимацию при скроллинге всего контента слайда или отдельных элементов слайда. При желании (и умении) можно произвести тонкую настройку анимации с помощью стилей CSS.

Сохранение слайда

Перед сохранением слайда добавьте его в один или несколько слайдеров, включив соответствующие флажки в разделе «Слайдеры». Если у вас еще нет ни одного слайдера, нажмите ссылку + Добавить новый слайдер :

Подскажите пожалуйста, возможно ли сделать слайдер фонового изображения при помощи slick slider ?
Гугл не помогает(В документации сказано что картинки нужно поместить в div блок. Но как быть с фоновыми изображениями?

@charset utf-8; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a, abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small, strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label, legend,table,caption,tbody,tfoot,thead,tr,th,td{background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: baseline;margin: 0;padding: 0;}table{border-collapse: collapse;border-spacing: 0;} address,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,nav, section,summary{display: block;} * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; } a, a:hover, button, button:hover, .anime { -moz-transition:all 200ms linear; -ms-transition:all 200ms linear; -o-transition:all 200ms linear; -webkit-transition:all 200ms linear; transition:all 200ms linear; cursor: pointer; } .F_COL_C-START_I-CENTER { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: center; } .F_ROW_C-START_I-CENTER { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: center; } .F_ROW_C-S-B_I-F-S { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; } .F_ROW_C-START_I-STRETCH { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: stretch; } body { background-color: #fff; color: #413d4b; font-family:"Roboto", sans-serif; font-size: 0.87vmax; line-height: 1.37vmax; } .wrap { width: 58.75vw; margin: 0 auto; position: relative; } header { width: 100%; height: 100vh; background-image: linear-gradient(45deg, rgba(9, 5, 47, .85) 0%, rgba(49, 29, 94, .85)), url(../img/bg_header.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; } #top_header { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; margin-top: 3.2vh; } #logo svg{ height: 3vw; } #top_header nav ul { display: flex; flex-flow: row nowrap; } nav li{ list-style: none; text-transform: uppercase; color: #fff; font-family: "Roboto Black", sans-serif; margin-left: 1.25vw; } nav a{ text-decoration: none; font-weight: bold; color: #fff; } a:hover { color: #00e0d0; } #header_content { margin-top: 24.4vh; } #header_content h2{ font-family: "Playfair Display", serif; color: #fff; font-size: 2vw; text-align: center; } hr { border: none; width: 3.12vw; height: 1px; background-color: #00e0d0; color: #00e0d0; margin-top: 3.8vh; } #header_content p { width: 48.6vw; color: #fff; line-height: 3.5vh; text-align: center; margin-top: 4.17vh; } .btn { padding: 0.8vw 1.5vw; font-family: "Hammersmith One", sans-serif; font-size: 1vw; color: #00e0d0; text-transform: uppercase; border: 1px solid #00e0d0; background-color: transparent; border-radius: 2px; margin-top: 7.3vh; } .btn:hover { color: #fff; border: 1px solid #fff; } #dot_nav{ width: 3.43vw; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; margin-top: 18.9vh; } .circle_nav { width: 0.62vw; height: 0.62vw; border: 2px solid #bab9bc; background-color: transparent; border-radius: 0.62vw; } .circle_nav:hover { border: 2px solid #00e0d0; background-color: #00e0d0; } Landing Page

We Are Awesome Creative Agency

This is Photoshop"s version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.

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

HTML разметка

Тут все очень просто, нужно просто добавить UL-список в самое начало сразу после тега body .

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

CSS стили

Тут наверное самая основная часть работы, так как от CSS, зависит то как будет работать наш слайдер. Открываем файл стиле вашего сайта и добавляем в него следующий код.

Body_slides{ list-style:none; margin:0; padding:0; z-index:-2; background:#000;} .body_slides, .body_slides:after{ position: fixed; width:100%; height:100%; top:0px; left:0px;} .body_slides:after { content: ""; background: transparent url(images/pattern.png) repeat top left;} .body_slides li{ width:100%; height:100%; position:absolute; top:0; left:0; background-size:cover; background-repeat:none; opacity:0; -webkit-animation: anim_slides 18s linear infinite 0s; -moz-animation: anim_slides 18s linear infinite 0s; -o-animation: anim_slides 18s linear infinite 0s; -ms-animation: anim_slides 18s linear infinite 0s; animation: anim_slides 18s linear infinite 0s; } .body_slides li:nth-child(1){ background-image: url(images/1.jpg) } .body_slides li:nth-child(2){ -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2.jpg) } .body_slides li:nth-child(3){ -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) } @-webkit-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} }

Если Вы разбираетесь в CSS, то для Вас не составит труда понять, что за что отвечает. Расскажу по минимуму, потому как обучать CSS, нет смысла.

Наш список со слайдами имеет класс body_slides . Ему заданы стили, для внешнего вида и общих настроек.

Далее у нас идет псевдоэлемент - :after , который задает дополнительный слой и поверх фона наложен узор в виде точек. Делается это с помощью изображение, к которому указан путь images/pattern.png . Если у Вас другой путь, то укажите его правильно.

.body_slides li:nth-child(1) - это первый по порядку слайд и ему задан фоновый рисунок. Далее идет nth-child(2), ему кроме рисунка задано еще время и равно 6 сек. То есть, он появится через 6 секунд после первого слайда. Далее nth-child(3), он появится еще через шесть секунд, поэтому у него время 12 сек. Если нужно добавить 4 слайд, то добавляем nth-child(4) и у него должно быть время уже 18 секунд. Думаю тут понятно.

Далее нужно указать полное время анимации, оно сейчас задано в body_slides li и равно 18 сек. Если добавите 4 слайд то будет равно 24 и так далее. Если с математикой дружите, должны справится, главное не ошибиться ибо слайдер ровно не заработает. По желанию можно ускорить или замедлить, прописав нужное время.

keyframes anim_slides - это появление и исчезновении слайда. Изначально слайд прозрачный и ему задано условие - opacity:0; . Когда приходит очередь любого из слайдов, он сначала появляется, а потом начинает вновь становится прозрачным и полностью исчезает, а на его месте появляется новый. Если хотите изменить скорость появления или исчезновения, меняйте проценты - это процент от общего времени.

Остальные настройки уже по желанию и нужде - общий фон, сейчас черный, путь к картинкам, позиционирование, уровень слоя и тд. Преимущество данного слайдера в том, что он простенький и не использует скриптов и целых библиотек, если бы он был сделан с помощью - jQuery . Очень надеюсь, что если Вы хотели себе смену фоновых картинок то данный CSS слайдер, Вам поможет.

На этом все, спасибо за внимание. 🙂

При использовании CSS3 и jQuery отдельно, они предоставляют широкий спектр возможностей. Но если использовать вместе… Тогда они могут сделать эффекты действительно впечатляющими. Иногда появляется такая проблема, как лучше и креативнее расположить несколько изображений или фотографий с общей темой в одном месте. Как вариант можно создать слайдер(тем более их огромное множество). Но в этом уроке мы создадим интерактивную 3D галерею с помощью CSS3 и jQuery. Чтобы быстрее разобраться и применить слайдер на своём сайте — я рекомендую скачать демо версию (она также доступна в полной новости) и просто сделать по аналогии в примере.

Реальный пример можно увидеть здесь:

Скачать

HTML часть — Интересный слайдер на jQuery

Контейнер с классом main будет использоваться чтобы отобразить задний фон. А дальше внутри блока с идентификатором immersive_slider можно добавлять столько слайдов, сколько вам необходимо. Кнопки перемещения по слайдам можно убрать, если они вам не нужны:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <div class = "main" > ... <div id = "immersive_slider" > << >"> ... </ div > <div class = "slide" data-blurred= "< >"> ... </ div > ... <a href = "#" class = "is-prev" > « </ a > <a href = "#" class = "is-next" > » </ a > </ div > </ div >

jQuery часть

1 2 3 4 5 6 7 8 $("#immersive_slider" ) .immersive_slider ({ animation: "fade" , slideSelector: ".slide" , container: ".main" , cssBlur: false , pagination: true , autoStart: 5000 } ) ;

Как вы могли заметить, при просмотре примера слайдера, существуют различные . Все настройки данных переходов находятся в функции выше. Рассмотрим данные настройки:

  • animation — значение, которое определяет как будут меняться слайды. Принимает значения «fade», «slide», или «bounce». А для того чтобы сделать вертикальную смену слайдов, необходимо прописать «slideUp» или «bounceUp».
  • slideSelector — селектор, по которому выбираем блоки со слайдами.
  • container — данное свойство определяет основной контейнер, у которого будет меняться фон.
  • cssBlur — это пробная функция. Если не хотите задавать размытие, тогда не ставьте данное свойство.
  • pagination — активирует навигацию.
  • autoStart — автоматический старт слайд-шоу.
© Copyright 2024, ripquality.ru - Компьютерные советы и хитрости.