Моя проблема
Итак, я слежу за учебным пособием по созданию одностраничного веб-сайта, и у меня есть раздел отзывов, где у меня есть этот предыдущий слайд и следующий -горка. Страница выглядит нормально, пока я не добавлю часть Glider JS. Стрелка вправо исчезает, когда я добавляю код, и появляется странная строка.
HTML Код
<section class="about-section">
<h2>About Us</h2>
<div class="section-content">
<div class="about-description">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fuga, dolorem?
Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim?
Tenetur, esse a. Quidem, deleniti provident.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Autem odio, ut ullam animi placeat natus magnam sapiente eius unde asperiores ducimus non quam eligendi,
nihil dolores aliquid suscipit ipsum similique.
</p>
</div>
<img src="images/circle_picture.png" alt="">
</div>
</section>
<!-- End of About Us Section -->
<section class="project-session">
<h2>Our Projects</h2>
<div class="projects-gallery">
<img src="images/picture (0).png" alt="">
<img src="images/picture (1).png" alt="">
<img src="images/picture (2).png" alt="">
<img src="images/picture (3).png" alt="">
<img src="images/picture (4).png" alt="">
<img src="images/picture (5).png" alt="">
</div>
<a href="#" class="btn blue">View All</a>
</section>
<!-- End of Projects Section -->
</div>
<section class="testimonials-section">
<div class="wrapper">
<h2>Testimonials</h2>
<div class="testimonials container">
<div class="testimonials">
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Darlene Richards,</strong> Amazon
</div>
</div>
<img src="images/testimonial1.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Peter Williams,</strong> Louis Vuitton
</div>
</div>
<img src="images/testimonial3.png" alt="">
</div>
</div>
<div class="testimonial">
<div class="slide-container">
<div class="content">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Fuga, dolorem? Soluta aperiam maxime nam ducimus ab fuga.
Libero, consequatur placeat! Explicabo aut labore enim? Tenetur, esse a.
Quidem, deleniti provident.
</p>
<div class="name">
<strong>Tara Green,</strong> Ferrari
</div>
</div>
<img src="images/testimonial2.png" alt="">
</div>
</div>
</div>
<span class="slider-prev">
<img src="images/left-arrow.svg" alt="">
</span>
<span class="slider-next">
<img src="images/right-arrow.svg" alt="">
</span>
</div>
</div>
</section>
<script src="glider.min.js"></script>
<script>
new Glider(document.querySelector(".testimonials"), {
slidesToShow: 1,
arrows: {
prev: '.slider-prev',
next: '.slider-next',
},
});
</script>
CSS Код
.slide-container {
display: flex;
justify-content: space-between;
width: 800px;
margin: 0 auto;
}
.slide-container .content {
padding: 8px 24px;
}
.testimonial .name {
background: var(--dark-color);
color: var(--light-color);
padding: 8px 24px;
display: inline-block;
margin-left: 16px;
}
.testimonials {
position: relative;
}
.slider-prev,
.slider-next {
position: absolute;
top: 68px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.06);
border-radius: 50%;
cursor: pointer;
}
.slider-next {
right: 0;
}
Перед добавлением планера js