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.