Главная » Файлы » Прочие скрипты » jQuery

Двойной слайдер любого контента через плагин DualSlider на jQuery
23.06.14, 11:25:22

Скачать файл




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

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" type="text/css" media="all" href="/css/jquery.dualSlider.0.3.css" />  
<script src="/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="/js/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="/js/jquery.dualSlider.0.3.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function() {  

$(".carousel").dualSlider({  
auto:true,  
autoDelay: 6000,  
easingCarousel: "swing",  
easingDetails: "easeOutBack",  
durationCarousel: 1000,  
durationDetails: 500  
});  

});  

</script>


В то место, где будет сам слайдер, вставляйте:
Код
<div class="carousel clearfix">

<div class="panel">

<div class="details_wrapper">

<div class="details">

<div class="detail">
Текст в первой вкладке справа
</div><!-- /detail -->

<div class="detail">
Текст во второй вкладке справа  
</div><!-- /detail -->

<div class="detail">
Текст в третьей вкладке справа  
</div><!-- /detail -->

</div><!-- /details -->

</div><!-- /details_wrapper -->

<div class="paging">
<div id="numbers"></div>
<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
<a href="javascript:void(0);" class="next" title="Next">Next</a>
</div><!-- /paging -->

<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>

</div><!-- /panel -->

<div class="backgrounds">

<div class="item item_1">
Контент 1 в левом слайдере  
</div><!-- /item -->

<div class="item item_2">
Контент 2 в левом слайдере  
</div><!-- /item -->

<div class="item item_3">
Контент 3 в левом слайдере  
</div><!-- /item -->

</div><!-- /backgrounds -->

</div>


Осталось лишь залить три скрипта из прикреплённого архива в папку js стиль в папку css и все картинки в папку images

Материал подготовлен Apocalypse
Категория: jQuery | Добавил: Apocalypse | Теги: слайдер, контента, JQuery, плагин, DualSlider, на, двойной, Через, любого
Просмотров: 341 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: