Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2016, 14:19
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 20.06.2015
Сообщений: 114

Owl carousel 2 не работает с табами - как поправить?
Есть 2 owl carousel 2, каждый в своем табе.

В первой вкладке слайдер работает должным образом, но как только перехожу на вторую вкладку, то слайдер отображается некорректно: все сбивается в кучу.
Как я понимаю, это возникает из-за того, что первый таб скрыт.
В первой версии owl carousel, говорят, такой проблемы не возникает, но мне нужна именно вторая из-за некоторых фич.

Пробую навесить на ивент переключения таба перезагрузку OWL-carousel trigger('refresh.owl.carousel'), но что-то делаю неправильно, т.к. эфеекта никакого не наблюдается..

Как поправить? фидл
$(document).ready(function() {

  $("#owl-demo").owlCarousel({
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  });

  $("#owl-demo2").owlCarousel({
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 3
      }
    }
  });
  $(".nav-tabs>li.active").click(function() {
    $(".owl-carousel").trigger('refresh.owl.carousel');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.carousel.js"></script>
<script src="https://rawgit.com/OwlFonk/OwlCarousel2/develop/src/js/owl.navigation.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="http://owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="tabbable">
  <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
    </li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
      <div id="owl-demo" class="owl-carousel">
        <div class="item">
          <h1>1</h1>
        </div>
        <div class="item">
          <h1>2</h1>
        </div>
        <div class="item">
          <h1>3</h1>
        </div>
        <div class="item">
          <h1>4</h1>
        </div>
        <div class="item">
          <h1>5</h1>
        </div>
        <div class="item">
          <h1>6</h1>
        </div>

      </div>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
      <div id="owl-demo2" class="owl-carousel">
        <div class="item">
          <h1>1</h1>
        </div>
        <div class="item">
          <h1>2</h1>
        </div>
        <div class="item">
          <h1>3</h1>
        </div>
        <div class="item">
          <h1>4</h1>
        </div>
        <div class="item">
          <h1>5</h1>
        </div>
        <div class="item">
          <h1>6</h1>
        </div>

      </div>
    </div>
  </div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2016, 14:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,128

ligisayan,
самое простое открыть таб -- проинициализировать слайдер - закрыть таб.
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2016, 15:16
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 20.06.2015
Сообщений: 114

Сообщение от рони Посмотреть сообщение
ligisayan,
самое простое открыть таб -- проинициализировать слайдер - закрыть таб.
рони, спасибо, т.е. я как-то неправильно открываю таб?
$(".nav-tabs>li.active").click(function() {
$(".owl-carousel").trigger('refresh.owl.carousel');
});
или неправильно инициализирую карусель и нужен триггер
initialize.owl.carousel ?
А закрыть таб - это как?
Ответить с цитированием
  #4 (permalink)  
Старый 17.02.2016, 15:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,128

ligisayan,
http://jsfiddle.net/Epmwx/284/
Ответить с цитированием
  #5 (permalink)  
Старый 17.02.2016, 16:37
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 20.06.2015
Сообщений: 114

рони, супер! спасибо!!!
еще бы понять такой момент - почему при загрузке owl-карусель не инициализируется так как следует, а при вызове редактора кода (f12) - обновляется..?
Ответить с цитированием
  #6 (permalink)  
Старый 17.02.2016, 16:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,128

ligisayan,
вы бы хоть на форуме поискали ... display: none; -- нет элемента нет размера 1 причина, слайдеру откуда брать размер? 2 причина использование ready вместо load -- картинки не успевают прогрузится (потом берутся из кеша ) и лучше если картинки имеют размер в теге или css, тогда можно без load
ссылка на тему ... подобных ещё десяток
JQuery карусель в табах
Ответить с цитированием
  #7 (permalink)  
Старый 17.02.2016, 17:18
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 20.06.2015
Сообщений: 114

Сообщение от рони Посмотреть сообщение
ligisayan,
вы бы хоть на форуме поискали ... display: none; -- нет элемента нет размера 1 причина, слайдеру откуда брать размер? 2 причина использование ready вместо load -- картинки не успевают прогрузится (потом берутся из кеша ) и лучше если картинки имеют размер в теге или css, тогда можно без load
ссылка на тему ... подобных ещё десяток
JQuery карусель в табах
рони, спасибо!
была оказывается еще и 3 причина о которой я не подумал - картинки в слайдере изначально меньшего размера, чем на выходе в слайдере и по сути - они успевают загрузится, но в исходном разрешении, а уже при обновлении страницы (f12) - растягиваются под размеры слайда
Ответить с цитированием
  #8 (permalink)  
Старый 08.05.2016, 14:41
Новичок на форуме
Отправить личное сообщение для shustrov Посмотреть профиль Найти все сообщения от shustrov
 
Регистрация: 08.05.2016
Сообщений: 1

Привет. Проблему решил следующим образом.

Заметил что при изменении размера окна - Owl карусель сама обновляет размеры элементов. Есть у них встроенный обработчик, метод ".onResize", собственно идея в том чтобы вызывать этот метод при переключении таб.

<div id="new-products" role="tabpanel" class="tab-pane active">
                    <div id="owl-carousel-new-products" class="owl-carousel">
                        <div class="product-item"><img src="./images/1.png"></div>
                        <div class="product-item"><img src="./images/2.png"></div>
                        <div class="product-item"><img src="./images/3.png"></div>
                        <div class="product-item"><img src="./images/4.png"></div>
                        <div class="product-item"><img src="./images/5.png"></div>
                    </div>
                </div>



$('#owl-carousel-new-products').owlCarousel(owlConfig);

    $('[data-toggle="tab"]').each(function () {
        $(this).on('click', function (e) {
            var carouselId = $($(e.target).attr('href')).find('.owl-carousel').attr("id");
            var carouselObj = ($("#"+carouselId).owlCarousel(owlConfig)).data('owlCarousel');
            if ( carouselObj && typeof carouselObj.onResize === "function") {
                setTimeout(function () {
                    carouselObj.onResize();
                }, 50);
            }
        });

    });


Если будут вопросы - пишите.

Последний раз редактировалось shustrov, 08.05.2016 в 14:51. Причина: уточнение
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
owl carousel 2 диана1975 jQuery 22 16.09.2017 23:07
Как работает Google Analytics: смотрю в "Инструментах разработчика" Chrome hrundel Общие вопросы Javascript 0 10.10.2013 19:31
dragleave работает как mouseout, а не mouseleave? danik.js Events/DOM/Window 17 17.09.2013 17:17
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Ajax и три <form> не работает. Как правильно сделать листание записей из базы данных? vlad275 AJAX и COMET 2 14.12.2009 14:04