Create your carousel however you like then render users within it using CB Online Module and one of its include modes or CB Content Module with substitutions.
it seems better to use cb list instead of online user module because cblist can use sort and filter option, i do this and it work for me maybe good for future users:
add this code to you page(via auto action or via template or each way):
CSS:
Code:
.swiper-custom-arrow {
display: flex;
justify-content: space-between;
font-size: 5em;
}
.cbUsersList {
overflow: hidden;
}
.swiper-button-disabled{
opacity: .35;
cursor: auto;
pointer-events: none;
}
JS:
Code:
form = jQuery('#adminForm');
table = jQuery('#cbUserTable');
table.attr('class', '');
table.addClass('swiper-wrapper');
children = table.children();
jQuery.each(children, function(i, val){jQuery(val).attr('class', '');jQuery(val).addClass('cbUserListRow_co');jQuery(val).addClass('swiper-slide');});
form.append('<div class="swiper-custom-arrow"><span class="swiper-button-prev1">‹</span><span class="swiper-button-next1">›</span></div>');
const swiper = new Swiper('#adminForm', {
loop: false,
slidesPerView: 1,
spaceBetween: 30,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next1',
prevEl: '.swiper-button-prev1',
},
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 5,
},
768: {
slidesPerView: 4,
spaceBetween: 5,
},
1024: {
slidesPerView: 5,
spaceBetween: 5,
},
},
});
After body(i use gantry5 maybe you use anyother template and modify code according your):
Code:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
picture of result: (it seems this forum has some bug that prevent upload picture)
also i can not suppose how to use CB content module to show user list. i can not find any subsitiution for show cblist (not cb list url). also this forum has some other bug that when i use [ c o de ][ / co de ] can not edit correctly and add some edit.
krileon
