Exploring the creation of a FAQ section with individual carousels for each item. My primary objective is for the carousel to transition to the next chapter when advancing beyond the last slide (backwards navigation would be a future enhancement).
I've been working on a solution, but there seems to be a persistent bug. When jumping directly to the final slide and then proceeding forward, it restarts at the initial slide rather than progressing to the next chapter.
If anyone could provide assistance or insight into this issue, it would be greatly appreciated.
$(document).ready(function() {
//initialize 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>