Craousel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Mobile Responsive Draggable Carousel
Circle Counters With All The Possible Options You Can Think Of
<div class = "main-carousel">
<div class = "carousel-cell"><img src="/assets/images/carousel-1.jpg" alt = "Carousel Image 1"/></div>
<div class = "carousel-cell"><img src="/assets/images/carousel-2.jpg" alt = "Carousel Image 2"/></div>
<div class = "carousel-cell"><img src="/assets/images/carousel-3.jpg" alt = "Carousel Image 3"/></div>
<div class = "carousel-cell"><img src="/assets/images/carousel-4.jpg" alt = "Carousel Image 4"/></div>
<div class = "carousel-cell"><img src="/assets/images/carousel-5.jpg" alt = "Carousel Image 5"/></div>
<div class = "carousel-cell"><img src="/assets/images/carousel-6.jpg" alt = "Carousel Image 6"/></div>
</div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery(".main-carousel").length !== 0)
{
let obj = {
draggable: true,
dragThreshold: 10, // dragging doesn't start until 10px moved
cellAlign: 'center',
freeScroll: false,
wrapAround: true,
adaptiveHeight: true,
groupCells: 1, // Accepts Values in numbers eg. 2 format and boolean
autoPlay: false, // Accepts Values in 1000 format and boolean
pauseAutoPlayOnHover: false,
contain: true,
imagesLoaded: true,
prevNextButtons: true,
selector: '.main-carousel',
};
require(["app/shortcodes/wdpkCarousel"], function (e)
{
e.publicCall(obj);
});
}
});
With Grouped Cells and Autoplay
Group the images of the Carousel and they will always scroll together. You can define the number of images that you want to group together
<div class = "col-lg-12 mb-5">
<div class = "grouped-carousel">
<div class = "carousel-cell">
<img src = "/assets/images/carousel-sq-1.jpg" style = "width:250px; height:250px;">
</div>
<div class = "carousel-cell">
<img src = "/assets/images/carousel-sq-2.jpg" style = "width:250px; height:250px;">
</div>
<div class = "carousel-cell">
<img src = "/assets/images/carousel-sq-3.jpg" style = "width:250px; height:250px;">
</div>
<div class = "carousel-cell">
<img src = "/assets/images/carousel-sq-4.jpg" style = "width:250px; height:250px;">
</div>
<div class = "carousel-cell">
<img src = "/assets/images/carousel-sq-5.jpg" style = "width:250px; height:250px;">
</div>
<div class = "carousel-cell">
<img src = "/assets/images/carousel-sq-6.jpg" style = "width:250px; height:250px;">
</div>
</div>
</div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery(".main-carousel").length !== 0)
{
let obj2 = {
draggable: true,
dragThreshold: 10, // dragging doesn't start until 10px moved
cellAlign: 'center',
freeScroll: true,
wrapAround: false,
adaptiveHeight: true,
groupCells: 2, // Accepts Values in numbers eg. 2 format and boolean
autoPlay: true, // Accepts Values in 1000 format and boolean
pauseAutoPlayOnHover: false,
contain: false,
imagesLoaded: true,
prevNextButtons: true,
selector: '.grouped-carousel',
};
require(["app/shortcodes/wdpkCarousel"], function (e)
{
e.publicCall(obj2);
});
}
});
