An Image Slider (or Carousel) allows users to navigate through multiple images or content blocks. It's commonly used for testimonials, featured content, or product showcases.
<div class="container">
<div class="slider slider-swipe">
<div class="slider__action variant-1">
<h3 class="large-text-3">Featured slides</h3>
<div class="btn-group"><button data-testid="prev-btn"
class="slider__arrow slider__prev blueprint-icon icon-chevron_left" data-track=""
aria-label="Previous slide" role="button" tabindex="0" aria-controls="slider-list"></button><button
data-testid="next-btn" class="slider__arrow slider__next blueprint-icon icon-chevron_right"
data-track="" aria-label="Next slide" role="button" tabindex="0"
aria-controls="slider-list"></button>
</div>
</div>
<div>
<div id="slider-list" class="slider__list">
<div class="slider__track" style="transform: translate3d(0px, 0px, 0px);">
<div class="slider__slide" style="width: 1188px; visibility: visible;">
<div class="slider__slide-wrapper"><img src="./assets/component-images/240*80px.svg">
</div>
<div class="slider__slide-wrapper"><img src="./assets/component-images/240*80px.svg">
</div>
<div class="slider__slide-wrapper"><img src="./assets/component-images/240*80px.svg">
</div>
</div>
<div class="slider__slide" style="width: 1188px; visibility: visible;">
<div class="slider__slide-wrapper"><img src="./assets/component-images/240*80px.svg">
</div>
<div class="slider__slide-wrapper"><img src="./assets/component-images/240*80px.svg">
</div>
<div class="slider__slide-wrapper"><img src="./assets/component-images/240*80px.svg">
</div>
</div>
<div class="slider__slide" style="width: 396px; visibility: visible;">
<div class="slider__slide-wrapper"><img src="./assets/component-images/240*80px.svg">
</div>
</div>
</div>
</div>
</div>
</div>
</div>