<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<div class="mt-5">
<h1 class="text-center">Jquery Responsive Multi Item Carousel</h1>
<div class="container mt-5">
<!-- <div class="gallery" id="image-gallery square"></div> -->
<div class=" d-flex mb-3">
<div class="widget" style="max-width: 1200px; width:100%;">
<h5 class="title text-center pt-2">Filter by Category</h5>
<div class="retailer-category-section-inner initial owl-carousel owl-theme owl-responsive-600 owl-loaded"
data-was-processed="true">
<div class="row">
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel"
data-interval="1000">
<div class="MultiCarousel-inner">
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
<div class="item">
<div class=" category-new">
<img class="image-gallery square" src="assets/no-image.jpg" alt="name">
<p class="name p-style">
</p>
</div>
</div>
</div>
<button class="btn btn-color leftLst">
<i class="fa fa-arrow-left"></i> </button>
<button class="btn btn-color rightLst"><i class="fa fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
</div>
*,
::after,
::before {
box-sizing: border-box;
}
hr {
margin: 1rem 0;
color: inherit;
background-color: currentColor;
border: 0;
opacity: 0.25;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
.h1,
h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
.h1,
h1 {
font-size: 2.5rem;
}
}
.h2,
h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
.h2,
h2 {
font-size: 2rem;
}
}
.h3,
h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
.h3,
h3 {
font-size: 1.75rem;
}
}
.h4,
h4 {
font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
.h4,
h4 {
font-size: 1.5rem;
}
}
.h5,
h5 {
font-size: 1.25rem;
}
.h6,
h6 {
font-size: 1rem;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex-wrap: wrap;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -0.5);
margin-left: calc(var(--bs-gutter-x) * -0.5);
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}
.d-flex {
display: flex !important;
}
.text-center {
text-align: center !important;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
.h5,
h5 {
font-size: 1.25rem;
}
.pt-0 {
padding-top: 0 !important;
}
.pt-1 {
padding-top: 0.25rem !important;
}
.pt-2 {
padding-top: 0.5rem !important;
}
.pt-3 {
padding-top: 1rem !important;
}
.pt-4 {
padding-top: 1.5rem !important;
}
.pt-5 {
padding-top: 3rem !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: 0.25rem !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.mt-4 {
margin-top: 1.5rem !important;
}
.mt-5 {
margin-top: 3rem !important;
}
.mt-auto {
margin-top: auto !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: 0.25rem !important;
}
.mb-2 {
margin-bottom: 0.5rem !important;
}
.mb-3 {
margin-bottom: 1rem !important;
}
.mb-4 {
margin-bottom: 1.5rem !important;
}
.mb-5 {
margin-bottom: 3rem !important;
}
.mb-auto {
margin-bottom: auto !important;
}
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
width: 100%;
padding-right: var(--bs-gutter-x, 0.75rem);
padding-left: var(--bs-gutter-x, 0.75rem);
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container,
.container-sm {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1320px;
}
}
button {
border-radius: 0;
}
button:focus:not(:focus-visible) {
outline: 0;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button,
select {
text-transform: none;
}
.btn-check {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none;
}
.btn-check:disabled + .btn,
.btn-check[disabled] + .btn {
pointer-events: none;
filter: none;
opacity: 0.65;
}
.input-group .btn {
position: relative;
z-index: 2;
}
.input-group .btn:focus {
z-index: 3;
}
.btn {
display: inline-block;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* ///////////////////////////////////// */
.MultiCarousel {
float: left;
overflow: hidden;
padding-left: 35px;
padding-right: 35px;
width: 100%;
position: relative;
}
.MultiCarousel .MultiCarousel-inner {
transition: 1s ease all;
float: left;
}
.MultiCarousel .MultiCarousel-inner .item {
float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
/* margin: 10px; */
background: #fafafa;
/* background: #ffc5c5; */
color: #666;
}
.MultiCarousel .leftLst,
.MultiCarousel .rightLst {
position: absolute;
border-radius: 5%;
top: calc(50% - 20px);
}
.MultiCarousel .leftLst {
left: 0;
}
.MultiCarousel .rightLst {
right: 0;
}
.MultiCarousel .leftLst.over,
.MultiCarousel .rightLst.over {
pointer-events: none;
background: rgb(204, 204, 204);
}
/* ///////////////////// */
.btn-color {
color: #ffffff;
background-color: #f76e11;
border-radius: 5%;
}
.btn-color:hover {
box-shadow: inset 0 0 0 20rem var(--darken-1);
}
.btn-color:active {
box-shadow: inset 0 0 0 20rem var(--darken-2),
inset 0 3px 4px 0 var(--darken-3), 0 0 1px var(--darken-2);
}
.btn-color:disabled,
.btn-color.is-disabled {
opacity: 0.5;
}
/* //////////////////////////////// */
.widget {
background: #ffffff;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 15px;
border-radius: 5px;
box-shadow: 0px 0px 20px rgba(22, 26, 57, 0.1);
margin-bottom: 10px;
border: 1px solid #e5e5e5;
}
.widget .title {
padding-bottom: 9px;
margin-bottom: 20px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
}
.gallery img {
width: 100%;
height: auto;
object-fit: cover;
}
.square {
width: 80%;
border-radius: 5%;
}
.p-style {
font-size: 10pt;
line-height: 1.1;
text-align: center;
padding-top: 20px;
padding-bottom: 10px;
}
$(document).ready(function () {
// Select all images with the class name "gallery" using jQuery
$('.image-gallery').each(function () {
const $img = $(this); // store a reference to the image element
const randomNumber = Math.floor(Math.random() * 500) + 1;
let image= 'https://picsum.photos/id/' + randomNumber + '/200/200';
$.get(image)
.done(function () {
console.log('done');
$img.attr('src', image);
})
.fail(function () {
console.log('fail');
});
});
$.getJSON('data/data.json', function (data) {
$('p.name').each(function () {
let randomIndex = Math.floor(Math.random() * data.length); // Generate a random index
let randomElement = data[randomIndex]; // Select the element at the random index
$(this).text('' + randomElement);
});
});
});
(function ($) {
var itemsMainDiv = ('.MultiCarousel');
var itemsDiv = ('.MultiCarousel-inner');
var itemWidth = "";
$('.leftLst, .rightLst').click(function () {
var condition = $(this).hasClass("leftLst");
if (condition)
click(0, this);
else
click(1, this)
});
ResCarouselSize();
$(window).resize(function () {
ResCarouselSize();
});
//this function define the size of the items
function ResCarouselSize() {
var incno = 0;
var dataItems = ("data-items");
var itemClass = ('.item');
var id = 0;
var btnParentSb = '';
var itemsSplit = '';
var sampwidth = $(itemsMainDiv).width();
var bodyWidth = $('body').width();
$(itemsDiv).each(function () {
id = id + 1;
var itemNumbers = $(this).find(itemClass).length;
btnParentSb = $(this).parent().attr(dataItems);
itemsSplit = btnParentSb.split(',');
$(this).parent().attr("id", "MultiCarousel" + id);
if (bodyWidth >= 1200) {
incno = itemsSplit[3];
itemWidth = sampwidth / incno;
} else if (bodyWidth >= 992) {
incno = itemsSplit[2];
itemWidth = sampwidth / incno;
} else if (bodyWidth >= 768) {
incno = itemsSplit[1];
itemWidth = sampwidth / incno;
} else {
incno = itemsSplit[0];
itemWidth = sampwidth / incno;
}
$(this).css({
'transform': 'translateX(0px)',
'width': itemWidth * itemNumbers
});
$(this).find(itemClass).each(function () {
$(this).outerWidth(itemWidth);
});
$(".leftLst").addClass("over");
$(".rightLst").removeClass("over");
});
}
//this function used to move the items
function ResCarousel(e, el, s) {
var leftBtn = ('.leftLst');
var rightBtn = ('.rightLst');
var translateXval = '';
var divStyle = $(el + ' ' + itemsDiv).css('transform');
var values = divStyle.match(/-?[\d\.]+/g);
var xds = Math.abs(values[4]);
if (e == 0) {
translateXval = parseInt(xds) - parseInt(itemWidth * s);
$(el + ' ' + rightBtn).removeClass("over");
if (translateXval <= itemWidth / 2) {
translateXval = 0;
$(el + ' ' + leftBtn).addClass("over");
}
} else if (e == 1) {
var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
translateXval = parseInt(xds) + parseInt(itemWidth * s);
$(el + ' ' + leftBtn).removeClass("over");
if (translateXval >= itemsCondition - itemWidth / 2) {
translateXval = itemsCondition;
$(el + ' ' + rightBtn).addClass("over");
}
}
$(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
}
//It is used to get some elements from btn
function click(ell, ee) {
var Parent = "#" + $(ee).parent().attr("id");
var slide = $(Parent).attr("data-slide");
ResCarousel(ell, Parent, slide);
}
})($)
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.