Owl-Carousel-2：FAQ-带滑块的项目 - 在章节之间跳过

Question

我正在构建一个常见问题解答部分，其中每个常见问题解答项目都有自己的轮播。我的主要目标是它在最后一张幻灯片之后继续前进时跳到下一章（稍后返回会很好）。

我已经研究了一个仍然存在错误的解决方案。当直接移动到最后一张幻灯片然后按向前时，它再次从第一张幻灯片开始而不是移动到下一章。

任何人都可以帮助我或知道为什么吗？

$(document).ready(function() {
    //init the slider class
  $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      autoHeight:true,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:1
          },
          1000:{
              items:1
          }
      }
  })


var carousel;
var current;
var lastItem = 0;


//on click of a setup item do
$('.faq-item-title').click(function(){
  $(this).next().fadeToggle();
  lastItem = 0;
});



//open next chapter
$('.owl-carousel').on('changed.owl.carousel', function(e) {
  var carousel = e.relatedTarget,
  current = carousel.current();
  console.log('ist: ' + e.page.index);
  console.log('last: ' + lastItem);
  console.log('total: ' + (e.page.count + 1));
  console.log('--');
  if (e.page.index == 0 && lastItem == e.page.count + 1){
    $(this).parent().fadeOut();
 //   $(this).parent().prev().removeClass('faq_active').addClass('faq_inactive');
    $(this).parent().parent().next().children().next().fadeIn();
  //  $(this).parent().parent().parent().next().children().children().removeClass('faq_inactive').addClass('faq_active');
    lastItem = 0;
  }
  lastItem = current;
    });
});

body {
 background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
}

.faq-item {
  border: 1px solid gray;
  background: rgba(255,200,255,0.2);
  font-family: 'Comic Sans MS';
}

.faq-item-title {
  cursor: pointer;
  padding-left: 10px;
  user-select: none;
}

.faq-item-content {
  display: none;
  text-align: center;
  margin-bottom: 20px;
}

.displayBlock {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="wrap">
  <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 1</p>
    </div>
    <div class="faq-item-content displayBlock">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 1: Text A</div>
        <div class="item">Chapter 1: Text B</div>
        <div class="item">Chapter 1: Text C</div>
        <div class="item">Chapter 1: Text D</div>
      </div>      
    </div>
  </div>
    <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 2</p>
    </div>
    <div class="faq-item-content">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 2: Text A</div>
        <div class="item">Chapter 2: Text B</div>
        <div class="item">Chapter 2: Text C</div>
        <div class="item">Chapter 2: Text D</div>
      </div>  
    </div>
  </div>
      <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 3</p>
    </div>
    <div class="faq-item-content">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 3: Text A</div>
        <div class="item">Chapter 3: Text B</div>
        <div class="item">Chapter 3: Text C</div>
        <div class="item">Chapter 3: Text D</div>
      </div>  
    </div>
  </div>
</div>

Answer 1

我花了一些时间来解决这个问题，但这应该是最终的解决方案。

$(document).ready(function() {
    //init the slider class
  $('.owl-carousel').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      autoHeight:true,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:1
          },
          1000:{
              items:1
          }
      }
  })


  var carousel = 0;
  var current = 0;
  var lastItem = 0;


//on click of a setup item do
$('.faq-item-title').click(function(){
  $(this).next().fadeToggle();
  lastItem = 0;
});



//open next chapter
$('.owl-carousel').on('changed.owl.carousel', function(e) {
  current = e.page.index;
  console.log('ist: ' + e.page.index);
  console.log('last: ' + lastItem);
  console.log('total: ' + (e.page.count + 1));
  console.log('--');
  if (e.page.index == 0 && lastItem  == e.page.count - 1){
    $(this).parent().fadeOut();
 //   $(this).parent().prev().removeClass('faq_active').addClass('faq_inactive');
    $(this).parent().parent().next().children().next().fadeIn();
  //  $(this).parent().parent().parent().next().children().children().removeClass('faq_inactive').addClass('faq_active');
    lastItem = 0;
  }
  lastItem = current;
    });
});

body {
 background: linear-gradient(to right, #33ccff 0%, #ff99cc 100%);
}

.faq-item {
  border: 1px solid gray;
  background: rgba(255,200,255,0.2);
  font-family: 'Comic Sans MS';
}

.faq-item-title {
  cursor: pointer;
  padding-left: 10px;
  user-select: none;
}

.faq-item-content {
  display: none;
  text-align: center;
  margin-bottom: 20px;
}

.displayBlock {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<div class="wrap">
  <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 1</p>
    </div>
    <div class="faq-item-content displayBlock">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 1: Text A</div>
        <div class="item">Chapter 1: Text B</div>
        <div class="item">Chapter 1: Text C</div>
        <div class="item">Chapter 1: Text D</div>
      </div>      
    </div>
  </div>
    <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 2</p>
    </div>
    <div class="faq-item-content">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 2: Text A</div>
        <div class="item">Chapter 2: Text B</div>
        <div class="item">Chapter 2: Text C</div>
        <div class="item">Chapter 2: Text D</div>
      </div>  
    </div>
  </div>
      <div class="faq-item">
    <div class="faq-item-title">
      <p>FAQ Item 3</p>
    </div>
    <div class="faq-item-content">
      <div class="owl-carousel owl-theme">
        <div class="item">Chapter 3: Text A</div>
        <div class="item">Chapter 3: Text B</div>
        <div class="item">Chapter 3: Text C</div>
        <div class="item">Chapter 3: Text D</div>
      </div>  
    </div>
  </div>
</div>

Owl-Carousel-2：FAQ-带滑块的项目 - 在章节之间跳过

Owl-Carousel-2: FAQ-Items with Sliders - Skip between chapters

html

javascript

css

jquery

owl-carousel-2