<div class="catalog-item">
<div class="catalog-item-slider">Слайдер</div>
<button class="nav prev"></button>
<button class="nav next"></button>
</div>
document.querySelectorAll('.catalog-item').forEach(item => {
new Swiper(item.querySelector('.catalog-item-slider'), {
slidesPerView: "auto",
loop: true,
speed: 600,
navigation: {
nextEl: item.querySelector(".nav.next"),
prevEl: item.querySelector(".nav.prev"),
}
});
});
.reviews__slider .reviews__slide {
height: auto;
display: flex;
}
.reviews__item{
box-shadow: -1px 2px 15px 0px rgba(30, 35, 66, 0.15);
border-radius: 10px;
padding: 25px 25px 28px 25px;
margin: 15px;
display: flex;
flex-direction: column;
position: relative;
margin: 15px;
/* height: 100%; */
}
.reviews__slider .reviews__slide
потому что в кодпене стили слайдера перебивают. У себя просто подключите сначала стили слайдера, потом свои, и можно будет обойтись без повышенной специфичности. <div class="section">
<div class="container">
<div class="slider">
</div>
</div>
</div>
.section {
overflow: hidden;
}
.container {
width: 1000px;
margin: auto;
padding: 10px 0;
background: green;
}
.slider {
height: 100px;
background:red;
width: calc(50% + 50vw);
}
import Swiper from 'swiper';
import '../node_modules/swiper/dist/css/swiper.css';
'swiper.css' : 'node_modules/swiper/dist/css/swiper.css'
import 'swiper.css';