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

Question

Im building a FAQ section where every FAQ-item has its own carousel in it. My main goal is that it skips to the next chapter when going forward after the last slide (back would be nice too later).

I have worked on a solution which still has a bug in it. When moving directly to the last slide and then press forward, its starting at the first slide again instead of moving to the next chapter.

Could anyone help me or has an idea why?

https://jsfiddle.net/ph3m0uno/35/

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

I had a while to solve this but this should be the final solution.

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