Skip to content

Instantly share code, notes, and snippets.

@pafnuty
Created February 1, 2013 18:37
Show Gist options
  • Save pafnuty/4693165 to your computer and use it in GitHub Desktop.
Save pafnuty/4693165 to your computer and use it in GitHub Desktop.
A CodePen by Pavel Belousov.
<h1>Множественные карусельки jCarousel</h1>
<h3>Карусель проматывается по одному элементу</h3>
<div class="main_wrap">
<div class="carousel_wrap">
<ul>
<li><img src="http://lorempixel.com/100/101" alt=""></li>
<li><img src="http://lorempixel.com/100/102" alt=""></li>
<li><img src="http://lorempixel.com/100/103" alt=""></li>
<li><img src="http://lorempixel.com/100/101" alt=""></li>
<li><img src="http://lorempixel.com/100/102" alt=""></li>
<li><img src="http://lorempixel.com/100/103" alt=""></li>
<li><img src="http://lorempixel.com/100/101" alt=""></li>
<li><img src="http://lorempixel.com/100/102" alt=""></li>
<li><img src="http://lorempixel.com/100/103" alt=""></li>
</ul>
</div>
<span class="btn jcarousel-prev" data-scroll="1"><<</span>
<span class="btn jcarousel-next" data-scroll="1">>></span>
</div>
<h3>Карусель проматывается по два элемента</h3>
<div class="main_wrap">
<div class="carousel_wrap big">
<ul>
<li><img src="http://lorempixel.com/200/201" alt=""></li>
<li><img src="http://lorempixel.com/200/202" alt=""></li>
<li><img src="http://lorempixel.com/200/203" alt=""></li>
<li><img src="http://lorempixel.com/200/201" alt=""></li>
<li><img src="http://lorempixel.com/200/202" alt=""></li>
<li><img src="http://lorempixel.com/200/203" alt=""></li>
<li><img src="http://lorempixel.com/200/201" alt=""></li>
<li><img src="http://lorempixel.com/200/202" alt=""></li>
<li><img src="http://lorempixel.com/200/203" alt=""></li>
</ul>
</div>
<span class="btn jcarousel-prev" data-scroll="2"><<</span>
<span class="btn jcarousel-next" data-scroll="2">>></span>
</div>
jQuery(document).ready(function($) {
$('.carousel_wrap').jcarousel();
$('.jcarousel-prev').each(function(p) {
$(this).on('active.jcarouselcontrol', function() {
$(this).removeClass('disabled'); //если ещё есть куда проматывать - удаляем касс disabled
})
.on('inactive.jcarouselcontrol', function() {
$(this).addClass('disabled'); //если перематывать дальше не куда - добавляем касс disabled
})
.jcarouselControl({target: '-='+$(this).data('scroll')}) //крутим на заданное в атрибуте data-scroll="X" количество элементов
});
$('.jcarousel-next').each(function(n) {
$(this).on('active.jcarouselcontrol', function() {
$(this).removeClass('disabled'); //если ещё есть куда проматывать - удаляем касс disabled
})
.on('inactive.jcarouselcontrol', function() {
$(this).addClass('disabled'); //если перематывать дальше не куда - добавляем касс disabled
})
.jcarouselControl({target: '+='+$(this).data('scroll')}) //крутим на заданное в атрибуте data-scroll="X" количество элементов
});
});
.carousel_wrap {
position: relative;
overflow: hidden;
width: 300px;
height: 100px;
}
.carousel_wrap ul {
width: 20000em;
position: absolute;
list-style: none;
margin: 0;
padding: 0;
}
.carousel_wrap li {
float: left;
width: 100px;
height: 100px;
}
.btn {
display: inline-block;
padding: 5px;
margin: 0 5px -25px 0;
cursor: pointer;
color: #f96;
}
.btn.disabled {
color: #ccc;
cursor: default;
}
.carousel_wrap.big {
width: 600px;
height: 200px;
}
.carousel_wrap.big li {
width: 200px;
height: 200px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment