У меня есть контейнер с вертикально прокручиваемым слайдом, и он отлично работает. Проблема начинается, когда я добавляю кнопку, которая отображает контейнер после того, как я установил отображение none при загрузке страницы для всего ...

0
anon10023108 9 Апр 2021 в 23:43

1 ответ

Лучший ответ

Ваш элемент не отображается, поэтому все, что вычисляет прокрутку, должно быть не сработало, поскольку элемент не отображается. Я изменил его, чтобы не использовать отображение, а использовать видимость в сочетании с событием указателя

CSS добавлен

.con:not(.active) {
  visibility: hidden;
  pointer-events: none;
}

Функция "Показать скрытие" была изменена

var swiper = new Swiper('.swiperCon1', {
  direction: 'vertical',
  slidesPerView: 2,
  spaceBetween: 5,
  scrollbar: {
    el: 'Scroll1',
    hide: true,
  },
  mousewheel: {
    invert: false,
    forceToAxis: true,
  },
});

function unhide() {
  var x = document.getElementById("con");
  x.classList.toggle("active");
}
.con {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85%;
  height: 45%;
  background-color: black;
  position: absolute;
  top: 6%;
  left: 5%;
  z-index: 1;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  border: 2px solid;
  padding: 0%;
}
.con:not(.active) {
  visibility: hidden;
  pointer-events: none;

}
.row-con {
  height: 100%;
  width: 100%;
}

.col {
  height: 100%;
}

.col-con-1 {
  position: relative;
  background-color: grey;
  border-right: 2px solid red;
}

.col-con-2 {
  position: relative;
  background-color: grey;
  border-right: 2px solid red;
}

.col-con-3 {
  background-color: green;
}

.swiperCon1 {
  height: 100%;
  width: 100%;
}

.swiperWrap1 .swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: black;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

  <script src="../package/swiper-bundle.min.js"></script>



</head>

<body>
  <button onclick="unhide()">Unhide</button>
  <div class="container border-primary con" id="con">
    <div class="row row-con">
      <div class="col col-con-1">
        <div class="swiper-container swiperCon1">
          <div class="swiper-wrapper swiperWrap1">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
          </div>
          <!-- Add Scrollbar -->
          <div class="swiper-scrollbar Scroll1" style="background-color: grey; right: 0%;"></div>
        </div>
      </div>
      <div class="col col-con-2">
        two of three columns
      </div>
      <div class="col col-con-3">
        three of three columns
      </div>
    </div>
  </div>




</body>

</html>
1
Huangism 9 Апр 2021 в 20:54