Всем привет! Сегодня я хочу рассказать вам про слайдер на JQuery , да не один, а сразу несколько очень красивых и эффектных слайдеров разного типа.
Всем привет! Сегодня я хочу рассказать вам про слайдер на JQuery, да не один, а сразу несколько очень красивых и эффектных слайдеров разного типа.
Перейдите по ссылке:
http://www.jssor.com/demos/index.html
Здесь вы сразу можете увидеть работу слайдера. Ниже вы найдете все типы слайдеров, которых, кстати, очень даже немало. Там есть и слайдеры на всю ширину, и простые исчезающие слайдеры, слайдеры картинок, баннеров, карусель и очень интересный слайдер контента, который можно использовать для рекламы каких-то своих продуктов.
Выше, в меню, вы найдете кнопку Download, по которой можно скачать исходники.
А здесь вы можете найти инструкцию по работе с данной библиотекой:
http://www.jssor.com/development/index.html
Добавляем следующий код:
<!-- это работает одинаково со всеми версиями jquery от 1.x до 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = { $AutoPlay: true };
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
Здесь вы передаете опции и id вашего контейнера.
HTML код также несложен:
<div id="slider1_container" style="position:relative;top:0px;left:0px;width:600px;height:300px;">
<div u="slides" style="cursor:move;position:absolute;overflow:hidden;left:0px;top:0px;width:600px;height:300px;">
<div><img u="image" src="image1.jpg" /></div>
<div><img u="image" src="image2.jpg" /></div>
</div>
</div>
Это все, что вам нужно.
Более подробную информацию по установке и настройке слайдера вы можете найти все по той же ссылке выше. Документация очень качественная и понятная так что комментировать, как мне кажется, нет смысла.
Надеюсь, вам пригодится данная библиотека, и вы найдете слайдер, который вам нужен.
Спасибо за внимание и удачи!
