For website developers, adding a sliding or carousel effect to the display content is a very common need. There are so many paid and free carousel plug-ins. Many of them offer a lot of useful configuration options and dynamic effects.
Many times, if your project needs a lightweight carousel, it doesn't require a lot of features. At the same time, your project is to use Bootstrap, (the most popular open source front-end framework). You can refer to the official bootstrap component.
This article will show you how to add interesting animation effects to the Bootstrap carousel. At the same time, ensure that this js component is freely expanded and quickly started.
Introduction to Animate.css
In order to make the animation effect I wrote myself worthy of praise, I used a very famous open source CSS3 animation library, which is vividly called animate.css. Written by Dan Eden.
This is the code that allows me to focus on the task at hand, rather than explaining CSS3 animations.
Using Animate.css requires 2 steps:
1. Introduce animate.min.css in the html document.
2. Add the animated yourchosenanimation class to the elements to be animation in the web page.
Next, you use the class name about animations you see on the Animate.css website to replace yourchosenanimation.
Introducing Bootstrap Carousel Component
The Bootstrap carousel component has three main parts.
---The carousel indicates the number of pages displayed on the slide , providing the user with a visual clue and providing a sliding navigation.
--- Carousel entry , a class called .carousel-inner, contained in the outer border. Represents each independent slider. Pictures can be placed in each picture. You can also add a title. You can also add carousel-caption class name on the html element. Bootstrap will have its own style. We can add animations through these elements.
--- Finally, there is the carousel control arrow , which is the function that allows the user to slide back and forth.
In order to simply display the demo, no pictures will be added. Focus first on the carousel frame as an animation.
Building HTML structure
Here are the ones you need to quote into your project:
jQuery
Bootstrap's CSS and JavaScript
Animate.css
A stylesheet and js documentation.
In order to speed up the development process, templates and necessary files are referenced from the official website of Bootstrap.
Below is the Bootstrap carousel code :
<div id="carousel-example-generic" data-ride="carousel"> <!-- Indicators --> <ol> <li data-target="#carousel-example-generic" data-slide-to="0"> </li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <!-- First slide --> <div> <div> <h3 data-animation="animated bounceInLeft"> This is the caption for slide 1 </h3> <h3 data-animation="animated bounceInRight"> This is the caption for slide 1 </h3> <button data-animation="animated zoomInUp">Button</button> </div> </div><!-- /.item --> <!-- Second slide --> <div> <div> <h3 data-animation="animated bounceInDown"> <span></span> </h3> <h3 data-animation="animated bounceInDown"> bounceInUp"> This is the caption for slide 2 </h3> <button data-animation="animated zoomInRight">Button</button> </div> </div><!-- /.item --> <!-- Third slide --> <div> <div> <h3 data-animation="animated zoomInLeft"> <span></span> </h3> <h3 data-animation="animated flipInX"> This is the caption for slide 3 </h3> <button data-animation="animated lightSpeedIn">Button</button> </div> </div><!-- /.item --> </div><!-- /.carousel-inner --> <!-- Controls --> <a href="#carousel-example-generic" role="button" data-slide="prev"> <span aria-hidden="true"></span> <span>Previous</span> </a> <a href="#carousel-example-generic" role="button" data-slide="next"> <span aria-hidden="true"></span> <span>Next</span> </a></div><!-- /.carousel -->
If the above code is not wrong, you will see a carousel that can run when opening it in the browser. Everything above does not contain a line of javascript code. If you don't add any images,
Just add min-height value to the .carousel .item class block in the css document to prevent carousel collapse.
Add an animation attribute data-animation to the elements inside the carousel title, using this special animation library as their value.
If you want to experience other animations from the Animate.css library, use the animation class name of your choice instead of the data-animation property value.
We use the data-animation attribute value in javascript code.
Although a simple automatic carousel can be found in some cases, we have more control over this case.
In the first step in this direction, remove the data-ride="carousel" value from the element, and initialize the data-ride attribute value without writing any code. However, we intend to use js code to control the carousel, so this data-ride property is unnecessary.
Add CSS style to the carousel
Now use your creativity to add styles to the carousel title according to your preferences. The style rules I'm going to write are demos that work smoothly.
More specifically, we increase control of animation delay properties. Define when each animation starts (note that for simple demonstration, the browser prefix is omitted)
.carousel-caption h3:first-child { animation-delay: 1s;}.carousel-caption h3:nth-child(2) { animation-delay: 2s;}.carousel-caption button { animation-delay: 3s;}In the above code snippet, make sure that the element animation starts in an orderly manner. Other effects can be done. For example, you can select the first two titles to appear at the same time. Then there is the button button. You can decide for yourself and have fun.
Write jQuery code:
We start initializing this carousel and add the code to your custom javascript file:
var $myCarousel = $('#carousel-example-generic');// Initialize carousel$myCarousel.carousel();We have set up the carousel dynamically, and next, let’s solve this animation.
In order to animate the title of the first slide, the script must run after the page is loaded in the browser. The subsequent slideshow enters our field of view under animation, and our code runs on the slide.bs.carousel event. Meaning that the same code runs twice: the page loads once and the slide.bs.carousel event once.
Because we like to follow the principle of non-repeatment, we intend to encapsulate our code in functions and reference them when appropriate.
Code:
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 loadvar $firstAnimatingElems = $myCarousel.find('.item:first') .find('[data-animation ^= "animated"]');// Apply the animation using our functiondoAnimations($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);});Let’s analyze the above code.
Look at the doAnimations() function
The tasks performed by this doAnimations() function are as follows.
It starts by cache strings containing the animationend event name in the variable. This event tells us that you may have guessed when each animation ends. We need information for this point, because after each animation is over, we remove the animate.css class. If we don't do the removal, the carousel's title will only have an animation once, that is, just displaying a specific slide in the first carousel.
var animationEndEv = 'webkitAnimationEnd animationend';
Next, our function loops through each element we want to have animation and get the property value of data-animation. Think of what is mentioned above, this value contains the Animate.css class we want to add to the element so that it has an animation effect.
elems.each(function () { var $this = $(this), $animationType = $this.data('animation'); // etc...});Finally, the doAnimations() function dynamically adds to each element of the animate.css class to execute the animation. When the animation ends, an event listening is also attached. After the animation is over, we remove the class added from Animate.css. This ensures that the next carousel is back to the current area. (You try to delete this code and see what happens)
$this.addClass($animationType).one(animEndEv, function () { $this.removeClass($animationType);});The first title animation
When the page loads in the browser, we animate the contents in the first slide:
var $firstAnimatingElems = $myCarousel.find('.item:first') .find("[data-animation ^= 'animated']"); doAnimations($firstAnimatingElems);In this code we find the first light, we want to get the value of the animation attribute from the animation's title by using data-animation. Then we pass the variable $firstAnimatingElems as a parameter to the doAnimations() function, and then execute the function.
Carousel stop function
When the first screen content has been executed, we stop this carousel function.
$myCarousel.carousel('pause');
This is a feature in which the Bootstrap carousel component prevents constant rotation. Constant rotation may make visitors unhappy.
In this case, I recommend making sure the carousel does not loop directly to the next light until all the animations are running. This can be controlled by setting the "interval" option in the initialization code:
$myCarousel.carousel({ interval: 4000});In my opinion, an infinite loop carousel title jumps every time the slide into sight is not ideal.
Carousel slide title animation
The steps described below are required to become visible for each slide’s animated carousel title.
First, we add an event listener on slide.bs.carousel.
The event fires immediately when the slide instance method is called.
$myCarousel.on('slide.bs.carousel', function (e) { // do stuff...});Next, we select the current lights and find the elements we want to add animations. The following code uses the .relatedTarget property of the slide.bs.carousel event to bind the animation.
var $animatingElems = $(e.relatedTarget).find("[data-animation ^= 'animated']");
Finally, we call the doAnimations() function and pass $animatingElems as a parameter.
doAnimations($animatingElems);
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
Wonderful topic sharing: jQuery picture carousel JavaScript picture carousel Bootstrap picture carousel
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.