Carousel
<div class="home-page-header-slider--outer-wrapper">
<div class="home-page-header-slider"
data-slick="{"fade": false, "speed": 500}">
<div class="header-slider__slide">
<div class="header-slider__img">
<picture>
<source media="(max-width: 640px)" srcset="/images/advising-sm.jpg"/>
<source media="(max-width: 1400px)" srcset="/images/advising-md.jpg"/>
<img src="/images/advising-lg.jpg" alt="Carousel 1"/>
</picture>
</div>
<div class="header-slider__content">
<div class="title">Amet nisl purus in mollis nunc sed id semper risus</div>
<div class="header-slider__content__desc">
<a href="javascript:;" class="button">Learn More</a>
</div>
</div>
</div>
<div class="header-slider__slide">
<div class="header-slider__img">
<picture>
<source media="(max-width: 640px)" srcset="/images/campus-rec-sm.jpg"/>
<source media="(max-width: 1400px)" srcset="/images/campus-rec-md.jpg"/>
<img src="/images/campus-rec-lg.jpg" alt="Carousel 2"/>
</picture>
</div>
<div class="header-slider__content">
<div class="title">Commodo odio aenean sed adipiscing diam donec</div>
<div class="header-slider__content__desc">
<a href="javascript:;" class="button">Learn More</a>
</div>
</div>
</div>
<div class="header-slider__slide">
<div class="header-slider__img">
<picture>
<source media="(max-width: 640px)" srcset="/images/sliders/jlsi-sm.jpg"/>
<source media="(max-width: 1400px)" srcset="/images/sliders/jlsi-md.jpg"/>
<img src="/images/sliders/jlsi-lg.jpg" alt="Carousel 3"/>
</picture>
</div>
<div class="header-slider__content">
<div class="title">Phasellus consectetur iaculis nunc ut sollicitudin</div>
<div class="header-slider__content__desc">
<a href="javascript:;" class="button">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<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">Amet nisl purus in mollis nunc sed id semper risus</div>
<div class="action-button">
<a href="jsvascript:;" class="button transparent">Learn More</a>
</div>
</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">Commodo odio aenean sed adipiscing diam donec</div>
<div class="action-button">
<a href="javascript:;" class="button transparent">Learn More</a>
</div>
</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">Phasellus consectetur iaculis nunc ut sollicitudin</div>
<div class="action-button">
<a href="javascript:;" class="button transparent">Learn More</a>
</div>
</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>
Amet nisl purus in mollis nunc sed id semper risus
Commodo odio aenean sed adipiscing diam donec
Phasellus consectetur iaculis nunc ut sollicitudin
<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/stadium-lg.jpg" alt="Carousel" />
</picture>
</div>
<div class="swiper-section">
<div class="content-area">
<div class="title text-center">Amet nisl purus in mollis nunc sed id semper risus</div>
<div class="action-button justify-content-center">
<a href="jsvascript:;" class="button transparent">Learn More</a>
</div>
</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/undergrad-research-lg.jpg" alt="Carousel 2" />
</picture>
</div>
<div class="swiper-section">
<div class="content-area">
<div class="title text-center">Commodo odio aenean sed adipiscing diam donec</div>
<div class="action-button justify-content-center">
<a href="javascript:;" class="button transparent">Learn More</a>
</div>
</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/hr-lg.jpg" alt="Carousel 3" />
</picture>
</div>
<div class="swiper-section">
<div class="content-area">
<div class="title text-center">Phasellus consectetur iaculis nunc ut sollicitudin</div>
<div class="action-button justify-content-center">
<a href="javascript:;" class="button transparent">Learn More</a>
</div>
</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>
Amet nisl purus in mollis nunc sed id semper risus
Commodo odio aenean sed adipiscing diam donec
Phasellus consectetur iaculis nunc ut sollicitudin