
Card Heading
Welcome to GEM. It’s Macquarie University’s design system for digital products and experiences. It’s new, it’s exciting.
Learn more<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>
<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>
Explore our pathway options
YOU to the power of us
<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 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