Слайдер с использованием плагина 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-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Не делай другим то, что ты хотел бы, чтобы они делали для тебя. У вас могут быть разные вкусы Шоу Джордж Бернард - (1856-1950) - английский писатель. В своем творчестве ниспровергал догматизм и предвзятость, традиционность представлений |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.