Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2016, 14:15
Аспирант
Отправить личное сообщение для диана1975 Посмотреть профиль Найти все сообщения от диана1975
 
Регистрация: 11.09.2015
Сообщений: 32

owl carousel 2
Всем привет. Установила себе owl carousel 2 базовую: http://www.owlcarousel.owlgraphic.com/demos/basic.html.
Но хочу вместо кнопок навигации картинки-миниатюры, в инете нашла решение только для owl carousel : https://jsfiddle.net/j1fjk201/13/.
Как бы мне для моей карусельки такое сделать?

С нетерпением жду совета

Последний раз редактировалось диана1975, 19.02.2016 в 22:49.
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2016, 16:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

диана1975,
как-то так ... .removeAttr("onclick").off() ... добавлено чтоб убрать прежние клики
jQuery(document).ready(function() {
    var owl = jQuery(".owl-carousel").owlCarousel({
        loop: true,
        dots: true,
        margin: 10,
        nav: true,
        navText: ["<", ">"],
        items: 1
    });
    jQuery(".jshop_img_thumb").removeAttr("onclick").off().each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,1000])
        })
    })
});
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2016, 18:26
Аспирант
Отправить личное сообщение для диана1975 Посмотреть профиль Найти все сообщения от диана1975
 
Регистрация: 11.09.2015
Сообщений: 32

Спасибо, рони, но это еще не все: как выделить активную картинку-миниатюру, не знаю, как через css сделать, если бы к ней добавлялся какой-нибудь активный класс, подскажите, пожалуйста
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2016, 18:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

диана1975,
после 12 строки
jQuery(".jshop_img_thumb").removeClass("select");
jQuery(el).addClass("select");
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2016, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

диана1975,
как боротся со встроенными dots не подскажу
Ответить с цитированием
  #6 (permalink)  
Старый 08.02.2016, 19:00
Аспирант
Отправить личное сообщение для диана1975 Посмотреть профиль Найти все сообщения от диана1975
 
Регистрация: 11.09.2015
Сообщений: 32

спасибо за своевременную помощь
Ответить с цитированием
  #7 (permalink)  
Старый 08.02.2016, 19:08
Аспирант
Отправить личное сообщение для диана1975 Посмотреть профиль Найти все сообщения от диана1975
 
Регистрация: 11.09.2015
Сообщений: 32

Рано радовалась...
Картинка-миниатюра выделяется при клике на нее, а при нажатии на кнопки вперед-назад (навигация) замирает, а должен наблюдаться такой же эффект
Рони, не могу идти дальше, пока полностью не разберусь со слайдером. Прошу помощи, в ява скриптах полный ноль...

Последний раз редактировалось диана1975, 08.02.2016 в 19:32.
Ответить с цитированием
  #8 (permalink)  
Старый 08.02.2016, 19:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

диана1975,
раздел работа для такого есть или читать документацию и пробовать ... меняйте всё на это
jQuery(document).ready(function() {
    var owl = jQuery(".owl-carousel").owlCarousel({
        loop: true,
        dots: true,
        margin: 0,
        nav: true,
        navText: ["<", ">"],
        items: 1
    });
    owl.on("changed.owl.carousel", function(event) {
        jQuery(".jshop_img_thumb").removeClass("select").eq(event.page.index).addClass("select")
    });
    jQuery(".jshop_img_thumb").removeAttr("onclick").off().each(function(i, el) {
        jQuery(el).click(function(event) {
            event.preventDefault();
            owl.trigger("to.owl.carousel", [i,1000])
        })
    }).first().addClass("select")
});
Ответить с цитированием
  #9 (permalink)  
Старый 08.02.2016, 19:41
Аспирант
Отправить личное сообщение для диана1975 Посмотреть профиль Найти все сообщения от диана1975
 
Регистрация: 11.09.2015
Сообщений: 32

Настоящий полковник...
спасибо!!
Ответить с цитированием
  #10 (permalink)  
Старый 10.02.2016, 09:19
Аспирант
Отправить личное сообщение для диана1975 Посмотреть профиль Найти все сообщения от диана1975
 
Регистрация: 11.09.2015
Сообщений: 32

Я дико извиняюсь, но это, оказывается, еще не все. Стоило мне нажать на кнопку выбора товара с футляром или без в карточке товара и моего многострадального слайдера как не бывало, почему так? прошу помочь довести дело до конца
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Owl Carousel в 2 ряда SnezhanaLast Элементы интерфейса 1 07.02.2016 20:45
JQuery carousel сделать сдвиг на один элемент Heidel jQuery 1 06.10.2014 09:13
зацикливание карусели owl Meanna jQuery 4 24.02.2014 14:59
owl Carousel Boomerml jQuery 2 17.02.2014 16:09
Javascript carousel Anastasiya Общие вопросы Javascript 0 26.10.2011 00:34