Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2014, 11:26
Новичок на форуме
Отправить личное сообщение для Meanna Посмотреть профиль Найти все сообщения от Meanna
 
Регистрация: 11.02.2014
Сообщений: 7

зацикливание карусели owl
Добрый день, друзья)
Недавно мне потребовалось удовлетворить изощренный вкус дизайнера, который передает мне в верстку макеты. А запросили с меня необычный слайдер-карусель. 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); работает некорректно.

Каким еще способом можно зациклить эту карусель?
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2014, 13:12
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

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

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

Последний раз редактировалось krasovsky, 19.02.2014 в 13:15.
Ответить с цитированием
  #3 (permalink)  
Старый 20.02.2014, 20:23
Аватар для Boomerml
Аспирант
Отправить личное сообщение для Boomerml Посмотреть профиль Найти все сообщения от Boomerml
 
Регистрация: 04.12.2013
Сообщений: 31

я бы посоветовал idangero Посмотрите первый пример.
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2014, 12:55
Новичок на форуме
Отправить личное сообщение для Meanna Посмотреть профиль Найти все сообщения от Meanna
 
Регистрация: 11.02.2014
Сообщений: 7

и ведь знала это решение раньше, но оно казалось слишком громоздким.
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/ только не получается разрешить проблему прокрутки влево) вправо слайды клонируются нормально, влево с опозданием
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2014, 14:59
Профессор
Отправить личное сообщение для krasovsky Посмотреть профиль Найти все сообщения от krasovsky
 
Регистрация: 21.12.2012
Сообщений: 869

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

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

Последний раз редактировалось krasovsky, 24.02.2014 в 15:15.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Отображение скрытого блока из карусели Kasper28 Элементы интерфейса 6 11.02.2014 16:40
Автоматическая прокрутка JQ карусели supermike Events/DOM/Window 0 13.09.2013 10:54
Скрипт карусели изображений (правка функцинала) byFahrenheit Общие вопросы Javascript 0 02.09.2013 16:47
jcarousel - Мгновенная остановка карусели. radogost jQuery 0 31.10.2012 18:08
Проблема скрипта карусели в firefox. Очень прошу помощи. -user21- jQuery 5 16.06.2010 13:38