Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 2)

Card slider

Card slider

The card slider loads the card component in the sliders and is a modern touch slider to bring the best experience for the end-user.

Code


<script src="swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper('{{ ID }}', {
        slidesPerView: 'auto',
        spaceBetween: 18, // the space between the cards e.g.18px
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        keyboard: {
            enabled: true,
        },
    });


    // set up the Equal height on the swiper-slide div 
    $(document).ready(function(){
        var highestBox = 0;
        $('.swiper-slide').each(function(){  
            if($(this).height() > highestBox){  
                highestBox = $(this).height();  
            }
        });    
        $('.swiper-slide').height(highestBox);

        // Add the custom class 'reset' to adjust the slider layout
        if($('{{ ID }} .swiper-button-prev') && $('{{ ID }} .swiper-button-next').hasClass('swiper-button-disabled')) {
            $('{{ ID }}').addClass('reset');
        }    
    });
</script>   

<div class="cui swiper-container {{ swiper-slide-1 | swiper-slide-2 | swiper-slide-3 | swiper-slide-4 }} {{ reset }} " id="{{ ID }}">

    <!-- Add next and prev arrows -->
    <div class="swiper-button-container">
        <div class="swiper-button-next cui btn-md utility-btn-solid"></div>
        <div class="swiper-button-prev cui btn-md utility-btn-solid"></div>
    </div>

    <div class="swiper-button-container">
        <div class="swiper-button-next cui btn-md utility-btn-solid"></div>
        <div class="swiper-button-prev cui btn-md utility-btn-solid"></div>
    </div>

    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <button class="cui card">
                ...
            </button>
        </div>
        <div class="swiper-slide">
            <button class="cui card">
                ...
            </button>
        </div>
        <div class="swiper-slide">
            <button class="cui card">
                ...
            </button>
        </div>                             
    </div>

    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
</div>

Usage

General guidelines

Please DO
  • Choose anĀ appropriate number of cards for the set that won't overwhelm the user with too many choices. Less is more.
  • Try starting with a maximum number of cards that is no more than double what you're selecting to display. And not less than the number to display +1.
  • Use titles in the cards that describe the content in plain language to make a selection by the user easier.
Please DON’T

Overwhelm the user with an excessive number of choices by adding a large number of cards in a set. Check more details on Hick's Law.