Что такое код jquery слайдер


Содержание

Слайдер для сайта jQuery + CSS с автоматическим перелистыванием

Простой слайдер изображений или текста на jQuery + CSS с автоматическим интервалом переключения слайдов

Слайдер для сайта jQuery + CSS с автоматическим перелистыванием

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

timeList — скорость переключения слайда

TimeView — время показа

RadioBut — кнопки под слайдом, для быстрой навигации (radio buttons). По умолчанию true может принимать значение false.

А теперь давайте приступим! Создадим и откроем файл index.htm и пропишем туда нужную нам разметку:

В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение слайдера и выравнивает его по середине экрана. Параметр slider позиционирует, и задает высоту нашего слайда свойством height. Если будете использовать слайдер картинок, то укажите высоту картинок в данном свойстве, если высота картинок разная, то укажите максимальную.

Для наилучшей визуализации слайдера и привлекательности используйте одинаковое разрешение картинок.

Теперь нам необходимо стилизовать наш слайдер. Стрелки вперед/назад для переключения слайдов, а также радио кнопки под слайдером, использованы в виде картинок и прилагаются вместе с файлом. Создадим и откроем файл style.css и пропишем туда нужную нам разметку:

Если стрелочки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми, а появляться они будут, лишь при наведении на них. В параметрах prewBut и nextBut, задайте свойству opacity значение 0.

Создадим и откроем наш js-файл, в котором и будет код слайдера. Не забудьте подключить фреймворк jQuery, а также библиотеку jquery.ui — указанная библиотека нам необходима для того, чтобы задать элемент исчезновения и появление слайда. Заменить указанный эффект можно свойством fadeIn и fadeOut.

Функция animSlide принимает три вида значений: next, prew, и числовое значение. Параметр next переключает следующий слайд, prew предыдущий, а числовое значение это конкретно выбранный слайд через радио кнопки под слайдом. Функции slideDirectionHide и slideDirectionShow почти схожи и идентичны, первая отвечает за исчезновение слайда и направление движения уходящего слайда, вторая за появление слайда, его направление движения при появлении, а также за заданный интервал времени показа.

При наведении курсора мыши на слайдер показ приостанавливаеться.

На этом все, если что-то не понятно или возникли вопросы, пишите и спрашивайте.

jQuery-слайдеры. Создание слайдера на jQuery

Слайдер – это то, что может сделать привлекательным любой сайт. Он позволяет уместить в одном месте большое количество контента, демонстрируя его блоками, появляющимися по очереди. Естественно, каждый владелец сайта захочет сделать себе подобный слайдер. К счастью, в интернете существует большое количество готовых решений. Но далеко не каждый человек будет рад, если получит такой слайдер, который хоть и является привлекательным и функциональным, но при этом не является уникальным. Соответственно, многие люди желают получить персонализированный слайдер, который полностью соответствовал бы его нуждам, выглядел привлекательно и был максимально функциональным. К счастью, вы можете создавать далеко не самые сложные слайдеры на jQuery. Именно об этом и пойдет речь в данной статье. Слайдеры на jQuery – это очень популярное решение, которое может вам приглянуться, если вы хотите сделать свой сайт более привлекательным и содержательным.

Что такое jQuery?

Прежде чем начать создавать слайдеры на jQuery, необходимо разобраться с тем, что это такое. Итак, если вы занимаетесь разработкой сайта, то для этого вы используете HTML, CSS и JS. HTML – это скелет вашего сайта, его основа, которую затем можно совершенствовать постепенно. CSS – это стили, которые вы применяете к конкретным элементам скелета вашего сайта, делая их яркими, красочными, привлекательными, параллельно создавая общую картину. Ну а JS – это язык программирования, который позволяет вам вдохнуть в ваш сайт жизнь, сделав его не статичной картинкой, а динамичным местом, где каждый клик может что-то означать.

Что касается jQuery, то это самая известная и крупная библиотека скриптов для JS. Дело в том, что в JS вы пишете конкретный код, который применяется к тому или иному элементу на сайте. Однако этот язык программирования используется для создания сайтов уже настолько давно, что огромное количество различных команд повторяются, так как очень многие функции у сайтов являются схожими. Соответственно, была создана библиотека этих команд, которая позволяет вам использовать готовые фрагменты кода, а не придумывать их с нуля, что значительно упрощает и ускоряет работу над сайтом.

Таким образом, слайдеры на jQuery – это слайдеры на JS, которые используют библиотеку готовых решений, обеспечивающую их функциональность. Именно поэтому они являются довольно простыми и доступными для каждого. Вам нужно лишь базовое знание JS, чтобы создать свой собственный слайдер. И именно об этом пойдет речь в данной статье.

Готовые решения

Стоит обратить внимание на то, что простой слайдер на jQuery вы можете свободно скачать в интернете. Многие программисты добавляют в сеть свои решения, которые также можно кастомизировать, приспосабливая для собственных нужд. Все, что вам нужно сделать – это скачать необходимый вам слайдер, загрузить нужные документы в папку с сайтом, добавить нужный код и при желании изменить его, чтобы придать новый внешний вид вашему слайдеру. После этого вам останется только загрузить контент для каждого слайда, и вы можете пользоваться новой версией вашего сайта. Однако это лишь информация для ознакомления, чтобы вы понимали, что у вас нет необходимости тратить время на создание собственного слайдера. Если же вы действительно хотите заняться этим делом, то вас ждут хорошие новости. Дело в том, что простой слайдер на jQuery создать не так сложно даже новичку.

Особенности такого слайдера

Итак, вы решили собственноручно создать слайдер контента на jQuery. Что он будет собой представлять? Какие у него будут особенности и отличительные черты? Если вы не хотите добавлять большого количества наворотов, тем самым значительно усложняя задачу, вам следует задуматься о том, чтобы сделать слайдер как можно проще. Это значит, что он будет просто прокручивать ваш контент, не используя никакой сложной анимации. Конечно, вы можете сделать самый примитивный слайдер, который будет просто прокручивать несколько контейнеров с контентом, но не стоит вдаваться в крайности. По крайней мере, даже новичок может заставить слайдер прокручиваться в разных направлениях, позволить пользователю выбирать конкретный слайд, генерировать ссылки на контент в слайдах и так далее. Соответственно, слайдер для сайта на jQuery доступен для каждого даже не в самой примитивной форме, так что вам определенно стоит задуматься о том, чтобы создать собственный уникальный и неповторимый слайдер.

Совместимость и адаптивность

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

Илон Маск рекомендует:  Что такое код domnode >clone_node

Начинать создание чего-либо всегда нужно с HTML-разметки, затем обвешивая этот код стилями и скриптами. В данном случае вам понадобится контейнер, в котором будет содержаться ваш слайдер, а также отдельные div-ы для каждого слайда. Вот и все, больше ни о чем задумываться не надо. Просто не забудьте дать вашему контейнеру ID, чтобы затем к нему можно было привязать скрипты, а также всегда давайте классы элементам слайдера, чтобы затем на них вешать стили.

Со стилями все немного сложнее, потому что вам придется очень сильно преобразовывать полученный скелет, так как он, собственно говоря, ничего собой не представляет. Это всего лишь несколько блоков контента, помещенные в один контейнер. Соответственно, вам нужно это изменить. Вам нужно задать ширину контейнера, спрятать все, что выступает за края, сделать рамки, если вам этого хочется, а также заняться другими важными деталями, такими как сделать контейнер относительным, чтобы внутри него разместить слайды абсолютно. Это далеко не все, что вам нужно проделать в файле CSS, однако в данном случае многое зависит от того, как вы хотите, чтобы выглядел ваш слайдер. Не забудьте о том, что вам также нужно сделать кнопки для переключения слайдов, а также другие функциональные и декоративные детали. Вы можете решить, что вы создаете слайдер с миниатюрами на jQuery, можете решить, что это будет слайдер с обычным текстом. В общем, в зависимости от контента вы можете менять стили, поэтому нет смысла описывать каждый элемент детально. Если вы не хотите разбираться со всеми этими деталями, вам лучше вернуться в самое начало статьи и задуматься о том, чтобы просто скачать себе готовый слайдер или использовать готовый код для него.

Ну и пришло время взглянуть на самое главное, что заставит ваш слайдер быть не просто красивой картинкой, а живым контейнером, сменяющим слайд за слайдом. Здесь вам понадобятся знания языка программирования, так как вам нужно будет задавать конкретные параметры скорости и частоты перелистывания слайдов, прятать неактивные слайды, активировать кнопки, которые вы оформили в предыдущем шаге, а также многое другое. Для человека, который незнаком с программированием, этот шаг будет слишком сложным, так что вам не стоит даже пытаться что-то соорудить самостоятельно. Просто найдите готовый слайдер или скопируйте код того, который вам понравился.

Подключение к CMS

В современном мире очень многие сайты не создаются с абсолютного нуля, а делаются на CMS – специальных платформах, являющихся базой для интернет-страниц. Это позволяет облегчить как работу веб-дизайнера, так и того человека, который хочет затем использовать этот сайт, администрировать его и наполнять контентом. Соответственно, вам стоит разобраться с тем, как подключить ваш новый слайдер к той или иной CMS. В большинстве случаев это делается довольно просто: вам нужно лишь прикрепить ваш код к шаблону и необходимые скрипты догрузить вручную. Также вы можете создать отдельную функцию, оборачивающую весь ваш код, чтобы прикрепить его к CMS.

Это еще не конец

Вам стоит понимать, что это не обязательно конец вашей работы. Если вам понравится работать с jQuery, создавая ваш слайдер, то вы можете продолжить, совершенствуя его. Существует большое количество интересных фишек и «наворотов», которые нет смысла рассматривать в статье про базовый слайдер, но вы можете научиться этому самостоятельно.

Слайдер изображений для сайта

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

  • ГлавнаяНовости статьиCSS , HTML , jQuery , Разные заметки разработчика Как создать простой слайдер картинок

Как создать простой слайдер картинок

  • 4.5/5
  • 17 оценок
Очень плохо! Плохо Нормально Хорошо Очень хорошо!
11.8% 0% 0% 0% 88.2%

Иногда при создании сайтов нам требуется вывести на его страницах слайдер изображений.

К примеру вы создаете HTML страничку или же Landing Page, или же любой другой сайт, и вам нужно отобразить какую то информацию в виде изображений которые будут перелистываться при клике или же из заданным промежутком времени, тут нам и придет на помощь слайдер изображений.

В принципе слайдер может быть использован не только для изображений а и для любой другой информации, но мы сегодня рассмотрим вариант самого простого слайдера, именно для изображений!

В слайдере который мы сегодня рассмотрим мы будем использовать html, css стили и JavaScript.

Хотя слайдер очень простой в котором код JavaScript занимает всего 3kb, но он прекрасно справляется с такими функциями как перелистывание слайдов, имеет два вида навигации (стрелочки вправо/влево и навигационные квадратики), присутствует небольшой эффект анимации, есть возможность задавать время перелистывания, делать авто прокрутку или же только перелистывать при клике, ну и другие возможности которые мы опишем на странице ниже.

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

1. И так, для отображения слайдера пишем такой HTML код:

Создаем собственный слайдер на jquery, шаг за шагом с подробным объяснением

Доброго времени суток, дорогие читатели текущей публикации. Сегодняшняя статья будет посвящена очень интересному и полезному материалу, описывающему слайдер на jQuery.

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

Несколько слов о полезности слайдеров

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

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

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

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

Это очень выгодный подход, так как большинство людей продолжают просмотр сайта и ознакомление с подробностями выгодных предложений.

В этом списке я перечислил основные преимущества такого подхода:

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

Реализация собственного слайдера

Несмотря на огромное количество вариантов слайдеров, выложенных в сеть, достаточно часто их все равно приходиться подгонять под свои нужны, редактировать, оптимизировать и т.д. К тому же не всегда понятно, как они реализованы и часто всплывают вопросы: «А что вот это за строка такая!?», «Что выполняет этот элемент?», «Кому вообще сдался такой оператор?»…

Чтоб такого больше не было, я создал простенький, но очень удобный слайдер, код которого подробно описал и впоследствии вы сможете его улучшать, изменять и использовать на страницах своих веб-ресурсов.

Для начала создадим базовую разметку страницы и загрузим нужные фотографии.

Что такое код jquery слайдер

Слайдеры (слайд-шоу) — здесь мы собрали и продолжаем регулярно обновлять коллекцию бесплатных слайдеров для сайта с различными интересными эффектами и переходами, отзывчивые (адаптивные), полноэкранные, c 3D-эффектами и прочие… В большинстве работ используется JavaScript (jQuery), но также есть и на чистом CSS. Сразу на странице Вы можете просмотреть Демо и скачать исходный код (* zip).

Особо хотелось бы отметить Owl Carousel 2 и Fotorama — пожалуй, самые популярные слайдеры: легкие, удобные и многофункциональные, включают в себя множество опций для настройки и имеют адаптивные дизайны. Ссылки на Owl Carousel 2 и Fotorama

Simplicity: 3D слайдер с интересным плавающим эффектом

Также при смене слайдов большие изображения меняются местами с изображениями в миниатюре.

Создаем замечательный слайдер на JQuery

Сегодня мы научимся создавать замечательный слайдер контента на jquery.

Простой и функциональный слайдер контента поможет нам в любой ситуации: надо разместить картинку, ссылку или просто текст? Наш слайдер сможет все!

Давайте перейдем скорее к делу. Создадим простую разметку для нашего слайдера:

Тут все просто. div — это блок, в котором находится содержимое слайда. Я поместил туда другой блок, задал ему размеры и залил цветом. Сколько блоков с классом slide, столько слайдов в нашем слайдере.

Теперь к стилям:

Здесь пояснять нечего, ничего сложного. Для кнопок управления используются картинки, остальное все просто.

И теперь парам-пам-пам, сам наш скрипт (не забываем предварительно подключить свежую версию jquery):

По нему немного поясню. 1. Он создает круглые кнопки управления (расположены справа внизу) — которые позволяют перемещаться по слайдам — класс slider-controls с вложенными тегами span с классами control-slide. Активный кружочек дополнительно имеет класс active. 2. Он создает кнопки управления слайдами вправо-влево (появляются при наведении на слайдер) — классы next и prev соответственно. Внешний вид кнопок управления задается стилями.

Также наш скрипт имеет несколько настроек: 1. var Sl >

Слайдер для сайта jQuery + CSS с автоматическим перелистыванием

Простой слайдер изображений или текста на jQuery + CSS с автоматическим интервалом переключения слайдов

Слайдер для сайта jQuery + CSS с автоматическим перелистыванием

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

timeList — скорость переключения слайда

TimeView — время показа

RadioBut — кнопки под слайдом, для быстрой навигации (radio buttons). По умолчанию true может принимать значение false.

А теперь давайте приступим! Создадим и откроем файл index.htm и пропишем туда нужную нам разметку:

В представленном коде как мы видим ничего сложного нет, slider-wrap определяет общее положение слайдера и выравнивает его по середине экрана. Параметр slider позиционирует, и задает высоту нашего слайда свойством height. Если будете использовать слайдер картинок, то укажите высоту картинок в данном свойстве, если высота картинок разная, то укажите максимальную.

Для наилучшей визуализации слайдера и привлекательности используйте одинаковое разрешение картинок.

Теперь нам необходимо стилизовать наш слайдер. Стрелки вперед/назад для переключения слайдов, а также радио кнопки под слайдером, использованы в виде картинок и прилагаются вместе с файлом. Создадим и откроем файл style.css и пропишем туда нужную нам разметку:

Если стрелочки вперед/назад мешают видимости вашего слайдера их можно сделать невидимыми, а появляться они будут, лишь при наведении на них. В параметрах prewBut и nextBut, задайте свойству opacity значение 0.

Создадим и откроем наш js-файл, в котором и будет код слайдера. Не забудьте подключить фреймворк jQuery, а также библиотеку jquery.ui — указанная библиотека нам необходима для того, чтобы задать элемент исчезновения и появление слайда. Заменить указанный эффект можно свойством fadeIn и fadeOut.

Функция animSlide принимает три вида значений: next, prew, и числовое значение. Параметр next переключает следующий слайд, prew предыдущий, а числовое значение это конкретно выбранный слайд через радио кнопки под слайдом. Функции slideDirectionHide и slideDirectionShow почти схожи и идентичны, первая отвечает за исчезновение слайда и направление движения уходящего слайда, вторая за появление слайда, его направление движения при появлении, а также за заданный интервал времени показа.

При наведении курсора мыши на слайдер показ приостанавливаеться.

На этом все, если что-то не понятно или возникли вопросы, пишите и спрашивайте.

Оптимизируем код слайдера

Откроем в блокноте js код галереи и внимательно посмотрим на него. Не знаю как вам, а мне, например, кажется не очень удобно, если придется поменять id обертывающему блоку, то в коде это нужно сделать в четырех местах. Проще обьявить переменную, в которой будет хранится id нужного болка. Попробуем это сделать. Создадим переменную с именем elWrap и присвоим ней значение $('#slider'). Теперь в коде можно обращаться к элементу #slider уже через эту переменную. Вот как будет выглядеть js:

Согласитесь, стало значительно удобнее. Достаточно поменять id в html коде для обертывающего блока и присвоить это значение перемененной elWrap. Больше ничего нигде менять не потребуется.

Аналогично поступим и со значением, отвечающим за интервал времени, спустя который происходит смена фото. Объявим переменную phase и сохраним в ней нужное значение.

Сложности могут возникнуть, если мы решим создать переменные для навигационных кнопок. Даже не сложности, а маленький нюанс. Если объявить переменные в самом начале кода, то в этом случае кнопки не заработают. Дело в том, что физически кнопки появляются позже, нежели считываются переменные, созданные для них и jQuery их проигнорирует.

Решить проблему можно по разному - например, вставить разметку для навигации непосредственно в html и тогда никаких вопросов с видимостью переменных не возникнет.

Либо, если, ну никак нельзя поменять html, то объявить переменные после того, как будет добавлена разметка для кнопок с помощью js. В нашем случае будем использовать второй вариант. Окончательный код теперь у нас будет выглядеть следующим образом:

В заключении ссылка на готовую галерею.

Ну а мы в следующей статье поговорим, как создать слайдер с прокруткой (карусель).

JQuery слайдер

Последнее время большую популярность приобрели движущиеся горизонтальные панели, известные также как "Слайдеры" или "Карусели". Оно и понятно, это простой и очень эффективный метод привлечь внимание пользователя. Слайдеры позволяют активнее влиять на поведение пользователей на сайте и продвигать необходимые материалы.

На сегодняшний день существуют сотни, если не тысячи готовых скриптов и модулей для организации слайдера. Вы можете вбить в Google строку "JQuery slider" и найдете десятки обзоров с ссылками на сотни готовых модулей "слайдеров" и "каруселей".

Основная проблема всех готовых модулей - универсальность, громоздкость и, иногда, сложность настройки. Создать слайдер с нуля, иногда, проще чем настроить готовый модуль, ибо простой слайдер - это лишь пара строк кода на JavaScript.

В этой небольшой заметке я покажу как с нуля создать свой слайдер.

Слайдер с точки зрения HTML верстки

С точки зрения HTML верстки слайдер состоит из двух основных частей - "окна" отображения (viewport) и основного содержимого, состоящего из нескольких слайдов. Ширина одного слайда обычно равна ширине окна отображения. Остальные слайды, не влазят в окно отображения просто не видны.

Ниже приведен пример самого простого слайдера с описанием в комментариях.

style type = "text/css" >

/* Основной контейнер для всех элементов слайдера. Его размеры 640x400*/
#slider

/* Фиксированный контейнер прокручиваемых элементов слайдера */
#slider_container

/* Плавающий контейнер прокручиваемых элементов слайдера. Ширина задается в свойстве style. */
#slider_moving_container

/* Элемент слайдера. В этом примере можно было бы просто использовать изображение, но мы то пойдем дальше */
.slider_element
/ style >

div id = "slider_container" >

div id = "slider_moving_container" >

div class = "slider_element" onclick = "location.href='http://www.codenet.ru/cat/WEB-Development/HTML/';" id = "slider_1" style = "left:0;background-image: url('/np-includes/upload/2013/02/06/131036_original.jpg');" >
/ div >

div class = "slider_element" onclick = "location.href='http://www.codenet.ru/cat/Languages/PHP/';" id = "slider_2" style = "left:640px;background-image: url('/np-includes/upload/2013/02/06/131037_original.jpg');" >
/ div >

div class = "slider_element" onclick = "location.href='http://www.codenet.ru/cat/Languages/JavaScript/';" id = "slider_3" style = "left:1280px;background-image: url('/np-includes/upload/2013/02/06/131038_original.jpg');" >
/ div >

HTML код отобразит слайдер, но этого мало. Слайды должны автоматические меняться через некоторое время. Эта небольшая программа на JavaScript раз в 10 секунд меняет слайдер на очередной.

var sl >= 1 ; // Номер текущего слайда
var sl >= 3 ; // Общее количество слайдов

function sl >( ) <
setTimeout ( function ( ) <

// Переход к следующему слайду
sl >++;

// Переход от последнего к первому слайду
if ( sl >> sl >) sl >= 1 ;

// Сдвиг слайда и анимация с помощью JQuery animate()
$ ( '#slider_moving_container' ) . animate ( < left : - ( ( sl >- 1 ) * 640 ) + 'px' > ) ;

// Повтор
sl >( ) ;
> , 10000 ) ; /* Каждый 10 секунд */
> ;

Чтобы слайдер имел законченный вид, его необходимо снабдить элементами навигации и добавить подписи к слайдам.

body style = "font-family:arial;font-size:12px;" >

div id = "slider" >
div id = "slider_container" >
div id = "slider_moving_container" >

div class = "slider_element" onclick = "location.href='http://www.codenet.ru/cat/WEB-Development/HTML/';" id = "slider_1" style = "left:0;background-image: url('/np-includes/upload/2013/02/06/131036_original.jpg');" >

div id = "slider_info" >
a href = "http://www.codenet.ru/cat/WEB-Development/HTML/" id = "slider_title" > Невский Экспресс / a >
a href = "http://www.codenet.ru/cat/WEB-Development/HTML/" id = "slider_description" > Электровоз ЧС200-004 с поездом "Невский Экспресс". Станция Рябово. Скорость 160 км/ч. Февраль 2013 года. / a >
/ div >
/ div >

div class = "slider_element" onclick = "location.href='http://www.codenet.ru/cat/Languages/PHP/';" id = "slider_2" style = "left:640px;background-image: url('/np-includes/upload/2013/02/06/131037_original.jpg');" >

div id = "slider_info" >
a href = "http://www.codenet.ru/cat/WEB-Development/HTML/" id = "slider_title" > Санкт-Петербург - Брянск / a >
a href = "http://www.codenet.ru/cat/WEB-Development/HTML/" id = "slider_description" > Электровоз ЧС2Т-1026 с поездом Санкт-Петербург - Брянск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года. / a >
/ div >
/ div >

div class = "slider_element" onclick = "location.href='http://www.codenet.ru/cat/Languages/JavaScript/';" id = "slider_3" style = "left:1280px;background-image: url('/np-includes/upload/2013/02/06/131038_original.jpg');" >

div id = "slider_info" >
a href = "http://www.codenet.ru/cat/WEB-Development/HTML/" id = "slider_title" > "Сапсан" / a >
a href = "http://www.codenet.ru/cat/WEB-Development/HTML/" id = "slider_description" > Электропоезд ЭВС1-005 "Сапсан" и электровоз ЧС2Т-1014 с поездом Санкт-Петербург - Ижевск. Перегон Чудово-Московское - Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года. / a >
/ div >
/ div >

a href = "#" id = "slider_right" > / a >
a href = "#" id = "slider_left" > / a >
/ div >

Код автоматической смены слайдов немного изменился из-за реализации ручного управления (стрелки "влево" и "вправо"). Если пользователь по клику сменил слайд, то автоматическая смена слайдов выключается.

var sl >= 1 ; // Номер текущего слайда
var sl >= 3 ; // Общее количество слайдов
var sl >= true ; // Автоматическая смена слайдов - true, ручная смена слайдов - false

// Обработчик клика по навигационной стрелке "вправо".
$ ( '#slider_right' ) . click ( function ( ) <

// Выключение автоматической смена слайдов
sl >= false ;

// Переход к следующему слайду
sl >++;

// Переход к первому слайду, если слайды закончились
if ( sl >> sl >) sl >= 1 ;

// Смена слайда с анимацией
$ ( '#slider_moving_container' ) . animate ( < left : - ( ( sl >- 1 ) * 640 ) + 'px' > ) ;

$ ( '#slider_left' ) . click ( function ( ) <

// Выключение автоматической смена слайдов
sl >= false ;

// Переход к предыдущему слайду
sl >--;

// Переход к последнему слайду, если необходимо
if ( sl > 1 ) sl >= sl >;

// Смена слайда с анимацией
$ ( '#slider_moving_container' ) . animate ( < left : - ( ( sl >- 1 ) * 640 ) + 'px' > ) ;

// Автоматическая смена слайдов. См. предыдущий пример.
function sl >( ) <
setTimeout ( function ( ) <

// Если включено ручное управление слайдами, то ничего не делать
if ( ! sl >) return ;
sl >++;
if ( sl >> sl >) sl >= 1 ;
$ ( '#slider_moving_container' ) . animate ( < left : - ( ( sl >- 1 ) * 640 ) + 'px' > ) ;
sl >( ) ;
> , 10000 ) ;
> ;

→ Делаем простой слайдер на jQuery

Опубликовано: 13 апреля 2012

Некоторое время назад, я начал осваивать jQuery. Думаю, все знают, что так называется самая популярная библиотека для разработки и создания сценариев (скриптов) на JavaScript. С её помощью очень просто создавать эффектные и интерактивные элементы сайта.

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

Итак, какие особенности нашего слайдера на jQuery (который я назвал HWSlider) можно отметить?

  • Простота использования и оформления – я хотел создать простой сценарий без наворотов, поэтому, я не использовал анимации на CSS3, а код получился очень универсальным и понятным.
  • Возможность вставлять в слайды как изображения, так и любой HTML – код.
  • Возможность прокручивать слайды как по порядку (вперёд - назад), так и выбирать каждый слайд (1,2,3,4…)
  • Автоматически формирующиеся ссылки (предыдущий – следующий, и с номерами слайдов). Вам нужно лишь вставить нужное количество div-ов, а всё остальное рассчитается само. Ну и можно отметить, что количество слайдов неограниченно.

Скрипт совместим со всеми современными браузерами: IE, Opera, Firefox, Safari, Chrome, (т.к. слайдер не использует CSS3).

Начнём с HTML разметки. В нужное место html страницы или шаблона нужно вставить.

Здесь всё просто, как видно, вы можете вставлять сколько угодно слайдов путём создания новых div-ов. Внутрь их можно вставлять любой html код, например картинку или блок с текстом. Не забудьте только подключить саму библиотеку на jQuery в вместе со всеми js - скриптами. Если не знаете как, смотрите в примере.

Далее рассмотрим CSS. Это разметка стилей для нашего jQuery - слайдера. Вставьте код, что приведён ниже в файл стилей (css - файл) вашего сайта или темы.

Давайте разберём его подробнее. Сначала мы даём основному блоку с идентификатором "slider-wrap", нужную ширину. Так как в него вставляются все остальные блоки, то высоту можно не задавать, она будет зависеть от того, что будет внутри. Затем нам нужно задать размеры контейнера в котором будут находиться слайды. Это – #slider. Зададим ему ширину и высоту, а так же, к примеру, границу в 10 пикселей. Здесь ширина – 640px это меньше чем ширина родителя, так как мы добавляем границы шириной по 10px справа и слева. От ширины этого div-а так же зависит и ширина самих слайдов ( .slide).

И последнее: нам нужно обязательно задать position:relative для контейнера слайдов так как слайды внутри - с абсолютным позиционированием. Для самих слайдов в CSS задаётся только ширина и высота. Остальные свойства задаются уже в jQuery скрипте.

Селектор .sli-links это блок, в котором будут находится кнопки перехода на необходимый слайд. Эти кнопки представляют из себя простые элементы вида номер , которые вставятся в необходимом количестве автоматически, вместе и с их родителем .sli-links. Для кнопок мы задаём красивый вид, а именно делаем каждую кнопку квадратной, выравниваем их все по центру, а так же, благодаря overflow:hidden и text-indent:-9999px, убираем текст, оставляя только фоновые иконки, которые так же меняются при наведении на этот элемент курсора. Для удобства я использовал спрайты, что уменьшило количество изображений.

Далее оформляется активная кнопка. Просто изменяем положение фона. Затем переоформим ссылки для перехода на сдедующий и предыдущий слайды. Вы можете дать им любое оформление, так же как и кнопкам. Данные ссылки вставляются автоматически внутрь #slider. Но чтобы их было видно, я задал им абсолютное позиционирование и верхний слой (z-index:3), чтобы они были отображены над слайдами. Думаю с CSS здесь всё понятно и просто: вы можете поменять практически все свойства, чтобы оформить слайдер так, как вам необходимо.

Давайте теперь рассмотрим сам сценарий:

Сначала в переменных сохраняются настройки: hwSlideSpeed - скорость перелистывания слайдов, hwTimeOut - время спустя которое происходит автоматическая смена слайда, hwNeedLinks - управляет ссылками "Следующий " и "Предыдущий" - если значение этой переменной равно true, то эти ссылки будут отображаться, а если false, то соответственно их не будет (как на главной странице моего блога).

Далее мы устанавливаем необходимые CSS свойства для слайдов с помощью метода .css(). Блоки со слайдами мы накладываем друг на друга используя абсолютное позиционирование, затем скрываем их все .hide(), а затем показываем только первый. Переменная slideNum - это номер активного слайда, то есть счётчик.

Основная логика работы нашего jQuery слайдера - это функция animSlide. Она принимает один параметр. Если мы передадим в неё строки "next" или "prew", то сработают условные операторы и будет отображён соответственно следующий или предыдущий слайд. Если же мы пошлём в качестве значения цифру, то это число станет активным слайдом и он будет показан.

Таки образом эта функция скрывает текущий div, высчитывает новый и показывает его.

Обратите внимание, что методу .fadeIn(), который делает видимым активный слайд, задан второй аргумент. Это, так называемая функция обратного вызова. Она выполняется, когда слайд полностью появится. В данном случае это сделано для обеспечения автоматической прокрутки слайдов. Функция rotator, определённая ниже, вызывает снова функцию animSlide для перехода на следующий слайд через необходимый нам интервал времени: мы получим замыкание, обеспечивающее постоянную прокрутку.

Всё работает нормально, но нам нужно остановить выполнение автоматики, если пользователь подводит курсор к слайдеру, или нажимает кнопки. Для этого создана переменная pause. Если её значение положительно - true, значит автоматического переключения не будет. С помощью метода .hover(), мы указываем: очистить таймер если он запущен - clearTimeout(sl >

Дополнительно нам нужно создать новые элементы на странице и поместить их в нужное место. Используя цикл each() для каждого слайда (div-а с классом .slide), создадим элемент span внутри которого бует число - номер слайда. Это число используется в функции анимации, для перехода к слайду с этим номером. Обернём всё в div с нужными классами, и в итоге получим такую разметку:

Затем если в настройках указано, что ссылки "следующий - предыдущий" нужны, то создадим и их, и сразу повесим на них обработчики. В качестве обработчика клика используем ту же самую функцию animSlide, с аргументами "next" и "prew".

Казалось бы, зачем мы создаём разметку внутри скрипта, а не в HTML коде?. Дело в том, что например, если у пользователя отключены скрипты - он не увидит элементов, которые не будут работать, и это не введёт его в замешательство. Кроме того упрощается код, что неплохо для SEO.

В итоге разметка слайдера будет выглядеть примерно так (в качестве слайдов я использовал изображения, и установил 5 штук):

Ниже вы можете посмотреть, как работает наш jQuery слайдер на демо странице, и скачать все необходимые исходники.

На напоследок, пару моментов об интеграции этого слайдера с Drupal. Вы можете добавить этот код в файл шаблона, например в page.tpl.php, и прикрепить скрипт отдельными js-файлом к теме. Jquery в Drupal включен по умолчанию, но работает в режиме совместимости (подробнее). Есть два варианта доработки. Либо обернуть весь js код:

или заменить символы $ во всём скрипте на jQuery. Вот так:

В примере уже реализован первый метод.

Спасибо за прочтение! Оставляйте комментарии, приходите ещё. А так же вы можете подписаться на RSS, чтобы получать обновления блога первыми!

Добавлено: Это ещё не всё. Читайте следующую статью о HWSlider. Там мы добавим новые возможности к данному скрипту.

Илон Маск рекомендует:  StringOfChar - Функция Delphi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL