Question

使用包含表单的轮播标签时，幻灯片动画出现问题。如果我在选项卡中嵌入表单，则当旧选项卡滑出时，该选项卡不会滑入，而是看起来就像更改了z-index一样。包含表单的选项卡的动画没有幻灯片。每个选项卡上的表单都变得一团糟。看来这只是Chrome中的问题。

删除form元素似乎可以解决问题，但是我确实希望表单没有太大的修复空间。

HTML

<div class="carousel slide" data-interval="false" data-ride="slide" id="search_carousel">
  <ul class="nav nav-pills nav-justified">
    <li class="" data-slide-to="0" data-target="#search_carousel">
      <a href="#">Item 1</a>
    </li>
    <li data-slide-to="1" data-target="#search_carousel" class="">
      <a href="#">Item 2</a>
    </li>
    <li data-slide-to="2" data-target="#search_carousel">
      <a href="#">Item 3</a>
    </li>
  </ul>
  <div class="carousel-inner">
    <div class="item" data-id="0">
      <div class="row">
        <form class="form-horizontal" id="search_members_form" accept-charset="UTF-8" method="post">
          <p>
            p>Nam vitae cursus diam, vitae condimentum nulla. Suspendisse pellentesque ligula quis orci varius ultricies. Nam sit amet finibus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in neque nec dolor suscipit luctus quis ut mi.
            Sed nisl turpis, varius vitae pulvinar et, sagittis vitae nisi. Aenean tristique euismod ullamcorper. Fusce sed nisl at sem molestie vehicula. Nullam ipsum nunc, pretium ac rhoncus et, pharetra vel lacus. Fusce dui diam, aliquam
          </p>
        </form>
      </div>
    </div>
    <div class="item" data-id="1">
      <div class="row">
        <div class="inner-stuff">
          <p>Nam vitae cursus diam, vitae condimentum nulla. Suspendisse pellentesque ligula quis orci varius ultricies. Nam sit amet finibus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in neque nec dolor suscipit luctus quis
            ut mi. Sed nisl turpis, varius vitae pulvinar et, sagittis vitae nisi. Aenean tristique euismod ullamcorper. Fusce sed nisl at sem molestie vehicula. Nullam ipsum nunc, pretium ac rhoncus et, pharetra vel lacus. Fusce dui diam, aliquam et
            est cursus, lobortis aliquam justo. Fusce nec diam magna. In nec dictum ex. Vivamus mattis interdum quam sed accumsan. Proin vestibulum, orci tincidunt scelerisque condimentum, magna nisi egestas est, ut posuere ipsum ante ornare dui. Duis
            eget ipsum turpis.</p>
        </div>
      </div>
    </div>
    <div class="item active" data-id="2">

      <div class="row">

        <div class="inner-stuff">
          <p>Vivamus laoreet lobortis quam, volutpat blandit lacus ornare egestas. Maecenas in tincidunt risus. Nunc pulvinar, ex nec lobortis commodo, turpis leo cursus metus, a molestie sem mauris in arcu. Quisque laoreet arcu enim, quis feugiat nisl elementum
            non. Etiam maximus at mi id dignissim. Ut fringilla metus vel nisi imperdiet, vel porttitor enim pellentesque. Duis neque felis, pharetra a ante at, bibendum tristique arcu. Praesent a lectus et sem blandit vulputate.</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS突出显示问题

.carousel-inner {
  /*just incase the flash (style above) comes back*/
  background: #000;
}

.inner-stuff {
  margin: 0 10px;
  height: 200px;
  background-color: #ccc;
  border: 1px solid blue;
}

http://jsfiddle.net/geedon/bv8d01mh/30/

问题发生时，选择选项卡的顺序似乎会受到影响。如果在我的示例JSFiddle中，依次单击项目1，项目2，项目3和项目1，您会注意到项目1就像项目3下方一样出现，没有滑动。单击项目1和项目2之间的似乎项目可以同时滑入和滑出正常工作。

Answer 1

尝试此代码。它使用Owl Carousel。

$('.owl-carousel').owlCarousel({
  loop: true,
  margin: 10,
  responsiveClass: true,
  responsive: {
    0: {
      items: 1,
      nav: true
    },
    600: {
      items: 3,
      nav: false
    },
    1000: {
      items: 5,
      nav: true,
      loop: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

告诉我是否解决了您的问题。

Answer 2

因此，我最终找不到引导引导轮的修复程序，而TBH我真的只是想要带有某种动画的选项卡，所以我选择了Bootstrap选项卡。

https://getbootstrap.com/docs/4.0/components/navs/#tabs

包含表单时的Boostrap Carousel幻灯片问题（Chrome问题）

2 个答案: