Слайдер с использованием плагина 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


Поделиться статьей:
Акция: Закажи любой сайт до окончания акции и получи скидку + подбор семантического ядра + поисковую оптимизацию сайта Это позволит Вам получать еще больше трафика и соответственно клиентов из Интернета!
До конца акции осталось
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
|
Узнайте подробности акции у менеджеров компании по телефонам: 8-924-200-7194 г.Хабаровск 8-800-550-9899 Бесплатно по России (с 3 до 11 по Мск) |
Новые статьи и публикации
- 2018-04-25 » Превью электронного письма: как повысить открываемость без изменения темы?
- 2018-04-19 » Алгоритмы Google: всё, что о них нужно знать
- 2018-04-17 » Выпуск №102: Формирование семантического ядра для рекламной кампании. Редизайн и SEO. Все о доменных именах. Промоакции в Google AdWords. Сайты для гос.учреждений.
- 2018-04-11 » Формирование семантического ядра для рекламной кампании
- 2018-04-03 » Редизайн при сохранении позиций: рекомендации по SEO
- 2018-03-27 » Картинки на сайте: как правильно работать с атрибутами Alt и Title
- 2018-03-22 » Выпуск №101: Правильный контент для интернет-магазина. Партизанский маркетинг и Продвижение в Youtube.
- 2018-03-21 » Доменные имена: всё, что о них нужно знать
- 2018-03-16 » Как ранжироваться в топе YouTube: практические советы
- 2018-03-14 » Расширение «Промоакция»: новое предложение Google AdWords
- 2018-03-12 » Конструкторы для сайтов: простые и эффективные решения
- 2018-03-04 » Сайты для муниципальных образований и бюджетных учреждений
- 2018-03-02 » Продвижение сайта: цена вопроса
- 2018-02-22 » Переход сайта на протокол https
- 2018-02-22 » SSL сертификаты - Защита передаваемых данных и доверие пользователей
- 2018-02-19 » Партизанский маркетинг: особенности и преимущества
- 2018-02-14 » Правильный контент для интернет-магазина − увеличение продаж в два раза
- 2018-02-14 » Выпуск №100: Особенности турбо-страниц и немного про то, как превратить текст в видео.
- 2018-02-08 » В Директе появятся видеодополнения по умолчанию
- 2018-02-06 » Особенности турбо-страниц
- 2018-01-31 » Научитесь составлять цепляющие заголовки по методике 4U за 5 минут!
- 2018-01-26 » Рекламные методы продвижения бизнеса
- 2018-01-17 » Выпуск №99: Способы продвижения бизнеса в интернете и мифы о создании сайтов
- 2018-01-17 » Способы продвижения бизнеса в интернете
- 2018-01-11 » Продвижение бизнеса в интернете
- 2017-12-30 » Выпуск №98: SEO-продвижение: итоги-2017, прогнозы-2018
- 2017-12-27 » Как развить бизнес в интернете?
- 2017-12-27 » Четыре рекламных объявления в спецразмещении
- 2017-12-20 » Развитие бизнеса в сети интернет
- 2017-12-18 » Принципы размещения контекстной рекламы в РСЯ и КМС
Предоставляем полный комплекс услуг по созданию, обслуживанию и продвижению сайтов по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.