Выпадающая секция в карточке swiper js

Рейтинг: 0Ответов: 1Опубликовано: 27.02.2023

Я хочу сделать выпадающее поле при наведении на карточку. Но столкнулся с тем, что поля в .container куда-то делись. Как я понял, тут нужно играться со свойством overflow

Подскажите, пожалуйста, буду благодарен

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест слайдера</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

</head>
<body>
    
 <div class="container">
   <div class="swiper">
  <div class="swiper-wrapper" style="display: flex; align-items: stretch;">
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара Название товара Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Placeat voluptate modi quod labore architecto deserunt excepturi facere, sit alias sunt, accusantium quidem ullam, asperiores atque enim, eius totam reiciendis est?</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара</p>
     <div class="hidden-wrap">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores quos vero sapiente corporis possimus, illum, ducimus laudantium, voluptas, ipsa maxime enim provident nihil. Maiores eum qui tempore, quaerat ad quo.
      Sequi inventore odit in sint beatae asperiores iste sed, esse ipsam laboriosam repellendus. Totam, vitae. Quibusdam, aliquam ratione unde veritatis officiis in! Magni excepturi quas ducimus tempora alias obcaecati eos.</p>
    </div>
    </div>
   
  </div>
</div>
 </div> 


<h2 style="text-align: center; font-size: 26px; padding: 50px 0px;">Абсолютно левый заголовок</h2>

<div class="container">
  <div class="swiper">
  <div class="swiper-wrapper" style="display: flex; align-items: stretch;">
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара Название товара Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Placeat voluptate modi quod labore architecto deserunt excepturi facere, sit alias sunt, accusantium quidem ullam, asperiores atque enim, eius totam reiciendis est?</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара</p>
     <div class="hidden-wrap">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores quos vero sapiente corporis possimus, illum, ducimus laudantium, voluptas, ipsa maxime enim provident nihil. Maiores eum qui tempore, quaerat ad quo.
      Sequi inventore odit in sint beatae asperiores iste sed, esse ipsam laboriosam repellendus. Totam, vitae. Quibusdam, aliquam ratione unde veritatis officiis in! Magni excepturi quas ducimus tempora alias obcaecati eos.</p>
    </div>
    </div>
   
  </div>
</div>
</div>




<style>
.myslide {
        background-color: green;
        height: auto;
    }

    body {
        overflow-x: hidden;
    }

    .myslide .hidden-wrap {
        display: none;
        background-color: red;
        height: auto;
        z-index: 1;
        position: relative;
    }

    .myslide:hover .hidden-wrap {
        display: block;
        z-index: 999;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        box-shadow: 0 0 20px rgb(0 0 0 / 20%);
        background-color: #fff;
        padding-right: inherit;
        padding-left: inherit;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .swiper {
        overflow: unset!important;
    }

</style>



<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>  
<script>
    


   var swiper = new Swiper(".swiper", {
        slidesPerView: 2,
        loop: true,
        spaceBetween: 10,
         breakpoints: {
          576: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 40,
          }
        },
    
        
      });

</script>
</body>
</html>
css javascript html swiper.js bootstrap
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Если я вас правильно понял, вы ставите overflow и выпадашка исчезает.
Не знаю насколько это правильно, но я так решаю проблему)).

body {
  overflow-x: hidden; 
}
.container {
  position: relative;
}
.container:before, .container:after {
  content: '';
  position: absolute;
  top: 0;
  bottom:0;
  background: white;
  display: block;
  width: 5000px;
  height: 100%;
  z-index: 100;
}
.container:before {
  left: 100%;
}
.container:after {
  right: 100%;
}
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тест слайдера</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

</head>
<body>
    
 <div class="container">
   <div class="swiper">
  <div class="swiper-wrapper" style="display: flex; align-items: stretch;">
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара Название товара Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Placeat voluptate modi quod labore architecto deserunt excepturi facere, sit alias sunt, accusantium quidem ullam, asperiores atque enim, eius totam reiciendis est?</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара</p>
     <div class="hidden-wrap">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores quos vero sapiente corporis possimus, illum, ducimus laudantium, voluptas, ipsa maxime enim provident nihil. Maiores eum qui tempore, quaerat ad quo.
      Sequi inventore odit in sint beatae asperiores iste sed, esse ipsam laboriosam repellendus. Totam, vitae. Quibusdam, aliquam ratione unde veritatis officiis in! Magni excepturi quas ducimus tempora alias obcaecati eos.</p>
    </div>
    </div>
   
  </div>
</div>
 </div> 


<h2 style="text-align: center; font-size: 26px; padding: 50px 0px;">Абсолютно левый заголовок</h2>

<div class="container">
  <div class="swiper">
  <div class="swiper-wrapper" style="display: flex; align-items: stretch;">
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара Название товара Название товара</p>
    <div class="hidden-wrap">
      <p>Тут некая инфа Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Placeat voluptate modi quod labore architecto deserunt excepturi facere, sit alias sunt, accusantium quidem ullam, asperiores atque enim, eius totam reiciendis est?</p>
    </div>
    </div>
    
    <div class="swiper-slide myslide" style="display: flex; align-items: stretch; flex-direction: column;"><img src="https://novgodent.pro/bitrix/templates/nd-3.0/img/product.jpg" style="width: 100%;" alt="">
    <p>Название товара Название товара</p>
     <div class="hidden-wrap">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores quos vero sapiente corporis possimus, illum, ducimus laudantium, voluptas, ipsa maxime enim provident nihil. Maiores eum qui tempore, quaerat ad quo.
      Sequi inventore odit in sint beatae asperiores iste sed, esse ipsam laboriosam repellendus. Totam, vitae. Quibusdam, aliquam ratione unde veritatis officiis in! Magni excepturi quas ducimus tempora alias obcaecati eos.</p>
    </div>
    </div>
   
  </div>
</div>
</div>




<style>
.myslide {
        background-color: green;
        height: auto;
    }

    body {
        overflow-x: hidden;
    }

    .myslide .hidden-wrap {
        display: none;
        background-color: red;
        height: auto;
        z-index: 1;
        position: relative;
    }

    .myslide:hover .hidden-wrap {
        display: block;
        z-index: 999;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        box-shadow: 0 0 20px rgb(0 0 0 / 20%);
        background-color: #fff;
        padding-right: inherit;
        padding-left: inherit;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .swiper {
        overflow: unset!important;
    }

</style>



<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>  
<script>
    


   var swiper = new Swiper(".swiper", {
        slidesPerView: 2,
        loop: true,
        spaceBetween: 10,
         breakpoints: {
          576: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
          },
          1024: {
            slidesPerView: 4,
            spaceBetween: 40,
          }
        },
    
        
      });

</script>
</body>
</html>