"Multi Item Carousel"
Bootstrap 4.1.1 Snippet by Antoniojru

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<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="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
<p>₹ 6000</p>
<p>50% off</p>
</div>
</div>
<div class="item">
<div class="pad15">
<p class="lead">Multi Item Carousel</p>
<p>₹ 1</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
.MultiCarousel { float: left; overflow: hidden; padding: 15px; 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:10px; margin:10px; background:#f1f1f1; color:#666;}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
.MultiCarousel .leftLst { left:0; }
.MultiCarousel .rightLst { right:0; }
.MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(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(',');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

This snippet works great! I am only having one issue. If someone could help? When you resize the browser window the extra Carousel items drop below the slider for about 3 to 4 seconds before it fixes itself. Is this a JS issue?

jaysonjayson (0) - 5 years ago - Reply 0


it happens because the javascript is watching for changes at container width, if it changes, then he need recalc all again before fix the carousel, that's why that happen.

leandroruel () - 5 years ago - Reply 0


how can i resize div i want md 3

sabi (-1) - 5 years ago - Reply -1


https://bootsnipp.com/snippets/7oPqW

Refere this one

SOJITRA (2) - 5 years ago - Reply 0


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="description" content="Growzzy Media - Best Digital Agency in Delhi offering Digital Services, Digital Marketing, SEO for Business, Social Media Growth, Branding Services, Google SEO, Meta Ads, and Social Media Management.">

<title>Growzzy Media - Best Digital Agency in Delhi</title>

</head>

<body>

<header>

<h1>Welcome to Growzzy Media</h1>

<p>Your trusted partner for all things digital.</p>

</header>

<main>

<section>

<h2>Why Choose Us?</h2>

<p>Ready to take your brand to the next level? <strong>Growzzy Media</strong> delivers top-notch <strong>digital services</strong> and cutting-edge <strong>digital marketing</strong> solutions designed to help you <strong>grow your business</strong> effortlessly.</p>

<p>As the <strong>best digital agency in Delhi</strong>, we craft strategies that deliver results, from powerful <strong>SEO for business</strong> to impactful <strong>social media marketing</strong> and game-changing <strong>social media growth</strong>.</p>

</section>

<section>

<h2>Our Services</h2>

<ul>

<li><strong>Branding Services</strong></li>

<li><strong>Google SEO</strong></li>

<li><strong>Meta Ads</strong></li>

<li><strong>Social Media Management</strong></li>

</ul>

<p>We ensure your brand outshines the competition with our customized solutions. Trusted by the most innovative <strong>digital marketers in India</strong>, we guarantee your success.</p>

</section>

<section>

<h2>Contact Us</h2>

<p><strong>Want to boost your revenue by 50-60% in just 6 months?</strong></p>

<p>Don’t wait—contact <strong>Growzzy Media</strong> now! Visit us at <a href="https://growzzymedia.com/" target="_blank">https://growzzymedia.com/</a> to get started.</p>

</section>

</main>

<footer>

<p>&copy; 2024 Growzzy Media. All rights reserved.</p>

</footer>

</body>

</html>

arunsingh1211 () - 1 month ago - Reply 0


How we apply a auto play on multi carousel slider in infinite loop

abhinavCssoft () - 7 months ago - Reply 0


How we apply a auto play on multi carousel slider in infinite loop

abhinavCssoft () - 7 months ago - Reply 0


How we apply a auto play on multi carousel slider in infinite loop

abhinavCssoft () - 7 months ago - Reply 0


How we apply a auto play on multi carousel slider in infinite loop

abhinavCssoft () - 7 months ago - Reply 0


baliramaffiliate (-1) - 3 years ago - Reply 0


Light and work great. I'm looking for infinite loop. Is somebody could help me ?

nlf14 () - 5 years ago - Reply 0