Clients Carousel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Create a Carousel Of The Client Logos
<div class = "col-lg-12 mb-4">
<div class = "wdpk-clients-carousel client-carousel">
<div class = "carousel-cell"><img src="/assets/images/logo1.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo2.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo3.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo4.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo5.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo6.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo7.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo8.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo9.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo10.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo11.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo12.png"/></div>
</div>
</div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery(".client-carousel").length !== 0)
{
let obj = {
draggable: true,
dragThreshold: 10, // dragging doesn't start until 10px moved
cellAlign: 'center',
freeScroll: false,
wrapAround: true,
groupCells: false, // Accepts Values in numbers eg. 2 format and boolean
autoPlay: 4000, // Accepts Values in 1000 format and boolean
pauseAutoPlayOnHover: true,
contain: true,
imagesLoaded: true,
prevNextButtons: false,
selector: '.client-carousel',
};
require(["app/shortcodes/wdpkCarousel"], function (e)
{
e.publicCall(obj);
});
}
});
Enable Group Scroll
<div class = "col-lg-12 mb-4">
<div class = "wdpk-clients-carousel client-carousel-group">
<div class = "carousel-cell"><img src="/assets/images/logo1.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo2.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo3.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo4.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo5.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo6.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo7.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo8.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo9.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo10.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo11.png"/></div>
<div class = "carousel-cell"><img src="/assets/images/logo12.png"/></div>
</div>
</div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery('.client-carousel-group').length !== 0)
{
let obj = {
draggable: true,
dragThreshold: 10, // dragging doesn't start until 10px moved
cellAlign: 'center',
freeScroll: false,
wrapAround: true,
groupCells: 3, // Accepts Values in numbers eg. 2 format and boolean
autoPlay: 4000, // Accepts Values in 1000 format and boolean
pauseAutoPlayOnHover: true,
contain: true,
imagesLoaded: true,
prevNextButtons: false,
selector: '.client-carousel-group',
};
require(['app/shortcodes/wdpkCarousel'], function (e)
{
e.publicCall(obj);
});
}
});
