This is a note from a long time ago, which was sent to the trumpet by mistake. I will migrate it today.
Development Notes
working principle
The carousel effect is a slideshow effect that uses CSS 3D warp transitions and some Javascript to build a content loop, it works with a series of images, text or custom markers, and also includes navigation controls and instructions for previous/next images support.
In browsers that support the Page Visibility API, when the web page is not visible to the user (such as when the browser tab is inactive, the window is minimized), the carousel effect control stops motion, saving performance .
preparation
Prepare the required images for the carousel, more than or equal to two.
Prepare bootstrap's css and js and jquery1.10+ js files, search a lot on the Internet, or download them from the official website.
Put the downloaded css file in the css directory of the project, the js file in the js directory, and the pictures in the img (special pictures) folder.
Write code in html, code:
carousel code:
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-top: -9px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1" ></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="{% static 'images/carousel1.jpg' %}" alt="..." >
<div class="carousel-caption">
</div>
</div>
<div class="item">
<img src="{% static 'images/carousel2.jpg' %}" alt="...">
<div class="carousel-caption">
</div>
</div>
</div>
How to implement scrolling
Use JS to control the carousel (to achieve automatic scrolling) through JavaScript through the following methods:
$('.carousel').carousel()
interval number 5000 Delay time (i.e. scroll time) between auto-looping items, if false, the entire carousel component will not auto-scroll (only manual scrolling is supported) - this is useful when debugging CSS styles.
keyboard boolean true Whether to respond to keyboard events, if true is selected, you can switch control through the left <-right-> arrow keys on the keyboard.
pause string | boolean "hover"
If set to "hover", the mouse movement pauses the rotation on the animation screen, and resumes the rotation event after removing the mouse (this is the default property); if set to false, the mouse moves up the wheel The playback animation will not pause.
On touch screens, when set to the "hover" property, the loop will pause on touch (once the user finishes interacting with the rotation event) and resume automatically for two intervals. Note that this is in addition to the mouse behavior described above.
explain
ride string false Automatically play the carousel after the user manually loops the first item, if "carousel" the carousel is automatically played on load.
wrap boolean true Whether the turntable should loop continuously or be hard to stop.
.carousel('cycle')
loops from left to right.
.carousel('pause')
stops the slideshow with an event.
.carousel(number)
loops the carousel to a specific frame (0-based, array-like), before the target is displayed back to the caller (ie before the slid.bs.carousel event).
.carousel('prev')
will point the carousel to the previous frame of the slide, passed back to the caller before the previous target is displayed (ie before the slide.bs.carousel event).
.carousel('next')
will point the carousel to the next frame of slide, which is passed back to the caller before the previous target is displayed (ie before the slide.bs.carousel event).
.carousel('dispose')
destroys a carousel control.
Show results
