Bootstrap Carousel clashes with Bootstrap 4 Beta

Home / Uncategorized / Bootstrap Carousel clashes with Bootstrap 4 Beta

Question:
again.

I’m trying to implement Bootstrap’s Carousel into my webpage. I’m running in to some issues, however.

The images of the carousel show up stacked on top of each other. The navigation buttons don’t show up. This is with Bootstrap’s CSS v4.0.0 Beta.

If I change the Bootstrap CSS file version to say 3.7, the carousel works, but the other stuff depending on bootstrap 4 of course stop working.

Is this a mistake I’m looking over, or is this a bug in Bootstrap 4Beta?

Here is the HTML code.

/*Custom Irie Vibes colors.*/
.bg-irie-yellow {
background-color: #E7DD96;
}

.bg-irie-grey {
background-color: #41403E;
}

.bg-irie-red{
background-color: #CF7654;
}

.text-white {
color: white;
}

/*Only applies to classes irie-green when navbar-brand is also used*/
.navbar-brand.irie-green{
color: #EDCE4F;
font-weight: bolder;
text-shadow: 9BA573 1 1 20px;
}

/*Makes the navbar just a little thinner than default (overwrite)*/
.navbar-nav > li > a {
padding-top:5px !important;
padding-bottom:5px !important;
}

.navbar {
min-height:32px !important;
}

/*A fix for Bootstrap’s broken img-responsive*/
.img-responsive {
max-width:100%;
padding: 10px;
}

/*Leave some space between the content and the navbar*/
.container.content{
padding-top: 45px;
}

/*Styling for the Language buttons on the right*/
.nav-link.language {
font-style: oblique;
letter-spacing: 0.5px;

}

/*Change the color of the dropdown menu’s*/
.navbar-nav > li > .dropdown-menu {
background-color: #CF7654;
padding-left: 20px;
border: 0px;
}

.nav-link{
padding: .2rem 1rem;
}





Irie Vibes Roots Festival – Home


"Slide1"/

Slider 1

"Slide2"/

Slider 2




Previous



Next






Thanks in advance!

One love, Anna


Answer:
Try this one

HTML

1

2

3

4

5

6


CSS
.carousel-inner.onebyone-carosel { margin: auto; width: 90%; }
.onebyone-carosel .active.left { left: -33.33%; }
.onebyone-carosel .active.right { left: 33.33%; }
.onebyone-carosel .next { left: 33.33%; }
.onebyone-carosel .prev { left: -33.33%; }

JS
$(document).ready(function () {
$(‘#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));
}
});
});
Read more

Leave a Reply

Your email address will not be published. Required fields are marked *