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.