Простой JQuery слайдер для сайта с прокруткой

0
18
Простой JQuery слайдер для сайта с прокруткой
Простой JQuery слайдер для сайта с прокруткой

В сегодняшней статье я расскажу о том, как самому без каких-либо затруднений подключить JQuery слайдер для сайта.

JQuery слайдер

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

Выбор в интернете слайдеров (каруселей — название в простонародье) огромен. Существуют различные плагины, скрипты и иные приложения, создающие автоматическое передвижение картинок (контента). Здесь право выбора остается за каждым. Я лишь хочу предложить вашему вниманию один из самых простых, но тем не менее функциональных слайдеров, работающий за счет скрипта, подключаемого к библиотеке JQuery.

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

В общем, я думаю, работа с данным приложением, вам понравится. Один из примеров работы скрипта вы можете наблюдать здесь:

Горизонтальный JQuery слайдер
Заработок
Программы
Опросы
Сайтостроение
Раскрутка
JAVA СКРИПТЫ
JQUERY
Заработок
Программы
Опросы
Сайтостроение
Раскрутка
JAVA СКРИПТЫ
Ну а теперь приступим к подключению скрипта и настройке слайдера. Для начала вам потребуется скачать архив с файлами, сделать вы это можете нажав на кнопку ниже:

Далее распаковываете архив и закачиваете файл jquery.slider.js в папку со скриптами вашей темы, например js.

Следующим шагом подключаем данный скрипт к вашему сайту. Добавьте в файл header.php перед закрывающим тегом head следующую строку:

<script type=»text/JavaScript» src=»ПУТЬ_К_ПАПКЕ/js/jquery.slider.js»></script>
Где не забудьте изменить путь к файлу на свой. Кроме того, для того чтобы скрипт функционировал, у вас также должна быть подключена библиотека JQuery.

Если все сделали, идем дальше. Откройте файл style.css вашей темы и в самый низ добавьте следующие стили:

/* ГОРИЗОНТАЛЬНЫЙ СЛАЙДЕР ————————————————————————*/
#slider-x{
text-align: center;
font-family: Tahoma,Theater Afisha,Arial,Helvetica,Sans-serif;
font-size: 20px;
font-weight: bold;
color : #0000ee;
text-shadow: 1px 1px 1px #000;
}
Vwidget{
margin: 0;
padding: 0;
}
.VjCarouselLite{
margin-left: -5px;
padding: 0;
}
.VjCarouselLite li{
overflow: hidden;
float: none;
display: block;
padding: 0;
text-align: center;
}
.VjCarouselLite li div{
margin: 0 auto;
margin-top: 10px;
margin-left: 5px;
margin-right: 7px;
border: 1px solid #79fd63;
width: 215px;
height: 150px;
}
.VjCarouselLite img{
width: 215px;
height: 150px;
}
Выводится слайдер в любом месте сайта, вы можете разместить его как в шапке, сайдбаре, футере, так и в постах. Для этого вставьте следующий код:

<div id=»slider-x»>
<div class=»Vwidget»>
<div class=»VjCarouselLite»>
<ul>
<li>
<div>
информация
</div>
</li>
<li>
<div>
информация
</div>
</li>
<li>
<div>
информация
</div>
</li>
</ul>
</div>
</div>
</div>
Вместо «информация» указываете что угодно: ссылки на картинки, статьи т.д. Число слайдов неограниченно. Как добавить следующий слайд, думаю сообразите.

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

Откройте файл jquery.slider.js и в нижней его части увидите следующие функции:

$(«.Vwidget .VjCarouselLite»).jCarouselLite({
btnNext: «.Vwidget .down»,
btnPrev: «.Vwidget .up»,
vertical: false,
visible: 3,
auto: 3000,
speed: 500,
circular: true
});
где vertical: false — режим прокрутки. По умолчанию включен горизонтальный. Для переключения в вертикальный, замените значение false на true.

visible: 3 — количество отображаемых слайдов

auto: 3000 и speed: 500 — скорость и замедление прокрутки. Выставляете на свой вкус.

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

Что еще хотелось сказать. Если вы вдруг решили использовать на своем сайте несколько слайдеров, 2, 3 и более, то вам достаточно в скрипт добавить следующие функции:

$(«.Vwidget .VjCarouselLite»).jCarouselLite({
btnNext: «.Vwidget .down»,
btnPrev: «.Vwidget .up»,
vertical: false,
visible: 3,
auto: 3000,
speed: 500,
circular: true
});
$(«.Vwidget-2 .VjCarouselLite-2»).jCarouselLite({
btnNext: «.Vwidget .down»,
btnPrev: «.Vwidget .up»,
vertical: true,
visible: 3,
auto: 5000,
speed: 300,
circular: true
});
а также прописать новые стили и внести изменения в код вывода.

Вот в общем то и все, тема, как подключить JQuery слайдер для сайта, подошла к концу. Будут вопросы, пишите в комментариях.

Комментарии:

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here