1

I'm encountering issues with the slide animation when using a carousel tab that contains a form. If I embed a form within a tab, the tab does not slide in when the old tab slides out, rather it just appears as if z-index was changed. There's no slide in animation for the tab containing the form. With forms on each tab it becomes quite a mess. It seems to only be an issue in chrome.

Removing the form element seems to resolve the issue, but I do want the form so not much of a fix.

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 to highlight the problem

.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/

The order in which you select the tabs seems to affect when the issue occurs. If in my example JSFiddle, clik item 1, then item 2, then item 3 and back to item 1, you'll notice that item 1 just appears as if underneath item 3, there's no slide in. Clicking between item 1 and item 2 seem to work normally in that items slide both in and out at the same time.

Geedon
  • 11
  • 3
  • I can suggest to you to use a different slider because the bootstrap native carousel is too buggy. Try using swiper or owl carousel. – dwpu May 24 '19 at 12:30
  • If I have to replace it, I guess what I'm looking for is a tab control with a cool slide effect – Geedon May 24 '19 at 15:37

2 Answers2

0

Try This Code. It uses 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>

Tell me if it solved your issue or not.

trinaldi
  • 2,872
  • 2
  • 32
  • 37
Ankit
  • 64
  • 7
  • Thanks for your reply. Though I'm not against replacing the slider component if I have to due to a bug. However, its being used all over my application as an animated tab for forms rather than a picture animator. I only have this issue where the form element starts within the tab item so its actually only an issue on 1 page. If I swap out the carousel component, I'd need it to act as a 100% width with clickable tab like links at the top. Does this component do that? I couldn't see in anything similar the demos. – Geedon May 24 '19 at 14:54
  • It does. Kindly google owl carousel site. And you will find examples. Or you can also try Revolution Slider Instead. Kindly Upvote. – Ankit May 25 '19 at 06:00
0

So, I was unable to find a fix for the bootstrap carousel in the end and TBH I really just wanted tabs with some kind of animation so I went with Bootstrap tabs..

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

Geedon
  • 11
  • 3