AHA Component Library

imageslider

The new AHA PDP Slider is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.

Desktop

View XD Design

HTML

<div className="aui-image-slider"> 
    <div className="aui-slider">
   <ul className='aui-slider-parent'>
      <li><img src='../../images/imgone.png' alt='gallary image one' /></li>
      <li ><img src='../../images/imgtwo.png' alt='gallary image two' /></li>
      <li><img src='../../images/imgone.png' alt='gallary image three' /></li>
   </ul>
 <button tabIndex="0" className="aui-left" aria-label='Previous Slider Image'></button>	
 <button tabIndex="0" className="aui-right" aria-label='Next Slider Image'></button>
</div>
<div className="aui-thumbnail-parent">
   <ul className='aui-thumbnail p-0'>
      <li tabIndex="0" className="p-2 thumbnail-li1"><img src='../../images/thumbnailone.png' alt='thumbnail image one' /></li>
      <li tabIndex="0" className="p-2"><img src='../../images/thumbnailtwo.png' alt='thumbnail image two' /></li>
      <li tabIndex="0" className="p-2"><img src='../../images/thumbnailone.png' alt='thumbnail image three'/></li> 
   </ul>	
   <div className="aui-activehigh-lights"></div>
</div>
</div>