Форум

ligisayan · #1 (**permalink**) 19.06.2015, 23:25

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

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

$('#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

Сообщение от ligisayan

destroy();

удаляет созданную оболочку но не содержимое.
два варианта -- либо перед destroy удалить элементы через removeItem();
либо после destroy
удалить содержимое #carousel
зачем нужен сам destroy в вашем коде непонятно меняйте содержиое с помощью addItem и removeItem.

ligisayan · #3 (**permalink**) 21.06.2015, 11:47

Сообщение от рони

удаляет созданную оболочку но не содержимое.
два варианта -- либо перед destroy удалить элементы через removeItem();
либо после destroy
удалить содержимое #carousel
зачем нужен сам destroy в вашем коде непонятно меняйте содержиое с помощью addItem и removeItem.

Правильно ли я понимаю, что нужно воспользоваться вместо destroy такой записью?

$('#foot-carousel .li').each(function(){
		$('#foot-carousel').data('owlCarousel').removeItem($(this));
	});

или просто

$('#foot-carousel').data('owlCarousel').removeAll();

?

рони · #4 (**permalink**) 21.06.2015, 15:38

Сообщение от 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>

ligisayan · #5 (**permalink**) 21.06.2015, 18:49

рони, все супер! Спасибо большое!
Единственное, что еще нужно поправить это создание событие на отслеживании добавления li, а не на клике по кнопке, т.к. все действия происходят быстрее заполнения самого списка.
Пытаюсь проделать такой трюк, но не проходит..

$('.list').on('add', 'li', function(){...}

Цитата:

первый вариант тоже для меня непонятен причём тут li ?

ну, это я просто div добавлял с классом li addItem('<div class=li> но в коде этого не указал)

рони · #6 (**permalink**) 21.06.2015, 19:13

Сообщение от ligisayan

событие на отслеживании добавления li,

тот волшебник который добавляет li пусть и изменяет всё как вам нужно.

ligisayan · #7 (**permalink**) 21.06.2015, 19:23

Сообщение от рони

тот волшебник который добавляет li пусть и изменяет всё как вам нужно.

да, но если более практически: есть функция php 'woocommerce_add_to_cart' которая и есть тем волшебником - можно ли это событие отследить?

рони · #8 (**permalink**) 21.06.2015, 19:42

ligisayan,

Форум

Справочник

Discord чат

Курсы javascript