I got error like below:
Error: regulation-of-energy-intake:4398 Uncaught TypeError: jQuery(...).carousel is not a function
Error code: jQuery('#myCarousel').carousel({
interval: 10000
})
Pls help me to slove this

there is an issue here.... if i have only 2 slides it shows the second slide two times

Hi pradeep, i want to download this script.
can you please tel me how to download this sscript ????

Omar is not alone, this code doesn't actually work as provided

It works perfectly in Internet Explorer, but not in the others... somebody knows why? Help me, please

Hallo thx for upload!

Hi mine just show one thumbnail per cycle? thanks

try this script if you wanna change how many box easily

$('.fdi-Carousel .item').each(function () {
var boxCount = 5; // change this to how many box you want
var next = $(this).next();
for(i = 1; i < boxCount; i++) {
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
next = next.next();
}
});

Don't forget to adjust box size

@Munawwirul Jamal, i have a requirement i need to show 2 images per carousel slide and move those 2 images simultaneously. currently only 1 image per carousel is visible and only that is moving. How can i achieve the same for two.

Hi! How do I change the gradient grey background to an image background? Can you have a video background?

Hello, i have a problem when i see in responsive it shows multiple column i want see only one image slide how it is possible

While Using this code, in chrome, it shows the whole boxes moving out in a single click, in Firefox is ok.
Also this page works well in in both browsers, only the code u provide makes the problem

I must be missing something obvious. I cannot get only one item to cycle per change... It always cycles through everything... Im pretty sure i did everything exactly as you have

Hi Omar, and anyone else battling with this,

Check your version of Bootstrap, the latest version 3 uses 3dtransform if available, so whilst the script is fine, the css won't work. You'll need to change it to:

/** single-item multi carousel */
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }

@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-inner.onebyone-carosel > .item {
-webkit-transition: -webkit-transform .6s ease-in-out;
-o-transition: -o-transform .6s ease-in-out;
transition: transform .6s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}

.carousel-inner.onebyone-carosel > .item.next,
.carousel-inner.onebyone-carosel > .item.active.right {
left: 0;
-webkit-transform: translate3d(33.33%, 0, 0);
transform: translate3d(33.33%, 0, 0);
}

.carousel-inner.onebyone-carosel > .item.prev,
.carousel-inner.onebyone-carosel > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33.33%, 0, 0);
transform: translate3d(-33.33%, 0, 0);
}

.carousel-inner.onebyone-carosel > .item.next.left,
.carousel-inner.onebyone-carosel > .item.prev.right,
.carousel-inner.onebyone-carosel > .item.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.carousel-inner.onebyone-carosel > .active,
.carousel-inner.onebyone-carosel > .next,
.carousel-inner.onebyone-carosel > .prev {
display: block;
}

.carousel-inner.onebyone-carosel > .active {
left: 0;
}

.carousel-inner.onebyone-carosel > .next,
.carousel-inner.onebyone-carosel > .prev {
position: absolute;
top: 0;
width: 100%;
}

.carousel-inner.onebyone-carosel > .next {
left: 33.33%;
}

.carousel-inner.onebyone-carosel > .prev {
left: -33.33%;
}

.carousel-inner.onebyone-carosel > .next.left,
.carousel-inner.onebyone-carosel > .prev.right {
left: 0;
}

.carousel-inner.onebyone-carosel > .active.left {
left: -33.33%;
}

.carousel-inner.onebyone-carosel > .active.right {
left: 33.33%;
}

Also, there is an additional wrapping div with the carousel class and is unnecessary:

<div id="myCarousel" class="carousel fdi-Carousel slide">

<div class="carousel fdi-Carousel slide" id="eventCarousel" data-interval="0">

Remove the one with the id="eventCarousel", and change the next and prev buttons to reference #myCarousel instead. Good luck.

Thanks! It's working just fine!

That looks right... Have not tried yet though... Thanks!

You are most welcome, hopefully it does the trick for you. I've used it on a few projects with great results.

The latest version of bootstrap 3 didn't help me. Your code was right, but it brackes the animation of slider in mobile grid. So your code should be with @media (min-width: 992px){.....} or something else to turn slides with no crashed animation. Anyway thanks!)

<div class="col-md-4">
change this to.
<div class="col-md-3">

but add more div one colom.
<div class="col-md-3">
....
</div>

<div class="col-md-3">
....
</div>

<div class="col-md-3">
....
</div>

<div class="col-md-3">
....
</div>

i want to show 4 slides not three , any one can help :(

Have you got 4 slides??? If yes please help

css:

.carousel-inner.onebyone-carosel { margin: auto; width: 100%; }
.onebyone-carosel .active.left { left: -25%; }
.onebyone-carosel .active.right { left: 25%; }
.onebyone-carosel .next { left: 25%; }
.onebyone-carosel .prev { left: -25%; }

js:

$('#myCarousel').carousel({
interval: 10000
});

$('.fdi-Carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
if (next.next().next().length > 0) {
next.next().next().children(':first-child').clone().appendTo($(this));
}
});

html:

<div class="item active">
<div class="col-md-4">

to:

<div class="item active">
<div class="col-md-3">

else condition should be added one more time, like that:
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
if (next.next().next().length > 0) {
next.next().next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}

When it reaches end, the first box will appear following the last box, but then the next click wont show the second box. Any hint?

in my not work, you have the code in git?

how can i show only one slide..??

one slide - by default in bootstrap.