Отсчитать 3ий элемент карусели их 5 видимых
Здравствуйте, возникла проблема. Имеется jcarousel, имеется 5 видимых элементов. Мне нужно 3ему элементу li придать класс active. Карусель замкнута, т.е. просто nth-child не поможет. Необходимо именно их 5 отображаемых на экране элемента придать третьему класс. Подскажите возможные решения. Заранее спасибо.
|
Ох, помню, придумывал что то подобное
getArray = function(count,curSlide) {//создаем массив,аргументы - количество слайдов,активный слайд
var c = [];
for (i=0;i<count;i++) {
c.push(i);//создаем массив из элементов (допустим их 5 == [1,2,3,4,5])
}
c = c.concat(c.concat(c))//конкатинация массива == [1,2,3,4,5,1,2,3,4,5,12,3,4,5]
c[count+cureentSlide]='center';//вычисление центра допустим активный слайд 2 ==[1,2,3,4,5,1,'center',3,4,5,12,3,4,5],хотя можно и не вычислять,так для наглядности
return c;
}
Получил массив теперь можешь спокойно отсчитывать по нему в любую сторону - 3 в лево будет 5 слайд, враво 3 слайд. |
Цитата:
а ещё лучше макет тут или в песочнице |
Цитата:
|
http://plast-pak.esy.es/ - а вот и сам макет
|
jCarousel выделение центральной картинки
scrobot,
а доку почитать?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Carousel - jCarousel Examples</title>
<base href="http://sorgalla.com/jcarousel/examples/responsive/" />
<!-- Shared assets -->
<link rel="stylesheet" type="text/css" href="_shared/css/style.css">
<!-- Example assets -->
<link rel="stylesheet" type="text/css" href="jcarousel.responsive.css">
<script type="text/javascript" src="../../libs/jquery/jquery.js"></script>
<script type="text/javascript" src="../../dist/jquery.jcarousel.min.js"></script>
<style type="text/css">
.jcarousel img.active{
border: #FF0000 4px solid;
border-radius: 4px;
width: 92%;
height: 92%;
}
</style>
<script>(function($) {
$(function() {
var jcarousel = $('.jcarousel');
jcarousel
.on('jcarousel:reload jcarousel:create', function () {
var width = jcarousel.innerWidth();
if (width >= 600) {
width = width / 5;
} else if (width >= 350) {
width = width / 2;
}
jcarousel.jcarousel('items').css('width', width + 'px');
})
.jcarousel({
wrap: 'circular'
});
$('.jcarousel-control-prev')
.jcarouselControl({
target: '-=1'
});
$('.jcarousel-control-next')
.jcarouselControl({
target: '+=1'
});
$('.jcarousel-pagination')
.on('jcarouselpagination:active', 'a', function() {
$(this).addClass('active');
})
.on('jcarouselpagination:inactive', 'a', function() {
$(this).removeClass('active');
})
.on('click', function(e) {
e.preventDefault();
})
.jcarouselPagination({
perPage: 1,
item: function(page) {
return '<a href="#' + page + '">' + page + '</a>';
}
});
$('.jcarousel')
.on('jcarousel:animateend', function(event, carousel) {
var visible = $('.jcarousel').jcarousel('visible');
$('img', '.jcarousel').removeClass('active') // $('li', '.jcarousel').removeClass('active')
$('img',visible.eq(2)).addClass('active'); // visible.eq(2).addClass('active');
});
});
})(jQuery);
</script>
</head>
<body>
<div class="wrapper">
<h1>Responsive Carousel</h1>
<p>This example shows how to implement a responsive carousel. Resize the browser window to see the effect.</p>
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li><img src="../_shared/img/img1.jpg" alt="Image 1"></li>
<li><img src="../_shared/img/img2.jpg" alt="Image 2"></li>
<li><img src="../_shared/img/img3.jpg" alt="Image 3" class="active"></li>
<li><img src="../_shared/img/img4.jpg" alt="Image 4"></li>
<li><img src="../_shared/img/img5.jpg" alt="Image 5"></li>
<li><img src="../_shared/img/img6.jpg" alt="Image 6"></li>
</ul>
</div>
<a href="#" class="jcarousel-control-prev">‹</a>
<a href="#" class="jcarousel-control-next">›</a>
<p class="jcarousel-pagination"></p>
</div>
</div>
</body>
</html>
|
Да вот только что хотел написать извинения за отнятое время)) Полазил и сам нашел. Как-то я пропустил этот пункт в доке. Спасибо большое.
|
| Часовой пояс GMT +3, время: 02:45. |