Слайд Boostrap Carousel, содержащий форму (проблема Chrome) - PullRequest
Новая
       23

Слайд Boostrap Carousel, содержащий форму (проблема Chrome)

1 голос
/ 24 мая 2019

Возникают проблемы с анимацией слайдов при использовании вкладки карусели, содержащей форму. Если я встраиваю форму во вкладку, вкладка не выдвигается, когда старая вкладка выдвигается, скорее это просто выглядит так, как будто z-index был изменен. Там нет слайдов в анимации для вкладки, содержащей форму. С формами на каждой вкладке это становится беспорядком. Кажется, проблема только в Chrome.

Удаление элемента формы, похоже, решает проблему, но я действительно хочу, чтобы форма не слишком исправлялась.

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 Кажется, что они нормально работают, когда элементы скользят как внутрь, так и наружу.

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

Итак, мне не удалось найти исправление для карусели начальной загрузки и TBH. Мне просто нужны вкладки с какой-то анимацией, поэтому я выбрал вкладки Bootstrap ..

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

0 голосов
/ 24 мая 2019

Попробуйте этот код. Используется Сова Карусель. 

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

Скажите, если это решило вашу проблему или нет.

...