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.
Four Logos
Lorem Ipsum is simply dummy text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="common-slider manual-slider">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem Ipsum is simply dummy text</h3>
<p class="para--two">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad</p>
</div>
<div class="logo-container four-logos">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo"/>
</a>
</div>
</div>
</div>
</section>More Than Four Logos
Lorem Ipsum is simply dummy text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
<section class="common-slider manual-slider">
<div class="container">
<div class="text--center">
<h3 class="large-text-3">Lorem Ipsum is simply dummy text</h3>
<p class="para--two">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad
</p>
</div>
<div class="slider">
<div class="slider__list">
<div class="slider__track">
<div class="slider__slide slider__slide-active">
<div class="display--flex logo-wrapper">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"
/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"
/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"
/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo"
/>
</a>
</div>
</div>
<div class="slider__slide">
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="isb logo"
/>
</a>
<a href="#" class="logo-parent">
<img
class="logo" src="./assets/component-images/240*80px.svg" alt="kellogg logo"
/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="mit logo"
/>
</a>
<a href="#" class="logo-parent">
<img class="logo" src="./assets/component-images/240*80px.svg" alt="IIMC logo"
/>
</a>
</div>
</div>
<div class="slider__action">
<button data-testid="prev-btn" class="slider__arrow slider__prev blueprint-icon icon-chevron_left" aria-label="Previous slide" role="button" tabindex="0" aria-controls="slider-list"></button>
<div class="slider__dots">
<button class="slider__active bg-accent" aria-current="true" role="button" tabindex="0" aria-controls="slider-list" ></button>
<button class="" role="button" tabindex="0" aria-controls="slider-list"></button>
</div>
<button data-testid="next-btn" class="slider__arrow slider__next blueprint-icon icon-chevron_right"
aria-label="Next slide" role="button" tabindex="0" aria-controls="slider-list"></button>
</div>
</div>
</div>
</div>
</section>