Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
Learn moreCarousel Styles
Carousel - single slide with fade effect
<div class="carousel" data-effect="fade">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero">
<div class="hero__image" style="background-image: url(../../static/images/hero-homepage.jpg)"></div>
</div>
</div>
<div class="swiper-slide">
<div class="hero">
<div class="hero__image" style="background-image: url(../../static/images/hero-placeholder.jpg)"></div>
</div>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination swiper-pagination--dark"></div>
</div>
</div>
Carousel - multi slide with slide effect
<div class="carousel" data-slides-per-view='{"small":1,"medium":2,"large":3,"maximum":4}' data-slides-offset='{"small":0,"medium":100,"large":150,"maximum":150}' data-space-between='{"small":10,"medium":20,,"maximum":30}'>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<article class="card full-height">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="../../static/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.</p>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
</div>
<div class="swiper-slide">
<article class="card full-height">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="../../static/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.</p>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
</div>
<div class="swiper-slide">
<article class="card full-height">
<a href="#LINK" class="card__link">
<div class="card__img">
<img src="../../static/images/card-placeholder.jpg" alt="sample alt text">
</div>
<div class="card__body">
<i class="icon icon--shard"></i>
<h3>Card Heading</h3>
<p>Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.</p>
<span class="link--cta">Learn more</span>
</div>
</a>
</article>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination swiper-pagination--dark"></div>
</div>
</div>
Carousel with Text Hero
<section class="hero">
<div class="carousel" data-effect="fade">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="hero__image" style="background-image: url(../../static/images/hero-homepage.jpg)">
<div class="wrap wrap--padded">
<div class="grid">
<div class="grid__col grid__col--12 grid__col-md--9">
<div class="hero__body">
<p class="hero__subheading">Explore our pathway options</p>
<h1 class="h1">There are other ways to get your dream degree</h1>
<div class="swiper-pagination swiper-pagination--dark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hero__image"
style="background-image: url(../../static/images/hero-placeholder.jpg)">
<div class="wrap wrap--padded">
<div class="grid">
<div class="grid__col grid__col--12 grid__col-md--9">
<div class="hero__body">
<p class="hero__subheading">YOU to the power of us</p>
<h1 class="h1">Welcome to Macquarie University</h1>
<div class="swiper-pagination swiper-pagination--dark"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Carousel Documentation
Use
Carousel uses the swiper slider - https://idangero.us
To hide arrows and pagination remove html from slider
To set the number of slides per breakpoint set object in data-slides-per-view eg {"small":1,"medium":2,"large":3,"maximum":5}. The defaut is one slide if nothing is declared
To set the slide effect set data-effect="fade". The default is slide, Options: fade/slide
To offset(px) the slides per breakpoint set object in data-slides-offset eg {"small":50,"medium":100,"large":150,"maximum":160}. The defaut is 0px if nothing is declared
To set the space between slide(px) per breakpoint set object in data-space-between eg {"small":10,"medium":20,"large":30,"maximum":30}. The defaut is 30px nothing if is declared
To make the pagination points grey instead of white add the modifing class swiper-pagination--dark