文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Owl-Carousel-2:常见问题解答-带滑块的项目-跳过章节

问Owl-Carousel-2:常见问题解答-带滑块的项目-跳过章节
EN

Stack Overflow用户
提问于 2021-10-05 09:10:22
回答 1查看 40关注 0票数 0

我正在建立一个常见问题部分，其中每个常见问题项目都有自己的旋转木马在它。我的主要目标是在最后一张幻灯片之后跳到下一章(后退也不错)。

我一直致力于一个解决方案，但它仍然有一个bug。当直接移动到最后一张幻灯片，然后按forward时，它将再次从第一张幻灯片开始，而不是移动到下一章。

有没有人能帮我，或者知道为什么？

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

​

代码语言：javascript
复制
$(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;
    });
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

css
owl-carousel-2
javascript
html
jquery
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-10-12 08:48:41

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

​

代码语言：javascript
复制
$(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;
    });
});
代码语言：javascript
复制
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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69447738

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档