Carousel

<section> <div class="swiper animate"> <div class="swiper-wrapper"> <!--slide--> <div class="swiper-slide"> <div class="swiper-grid"> <div class="swiper-image gradient"> <picture> <img class="top" src="/images/sliders/carousel-students-lg.jpg" alt="Carousel" /> </picture> </div> <div class="swiper-section"> <div class="content-area"> <div class="title"><span>Amet nisl purus in mollis nunc sed id semper risus</span></div> <a href="jsvascript:;" class="fau-button white">Learn More</a> </div> </div> </div> </div> <!--slide--> <div class="swiper-slide"> <div class="swiper-grid"> <div class="swiper-image gradient"> <picture> <img class="top" src="/images/sliders/carousel-grads-lg.jpg" alt="Carousel 2" /> </picture> </div> <div class="swiper-section"> <div class="content-area"> <div class="title"><span>Commodo odio aenean sed adipiscing diam donec</span></div> <a href="javascript:;" class="fau-button white">Learn More</a> </div> </div> </div> </div> <!--slide--> <div class="swiper-slide"> <div class="swiper-grid"> <div class="swiper-image gradient"> <picture> <img class="top" src="/images/sliders/carousel-eng-lg.jpg" alt="Carousel 3" /> </picture> </div> <div class="swiper-section"> <div class="content-area"> <div class="title"><span>Phasellus consectetur iaculis nunc ut sollicitudin</span></div> <a href="javascript:;" class="fau-button white">Learn More</a> </div> </div> </div> </div> </div> <div class="swiper-section"> <div class="swiper-control"> <div class="swiper-controls"> <div class="pagination"> </div> <div class="buttons"> <div class="button-prev"><span class="fau-icon text-white left border-0"></span></div> <div class="button-next"><span class="fau-icon text-white right border-0"></span></div> </div> </div> </div> </div> </div> </section>