Вход

Просмотр полной версии : зацикливание карусели owl


Meanna
19.02.2014, 11:26
Добрый день, друзья)
Недавно мне потребовалось удовлетворить изощренный вкус дизайнера, который передает мне в верстку макеты. А запросили с меня необычный слайдер-карусель. http://prometey.media7.ru/
Прошло три недели, я успела собрать весь сайт, а проблема с зацикливанием так и не решена. Подошла на 90% owl carousel, все бы хорошо, но нет у нее опции зацикливания http://owlgraphic.com/owlcarousel/#customizing кроме безумной прокрутки к началу.

Пришлось брать мануал, учебник по Jquery где делалась каруселька, и внедрять следующий код

$(function(){

var setUpCovers = function(){

$slider=$('#owl-demo .owl-item');

$('.owl-next').click(function(){

$slider.eq(0).appendTo('#owl-demo .owl-wrapper');
setUpCovers();

});
$('.owl-prev').click(function(){

$slider.eq($slider.length-1).prependTo('#owl-demo .owl-wrapper');
setUpCovers();


});
};
setUpCovers();

});



который благополучно не работает.

Прокрутить на второй слайд (чтобы карусель встала по центру) при загрузке страницы также нет возможности, owl функционала не предоставляет, transform: translate3d(-960px, 0px, 0px); работает некорректно.

Каким еще способом можно зациклить эту карусель?

krasovsky
19.02.2014, 13:12
Так опции "классической карусели" в этом плагине нет.
сейчас достаточно плагинов реализующих зацикливание слайд-за-слайдом, лучше обратиться к ним, чем безуспешно пытаться внедрять свой код - для этого нужно разобраться в принципе действия, и грубо говоря переписать методы плагина. А это время, бессмысленно потраченное.
Ваш код не работает потому что вы к чужому велосипеду присобачили гудок, а он на гудок не рассчитан, и его не учитывает в своей работе.
Вобщем жаль,но никак

Можете посмотреть пункт Owl Data methods
Может быть вас устроят методы owl.goTo(x) или owl.jumpTo(x) -переход к слайдам
Может даже скомбинировать их с последующей реинициализацией owl.reinit(newOptions) (если нужно)

Boomerml
20.02.2014, 20:23
я бы посоветовал idangero (http://www.idangero.us/sliders/swiper/demos.php) Посмотрите первый пример.

Meanna
24.02.2014, 12:55
и ведь знала это решение раньше, но оно казалось слишком громоздким. :victory:

var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true,
loopAdditionalSlides: 5,
initialSlide:0,
grabCursor: true,
paginationClickable: true,
speed:1000,
autoplay: 3000,
watchActiveIndex: true,
slidesPerView: 'auto',
centeredSlides: true
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})


http://prometey.media7.ru/ только не получается разрешить проблему прокрутки влево) вправо слайды клонируются нормально, влево с опозданием

krasovsky
24.02.2014, 14:59
Попробуйте установить параметр loopedSlides (http://www.idangero.us/sliders/swiper/api.php)

И у вас в консоли ошибка - jQuery is not defined , видимо что то вызывает ее раньше чем подключается jquery