Hello,
sorry for that. Yes, of course I can:
As for the HTML:
<div id="carousel-example-generic" class="carousel slide carousel-fade">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-fade-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-fade-to="1"></li>
<li data-target="#carousel-example-generic" data-fade-to="2"></li>
<li data-target="#carousel-example-generic" data-fade-to="3"></li>
<li data-target="#carousel-example-generic" data-fade-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img id="slider-image" src="images/Coffee_smoke.jpg" alt="slide1" class="img-responsive" />
<div class="carousel-caption">
<h3 id="h3_1" data-animation="animated bounceInLeft">Extremely Nice</h3>
<h3 data-animation="animated bounceInRight">This is the caption for slide 1</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
</div>
</div>
<div class="item">
<img id="slider-image" src="images/Restaurant.jpg" alt="slide2" class="img-responsive" />
<div class="carousel-caption">
<h3 data-animation="animated bounceInDown">Extremely Nice</h3>
<h3 class="icon-container" data-animation="animated bounceInDown">
<span class="glyphicon glyphicon-heart"></span>
</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInRight">Button</button>
</div>
</div>
<div class="item">
<img id="slider-image" src="images/salt-water-cafe-churchgate.jpg" alt="slide3" class="img-responsive" />
<div class="carousel-caption">
<h3 data-animation="animated zoomInLeft">Extremely Nice</h3>
<h3 data-animation="animated flipInX">This is the caption for slide 3</h3>
<button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>
</div>
</div>
<div class="item">
<img id="slider-image" src="images/Interior_Cafetería.jpg" alt="slide1" class="img-responsive" />
<div class="carousel-caption">
<h3 data-animation="animated bounceInLeft">Extremely Nice</h3>
<h3 data-animation="animated bounceInRight">This is the caption for slide 4</h3>
<button class="btn btn-primary btn-lg" data-animation="animated zoomInUp">Button</button>
</div>
</div>
<div class="item">
<img id="slider-image" src="images/cafe1.jpg" alt="slide1" class="img-responsive" />
<div class="carousel-caption">
<h3 data-animation="animated zoomInLeft">Extremely Nice</h3>
<h3 data-animation="animated flipInX">This is the caption for slide 5</h3>
<button class="btn btn-primary btn-lg" data-animation="animated lightSpeedIn">Button</button>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
And the CSS looks like this:
.carousel-indicators {
bottom: 0;
}
.carousel-control.right,
.carousel-control.left {
background-image: none;
}
/* Caption */
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button {
background-color: rgba(255, 106, 0, 0.78);
border: none;
}
.carousel-caption h3 {
padding: .5em;
}
.carousel .icon-container {
display: inline-block;
font-size: 25px;
line-height: 25px;
padding: 1em;
text-align: center;
border-radius: 50%;
}
.carousel-caption button {
margin-top: 1em;
}
/* End Caption */
/* Animation delays */
.carousel-caption h3:first-child {
animation-delay: 1s;
}
.carousel-caption h3:nth-child(2) {
animation-delay: 2s;
}
.carousel-caption button {
animation-delay: 3s;
}
I changed the slide effect to fade effect with css, like so:
/*
Bootstrap Carousel to Fade instead of slide
*/
.carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
I don’t think that the fade effect is the reason for the automatic fading or sliding, because changing it to slide the problem still remains.
finally the JS:
//--------------- Bootstrap Carousel --------------------//
var $myCarousel = $('#carousel-example-generic');
// Initialize carousel
$myCarousel.carousel();({
interval: 5000
})
/* Demo Scripts for Bootstrap Carousel and Animate.css article
* on SitePoint by Maria Antonietta Perna
*/
function doAnimations(elems) {
var animEndEv = 'webkitAnimationEnd animationend';
elems.each(function () {
var $this = $(this),
$animationType = $this.data('animation');
// Add animate.css classes to
// the elements to be animated
// Remove animate.css classes
// once the animation event has ended
$this.addClass($animationType).one(animEndEv, function () {
$this.removeClass($animationType);
});
});
}
// Select the elements to be animated
// in the first slide on page load
var $firstAnimatingElems = $myCarousel.find('.item:first')
.find('[data-animation ^= "animated"]');
// Apply the animation using our function
doAnimations($firstAnimatingElems);
// Pause the carousel
$myCarousel.carousel('pause');
// Attach our doAnimations() function to the
// carousel's slide.bs.carousel event
$myCarousel.on('slide.bs.carousel', function (e) {
// Select the elements to be animated inside the active slide
var $animatingElems = $(e.relatedTarget)
.find("[data-animation ^= 'animated']");
doAnimations($animatingElems);
});
//---------------- End Bootstrap Carousel ---------------------//
Hope this will help to understand better what I’m referring to.
Thanks a lot.
Regards, Pete
EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.