`I want to enhance my static HTML CSS website by incorporating a slider feature using JavaScript. Looking for guidance on the best approach.
I've attempted various tutorials but they weren't compatible with my layout or relied on Swiper JS.
When using Swiper JS, I encountered difficulties in styling the components, particularly with positioning, colors, and other aspects.
<section class="section-customers wrapper">
<div class="container caraseoul">
<div class="slide">
<img
src="./images/customers/ryan-hoffman.jpg"
alt="alexander"
class="customer-img"
/>
<blockquote class="testimonial">
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
excepturi sint sequi laborum, nostru,excepturi sint sequi
laborum, nostru,excepturi sint sequi laborum, nostru
</p>
<p class="testimonial-author">Ryan Hoffman</p>
<p class="testimonial-status">
<span>30 </span>kgs lost in 7 months
</p>
</blockquote>
</div>
<div class="slide">
<img
src="./images/customers/alexander.jpg"
alt="alexander"
class="customer-img"
/>
<blockquote class="testimonial">
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione
excepturi sint sequi laborum, nostru,excepturi sint sequi
laborum, nostru,excepturi sint sequi laborum, nostru
</p>
<p class="testimonial-author">Alexander Hamilton</p>
<p class="testimonial-status">
<span>10 </span>kgs lost in 2 months
</p>
</blockquote>
</div>
(more slides ...)
<button class="slider-btn slider-btn-right">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="btn-icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</button>
<button class="slider-btn slider-btn-left">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="btn-icon"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 19.5L8.25 12l7.5-7.5"
/>
</svg>
</button>
</div>
</section>
/* CUSTOM TESTIMONIAL SECTION CSS */
.section-customers {
padding: 9.6rem 0;
background-color: #fed2d2;
}
.customer-img {
max-width: 100%;
height: 10rem;
width: 10rem;
border-radius: 50%;
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.caraseoul {
display: flex;
gap: 4.8rem;
position: relative;
}
.testimonial {
color: black;
}
/* Styles for slides, testimonial text, author, status, and buttons */
`