Cоздать сайт бесплатно
WebDesignMagazine.ru – Журнал о веб-дизайне
создать сайт

Как создать фото-слайдер используя jQuery и CSS3

0

В этом уроке мы будем создавать jQuery слайдер с помощью “Nivo Slider jQuery Script” и CSS3. Мы будем использовать “Nivo Slider jQuery Script”, потому что это мощный инструмент, и он совершенно бесплатный. У этого скрипта есть 16 эффектов перехода, он простой, гибкий и имеет много интересных особенностей. Вы можете использовать его практически в любом месте и для почти любого проекта, в том числе личных и коммерческих веб-сайтов и любых тем, которые вы делаете для вордпресса, к примеру.

Шаг 1. Основные HTML разметки

Прежде всего, необходимо скачать jQuery Nivo Slider скрипт здесь. Вам нужно всего лишь два файла из пакета, который вы скачали: “Nivo-slider.css” и “jquery.nivo.slider.pack.js”.

Затем, создайте основную разметку HTML и добавьте “Nivo Slider” CSS и JS файлы. Кроме того, вам нужно присоединить jQuery библиотеку, используя последнюю версию организованную Google или если вы хотите, вы можете разместить его на своем сервере, выбор за вами.

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

Шаг 2. Cлайдер HTML разметки

Для начала нам нужно создать div с классом “slider-wrapper” и “futurico-theme”. Затем создаем div с идентификатором “slider” и классом “nivoSlider”. Для каждого слайда мы создадим .

Шаг 3. Макет jQuery слайдера

Мы создадим jQuery слайдер картинок шириной в 300px и 180px в высоту. Как только мы добавим 5px паддинга (амер. padding), нам нужно сразу вычесть 10px от ширины и высоты. Мы, также зададим цвет фона и закруглим углы.

 

step31

Шаг 4. Ползунок

Теперь мы переходим к стилизации ползунка. Мы начнем с его размещения и центрирования внизу. Если у вас будет больше, чем четыре слайда вам придется изменить значение “left”, для того, чтобы централизовать ползунок.

Мы создаем кружок для каждого слайда. Для его стилизации, мы добавим цвет фона, тени и закругленные углы. Чтобы скрыть “1,2,3,4” нумерацию мы добавим отступ текста с отрицательным значением.

Для активного слайда мы добавим зеленый градиент и изменим тени.

 

step41

Шаг 5. Следующий и Предыдущий слайд

Для стилизации “следующего и предыдущего” ползунка, мы будем позиционировать его в центре и добавим основные стили CSS (шрифт, размер шрифта, цвет и т.д.)

 

step51

Шаг 6. Заголовки HTML разметки

Для создания заголовка, нам нужно создать div с классом “Nivo-HTML-caption» и случайным идентификатор (id). Чтобы связать заголовок с соответствующим слайдом, нам нужно добавить “title” к с тем же именем, что и id заголовка.

 

step6

Шаг 7. Стиль заголовка

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

 

step7

Вот и все! Мы создали мощный и красивый слайдер. Приведите примеры своих слайдеров в комментариях ниже!

Поделиться: