Как сделать чтоб owl carousel 2 пропускал неактивные слайды?

Question

[xxvxx]

Или как сделать в owl carousel 2 неактивные слайды
Есть слайдер и надо в процессе какие-то слайды скрывать и чтоб кнопка вперед игнорировала эти слайды и шла к следующему как это реализовать?
я пробовал вешать display: none; но это не работает

Comments

[Тынай Бакасов]

Конечно display:none; не будет работать, ведь этот тип карусели сначала анализирует html и генерирует свои собственные данные, а затем начинает с ними зацикливаться. Если вы определите какое-то свойство css, вы просто сломаете карусель.

[xxvxx]

Тынай Бакасов, там есть события и если только по событию проверять следующий элемент и если на нем есть допустим класс .none то перепрыгивать его... но я не нашел готовых решений может я не правильно гуглил=(( а у самого нет опыта работы с событиями у этого слайдера но вроде немного разобрался попробую что нибудь написать...

[Тынай Бакасов]

xxvxx,

<style type="text/css">
  .hid{display: none;}
</style>

<button onclick="reinitcarousel(1)">Tab 1</button><button onclick="reinitcarousel(2)">Tab 2</button>
    <div id="owl-demo">
      <div class="item im1" id="image1"><img src="images/1.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image2"><img src="images/2.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image3"><img src="images/3.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image4"><img src="images/4.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image5"><img src="images/5.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image6"><img src="images/6.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image7"><img src="images/7.jpg" alt="Owl Image"></div>
      <div class="item im1" id="image8"><img src="images/8.jpg" alt="Owl Image"></div>
    </div>

    <div id="anotherdiv" style="display:none;">
      <div class="item hid im1" id="image1"><img src="images/1.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image2"><img src="images/2.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image3"><img src="images/3.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image4"><img src="images/4.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image5"><img src="images/5.jpg" alt="Owl Image"></div>
      <div class="item hid im2" id="image6"><img src="images/6.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image7"><img src="images/7.jpg" alt="Owl Image"></div>
      <div class="item hid im1" id="image8"><img src="images/8.jpg" alt="Owl Image"></div>
    </div>

Скрипт

<script>
jQuery('#owl-demo .hid').remove(); //Во время загрузки страницы сначала удаляем слайд с классом ".hid"

//Затем загружаем карусель
jQuery(document).ready(function() {
  jQuery("#owl-demo").owlCarousel({
      autoPlay: 3000, //Автозапуск на 3 секунды
      navigation : true,
      items : 4,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3],
      loop:true,
      rewindNav: false
  });
});
</script>

<script type="text/javascript">
  function reinitcarousel(v)
  {
    jQuery('#owl-demo').html(jQuery('#anotherdiv').html()); //Удалите все слайды в owl-demo и переместите слайды в div #anotherdiv, где спрятаны все слайды имеющий класс .hid
    jQuery('#owl-demo .im'+v).removeClass('hid'); //Затем снова удаляеи класс .hid, класс .im(v), где v — число.
    jQuery('#owl-demo .hid').remove(); //Затем удаляеи все слайды имеющий класс .hid, чтобы в нашей карусели были только видимые слайды.
    jQuery("#owl-demo").data('owlCarousel').destroy(); //Нам нужно сначала полностью убрать карусель, а затем повторно выводить, как показано ниже.
    jQuery("#owl-demo").owlCarousel({
        autoPlay: 3000, 
        navigation : true,
        items : 4,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
        loop:true
    });
  }
</script>

[xxvxx]

Тынай Бакасов, Спасибо вам большое! очень жаль что данное решение мне не подходит=(( смысл в том что пользователь нажал на кнопку вешается на следующий слайд класс и мы его пропускаем

[Тынай Бакасов]

xxvxx, вы хотите чтобы он был, но не показывался?

[xxvxx]

Тынай Бакасов, а так можно было бы просто удалить HTML код слайда при запуске и все

[Тынай Бакасов]

xxvxx, у вас просто не конкретный вопрос, disply:none; не сработает, этот вариант который я вам дал так и делает, то бишь когда вам надо не показывать вы вешаете класс hid, а когда снова надо показать убирате класс hid.

[xxvxx]

Тынай Бакасов, да я хочу чтоб он оставался но был не активным

[Тынай Бакасов]

xxvxx,
Вот смотрите, в коде стоит 8 картинок так скажем, я повесил на 5, 6 класс .hid и они не показываются

[Тынай Бакасов]

xxvxx, вы поняли смысл? Он есть в коде, но скрипт берёт и удаляет перед тем как показать в браузере, когда надо, будете добавлять и убирать класс .hid вместо display: none;

[xxvxx]

Тынай Бакасов, да они не показываются но слайдер все равно на них заходит просто нечего не показывает, я могу после каждого события нажатия кнопки вперед назад определять куда движется пользователь и проскакивать неактивный слад, тоесть если пользователь нажал назад то проскакиваем его на 1 назад в перед проскакиваем на 1 в перед но проблема возникает а если пользователь крутит тачем как мне определить в какую сторону он движется? ведь если он движется назад а я буду продвигать его в перед то он не сможет попасть на следующий слайд
Ваше решение рабочее, но я бы сделал проще нашел все hid и удалил их и не надо пересобирать слайдер
но проблема в том что мне нужно динамическое решение пользователь может активировать и деактивировать любые слайды в любом порядке

[Тынай Бакасов]

xxvxx, а вот теперь я вас понял.

[Тынай Бакасов]

xxvxx, у меня теперь к вам вопрос, если пользователь деактивировал слайд он же получается исчезнет, как он его снова активирует?
С вопросом разобрались, чтобы мы могли вам помочь опишите процесс действий.
У вас у вас слайд переход по страницам? Или слайд изображений?
Мне понять бы в каком направление мне думать.

[xxvxx]

Тынай Бакасов, нажимает на другую кнопку и слайд заново активируется, это конструктор который зависит от выбранных пользователей параметров, на наверное буду вешать класс и выводить на неактивном слайде надпись что с данными параметрами нечего нет ну и вперед назад если будет нажато то я буду проскакивать слайд

[Тынай Бакасов]

xxvxx, в этом случае используйте

remove()

И

append()

Когда ненадо будете удалять, когда надо будете вставлять

[xxvxx]

Тынай Бакасов,

$('.btn_next').click(function () {
    setTimeout(function () {
        if (document.querySelector(".owl-item.active.center").classList.contains("none")) {
            $('.parameters-box__head').trigger('next.owl.carousel', [200]);
            $('.parameters-box__main').trigger('next.owl.carousel', [200]);
        }
    }, 50);

})

Написал так для кнопки вперед аналогично для назад