Javascript.RU

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

Не удается переинициализировать слайдер
Есть слайдер, который должен переинициализироваться при каждом клике на кнопку.

вроде все делаю по ману, но слайдер не разрушается, а снова заполняется элементами при повторном клике. Как поправить?

$('#carousel').owlCarousel();

$(".button").click(function() {

  $('#carousel').data('owlCarousel').destroy();
  $('#carousel').owlCarousel({
    items: 3,
    pagination: false,
    navigation: true,
    navigationText: ["", ""],
  });

  $('.list li').each(function() {
    if ($(".list li").hasClass("empty")) {
      console.log("Modified");
    } else {
      $('#carousel').data('owlCarousel').addItem('<div>содержимое</div>');
    };
  });
  $('#carousel').data('owlCarousel').reinit();
});

<ul class="list ">
  <!-- добавленное содержимое -->
</ul>
<div id="carousel" class="owl-carousel">
  <!-- содержимое карусели -->
  <div class="empty"></div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 20.06.2015, 18:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ligisayan
destroy();
удаляет созданную оболочку но не содержимое.
два варианта -- либо перед destroy удалить элементы через removeItem();
либо после destroy
удалить содержимое #carousel
зачем нужен сам destroy в вашем коде непонятно меняйте содержиое с помощью addItem и removeItem.
Ответить с цитированием
  #3 (permalink)  
Старый 21.06.2015, 11:47
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

Сообщение от рони Посмотреть сообщение
удаляет созданную оболочку но не содержимое.
два варианта -- либо перед destroy удалить элементы через removeItem();
либо после destroy
удалить содержимое #carousel
зачем нужен сам destroy в вашем коде непонятно меняйте содержиое с помощью addItem и removeItem.
Правильно ли я понимаю, что нужно воспользоваться вместо destroy такой записью?
$('#foot-carousel .li').each(function(){
		$('#foot-carousel').data('owlCarousel').removeItem($(this));
	});

или просто
$('#foot-carousel').data('owlCarousel').removeAll();

?

Последний раз редактировалось ligisayan, 21.06.2015 в 11:57.
Ответить с цитированием
  #4 (permalink)  
Старый 21.06.2015, 15:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ligisayan
).data('owlCarousel').removeAll();
такого параметра я не увидел
первый вариант тоже для меня непонятен причём тут li ?
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">



    #carousel .item{
      display:  inline-block;
      padding: 54px 0px;
      margin: 5px;
      color: #FFF;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
      text-align: center;
      width: 120px;
      height: 100px;
      background-color: #0000FF;
      float: left;
    }
    .left{
      text-align: left;
      margin-bottom: 10px;
    }
    .left .btn {
      display: block;
    }



  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
  <script>
     $(function(){
   $('#carousel').owlCarousel({
    items: 3,
    pagination: false,
    navigation: true,
    navigationText: ["", ""]
  });

var i = 0;  //для теста
$(".button").click(function() {
  $('#carousel').find('>').remove()
  $('.list li').each(function() {
    if ($(".list li").hasClass("empty")) {
      console.log("Modified");
    } else {
      $('#carousel').data('owlCarousel').addItem('<div class=item >содержимое '+(i++)+' </div>');
    };
  });

});
});


  </script>
</head>

<body>  <input name="" type="button" value="click" class="button">
<ul class="list ">
  <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
  <!-- добавленное содержимое -->
</ul>
<div id="carousel" class="owl-carousel">
  <!-- содержимое карусели -->

</div>


</body>

</html>
Ответить с цитированием
  #5 (permalink)  
Старый 21.06.2015, 18:49
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

рони, все супер! Спасибо большое!
Единственное, что еще нужно поправить это создание событие на отслеживании добавления li, а не на клике по кнопке, т.к. все действия происходят быстрее заполнения самого списка.
Пытаюсь проделать такой трюк, но не проходит..
$('.list').on('add', 'li', function(){...}

Цитата:
первый вариант тоже для меня непонятен причём тут li ?
ну, это я просто div добавлял с классом li addItem('<div class=li> но в коде этого не указал)
Ответить с цитированием
  #6 (permalink)  
Старый 21.06.2015, 19:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ligisayan
событие на отслеживании добавления li,
тот волшебник который добавляет li пусть и изменяет всё как вам нужно.
Ответить с цитированием
  #7 (permalink)  
Старый 21.06.2015, 19:23
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

Сообщение от рони Посмотреть сообщение
тот волшебник который добавляет li пусть и изменяет всё как вам нужно.
да, но если более практически: есть функция php 'woocommerce_add_to_cart' которая и есть тем волшебником - можно ли это событие отследить?
Ответить с цитированием
  #8 (permalink)  
Старый 21.06.2015, 19:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ligisayan,
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно сделать слайдер контента OgecuT Элементы интерфейса 2 23.07.2014 14:31
Слайдер во время загрузки страницы v.v.dankiv jQuery 0 14.04.2013 11:16
Слайдер с помощью CSS и jQuery - 1000 р. stixia007 jQuery 21 27.03.2013 22:44
Слайдер с перемоткой в двух разных блоках Джэй jQuery 0 15.10.2012 23:08
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 20:52