Top Arrow


Slider


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.


Top Arrows Slider

Featured slides

<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>