Carousel 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