Добавил слайдер-swiper на сайт, всю работу с ним закончил (помимо адаптива), но заметил что слайды накладываются друг на друга, хотя у других такого просто не происходит. Вот код:
const swiper = new Swiper(".swiper", {
effect: "fade",
loop: true,
pagination: {
el: ".swiper-pagination",
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
.slider{
background-color: #F6F8FA;
}
.swiper-slide{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 135px;
}
.slide__title{
font-family: Montserrat;
font-size: 40px;
line-height: 1.3;
max-width: 705px;
margin-bottom: 35px;
}
.slide__text{
max-width: 560px;
color: #777777;
}
.swiper-button-prev::after,
.swiper-button-next::after{
color: #333333;
}
.swiper-button__decor{
position: absolute;
display: inline-block;
height: 3px;
width: 30px;
background-color: #333333;
}
.swiper-button__decor-prev{
left: 5px;
}
.swiper-button__decor-next{
right: 5px;
}
.swiper-pagination-bullets{
width: initial !important;
padding-left: 135px;
}
.swiper-pagination-bullet{
width: 6px;
height: 6px;
}
.swiper-pagination-bullet-active{
background-color: #242121;
width: 10px;
height: 10px;
}
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@1,300&family=Montserrat:wght@300;700&family=Open+Sans:wght@300;400;600;700&family=Raleway:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<section class="slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h3 class="slide__title">
Then they show that show to the
people who make shows 1
</h3>
<p class="slide__text">
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
</p>
</div>
<div class="swiper-slide">
<h3 class="slide__title">
Then they show that show to the
people who make shows 2
</h3>
<p class="slide__text">
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
</p>
</div>
<div class="swiper-slide">
<h3 class="slide__title">
Then they show that show to the
people who make shows 3
</h3>
<p class="slide__text">
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
</p>
</div>
<div class="swiper-slide">
<h3 class="slide__title">
Then they show that show to the
people who make shows 4
</h3>
<p class="slide__text">
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
</p>
</div>
<div class="swiper-slide">
<h3 class="slide__title">
Then they show that show to the
people who make shows 5
</h3>
<p class="slide__text">
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
</p>
</div>
<div class="swiper-slide">
<h3 class="slide__title">
Then they show that show to the
people who make shows 6
</h3>
<p class="slide__text">
The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's.
</p>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev swiper-button">
<span class="swiper-button__decor swiper-button__decor-prev"></span>
</div>
<div class="swiper-button-next swiper-button">
<span class="swiper-button__decor swiper-button__decor-next"></span>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>