Слайдер с использованием плагина jQuery Chop Slider
В данном уроке мы сделаем слайдер с помощью плагина jQuery Chop. Данный плагин предоставляет возможность использовать 200 различных эффектов для оформления переходов между слайдами. Эффекты формируются и в 2D и в 3D пространстве. Также имеются несколько эффектов без использования CSS3 (для старых браузеров) и пять эффектов для браузеров мобильных устройств.Также можно создавать свои собственные трансформации (если есть желание).
Разметка HTML
Каждый слайд помещается в контейнер с классом ‘slide’. Обратите внимание на то, что нужно создать такое же количество элементов для навигации по слайдам, для описаний и заголовков.
<div class="wrapper"> <div class="s-shadow-b"></div> <a id="slide-next" href="#"></a> <a id="slide-prev" href="#"></a> <div id="slider"> <div class="slide cs-activeSlide"> <img src="/slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div> <div class="slide"> <img src="/slide_images/pic2.jpg" width="900" height="300" alt="photo #2" /> </div> <div class="slide"> <img src="/slide_images/pic3.jpg" width="900" height="300" alt="photo #3" /> </div> <div class="slide"> <img src="/slide_images/pic4.jpg" width="900" height="300" alt="photo #4" /> </div> <div class="slide"> <img src="/slide_images/pic5.jpg" width="900" height="300" alt="photo #5" /> </div> <div class="slide"> <img src="/slide_images/pic6.jpg" width="900" height="300" alt="photo #6" /> </div> <div class="slide"> <img src="/slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div> </div> <div class="pagination"> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> <span class="slider-pagination"></span> </div> <div class="slide-descriptions"> <div class="sl-descr">Таиланд, много разных банкоматов ATM в одном месте</div> <div class="sl-descr">Все цвета города яркие, темных нет</div> <div class="sl-descr">Рынок на воде. Шоппинг на плаву</div> <div class="sl-descr">Закат на острове Ко Панган</div> <div class="sl-descr">Перед закатом</div> <div class="sl-descr">Скульптуры бога на острове Ко Самуи</div> <div class="sl-descr">Изящная барменша</div> </div> <div class="caption"></div> </div>
CSS
.wrapper { position:relative; margin-left:auto; margin-right:auto; width:960px; height:300px; display:block; padding-top:150px; padding-bottom:120px; background:url(../images/podium.png) no-repeat bottom; z-index:2; } .wrapper2 { position:relative; margin-left:auto; margin-right:auto; margin-top:20px; width:960px; height:300px; display:block; z-index:2; text-align:center; padding-bottom:50px; } .wrapper2 a { display:inline-block; padding:0px 5px; background:#fff; border:1px solid #ccc; border-radius:3px; text-decoration:none; margin:0px 5px; } .wrapper2 .active-transition { background:#222; color:#fff; } /*---------- Слайдер ----------- */ /*---------- Левый и правый триггер ----------- */ #slide-prev { position:absolute; width:21px; height:33px; bottom:39px; left:26px; z-index:4; background:url(../images/sl-control.png) left top no-repeat; } #slide-next { position:absolute; width:21px; height:33px; bottom:39px; right:26px; z-index:4; background:url(../images/sl-control.png) left bottom no-repeat; } /*---------- Тень ----------- */ .s-shadow-b{ background:url(../images/shadow.png) no-repeat top; width:876px; height:55px; position:absolute; left:42px; bottom:60px; z-index:1; } /*---------- Основной контейнер слайдера ----------- */ #slider { width:900px; height:300px; margin-left:auto; margin-right:auto; position:relative; z-index:2; display:block; } /* Каждый слайд скрыт по умолчанию */ .slide { display:none; } /* Видимым является только слайд с классом "cs-activeSlide"! !Зарезервированное имя. Необходимый класс! */ .cs-activeSlide { display:block; } /* Контейнер с текстом описания. Должен быть скрыт. */ .slide-descriptions { display:none; } /* Контейнер с заголовком. Должен быть скрыт по умолчанию. */ .caption { background: url("../images/d-bg.png") repeat scroll 0 0 transparent; color: #FFFFFF; display: none; height: 280px; padding: 20px; position: absolute; right: 40px; top: 140px; width: 180px; z-index: 3; } .full-3D { right: 40px; top: 580px; width: 840px; height:20px; } /* Контейнер для кнопок навигации */ .pagination { bottom: 50px; left: 345px; margin-top: 50px; position: absolute; text-align: center; } .slider-pagination { display:inline-block; width:15px; height:10px; background:url(../images/navi.png) no-repeat left bottom; margin:0 10px; cursor:pointer; position:relative; z-index:200; } /* Необходимый класс для активной кнопки. ! Зарезервированное имя ! */ .cs-active-pagination { background:url(../images/navi.png) no-repeat left top; } /* Слайдеры */ .slider-2 { padding-top:0; margin-top:20px; } #slider-1, #slider-2 { width:900px; height:300px; margin-left:auto; margin-right:auto; position:relative; z-index:2; display:block; } .cs-activeSlide-2 { display:block } .cs-active-pagination-2 { background:url(../images/navi.png) no-repeat left top; }
JavaScript
Плагин нужно инициализировать:
jQuery(function(){ $("#slider").chopSlider({ /* Элемент слайда */ slide : ".slide", /* Управление */ nextTrigger : "a#slide-next", prevTrigger : "a#slide-prev", hideTriggers : true, sliderPagination : ".slider-pagination", /* Заголовки */ useCaptions : true, everyCaptionIn : ".sl-descr", showCaptionIn : ".caption", captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)", /* Автопроигрывание */ autoplay : true, autoplayDelay : 5000, /* Для барузеров, которые поддерживают трансформации 3D */ t3D : csTransitions['3DFlips']['random'], /* Все будет выбираться случайным образом */ t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ], noCSS3 : csTransitions['noCSS3']['random'], mobile : csTransitions['mobile']['random'], onStart: function(){}, onEnd: function(){} }) })
Здесь устанавливается случайный выбор эффекта перехода, включается автопроигрывание и вывод заголовков.
На сайте плагина можно найти полное описание плагина и примерами кода (к сожалению, на английском языке).
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Xz9JQyIasXw/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.