Use BootStrap's movie usel. js to achieve Carousel animation effects, and bootstrap to achieve Carousel Images

Use BootStrap's movie usel. js to achieve Carousel animation effects, and bootstrap to achieve Carousel Images

Preparations:

1. jquery. js.

2. Restart usel. js of bootstrap.

3.bootstrap.css.

Let's take a look at the Code:

The page is ugly. I hope you don't mind.

:

Html + js:

<! DOCTYPE html> 
Index.css
.container-fluid { padding-left: 200px;}.navbar-default { background-color: #308dca;}.navbar-brand { font-size: 34px; height: 70px;}.navbar-nav>li>a { font-size: 19px;}.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #fff;}.navbar-brand, .navbar-nav>li>a { line-height: 40px;}.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #fff; background-color: #2276bf;}.index-body { margin: 0 auto;}.carousel-inner { height: 490px;}.index-body, .images { width: 900px;}.index-footer { margin-top: 20px; color: #fff; background-color: #2276bf;}.footer-centent { width: 300px; font-size: 20px; line-height: 55px; margin: 0 auto; height: 60px;}
When designing your own demo, you should note that the width of the div and img whose class is index-body must be set the same; otherwise, the following situations may occur:

The above section describes how to use BootStrap's dedicated usel. js achieves the carousel animation effect. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!