Home > Developer > Web Develop
Here we can use the plug-in to achieve this function,swiper.js is a special processing of the rotation chart effect of the JS library, for example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1, User-scalable=no "/>
<title> Millet Anti-loss Device </title>
<link rel= "stylesheet" href= "css/swiper-3.3.1.min.css" >
<body>
<section class= "swiper-containerswiper-container-part5 Part5">
<ul class= "swiper-wrapper" >
<li class= "swiper-slide" ></li>
<li class= "swiper-slide" ></li>
<li class= "swiper-slide" ></li>
<li class= "swiper-slide" ></li>
<li class= "swiper-slide" ></li>
<li class= "swiper-slide" ></li>
</ul>
<!--ADD pagination-
<li class= "swiper-paginationSwiper-part5"id= "part5"style= "text-align:left;margin-left:100px;margin-bottom:25px" ></li>
<!--ADD Arrows-
<li class= "swiper-button-next" ></li>
<li class= "swiper-button-prev" ></li>
</section>
<section class= "swiper-containerswiper-container-part20 part20">
<ul class= "swiper-wrapper" >
<li class= "swiper-slide" >
<ul class= "part20-ul1" >
<li><li><li><p> Liberate your hands, give you ample space to set pose, the world is the show Field. You can easily take a selfie by turning on the camera program that comes with the gadget app. Supports most Third-party camera apps that use volume keys as shutter buttons, such as 美图秀秀, beauty cameras, grapefruit cameras, and More. </p></li>
<li><p style= "color: #00adee" > Real shot </p></li>
<li class= "photo-person-wrap-1" >
</li>
</ul>
</li>
<li class= "swiper-slide" >
<ul class= "part20-ul1" >
<li><li><li><p> enjoy music, of course, to be free, music remote control, Small to find a key Control: open the app comes with music player, you can click pause, double-click ere, Three hit the First. Widely support the vast majority of music apps, NetEase Cloud music, qq music, giant Whale </p></li>
<li><p style= "color: #00adee" >android and iOS support for music apps </p></li>
<li class= "photo-person-wrap" ></li>
</ul>
</li>
<li class= "swiper-slide" >
<ul class= "part20-ul1" >
<li><li><li><p> give you unlimited space to control the speech, sway Style. Capable of supporting Mac computers and PCs with Bluetooth 4.0 on Windows 8.1 and above </p></li>
<li><p style= "color: #00adee" >mac and slides supported on Windows app</p></li>
<li class= "photo-person-wrap" ></li>
</ul>
</li>
</ul>
<!--ADD pagination-
<li class= "swiper-paginationswiper-part20"style=" ></li> "text-align:center;margin-bottom:650px"
<!--ADD Arrows-
<li class= "swiper-button-next" style= "position:absolute;right:15%;background-color: #C6C6C6; opacity:0.5;width : 47px;border-radius:50% "></li>
<li class= "swiper-button-prev" style= "position:absolute;left:15%;background-color: #C6C6C6; opacity:0.5;width: 47px;border-radius:50% "></li>
</section>
<script src= "js/jquery-1.12.1.min.js" ></script>
<script src= "swiper.min.js" ></script>
<script>
$ (function () {
var swiper1 = new Swiper ('.Swiper-container-part5‘, {
Pagination: '.Swiper-part5‘,
Nextbutton: '. Swiper-button-next ',
Prevbutton: '. Swiper-button-prev ',
paginationclickable:true,
spacebetween:30,
centeredslides:true,
autoplay:4000,
autoplaydisableoninteraction:false,
Loop:true
});
$ ("#part5 span"). CSS ({
Width: ' 1px ',
Height: ' 1px ',
Marginleft: "45px",
Display: "inline-block",
Borderradius: "10px",
Backgroundcolor: "white"
});
var imgs0 = new Image ();
IMGS0.SRC = "img/wallet.png";
var imgs1 = new Image ();
IMGS1.SRC = "img/pet.png";
var imgs2 = new Image ();
IMGS2.SRC = "img/key.png";
var imgs3 = new Image ();
IMGS3.SRC = "img/bag.png";
var imgs4 = new Image ();
IMGS4.SRC = "img/camera.png";
var imgs5 = new Image ();
IMGS5.SRC = "img/computer.png";
$ ("#part5 span"). eq (0). html (imgs0);
$ ("#part5 span"). eq (1). html (imgs1);
$ ("#part5 span"). eq (2). html (imgs2);
$ ("#part5 span"). eq (3). html (imgs3);
$ ("#part5 span"). eq (4). html (imgs4);
$ ("#part5 span"). eq (5). html (imgs5);
$ ("#part5 span img"). css ({
Width: ' 30px ',
Height: ' 30px ',
Borderradius: "0"
});
});
$ (function () {var swiper2 = new Swiper ('. swiper-container-part20', {
Pagination: '. swiper-part20',
Nextbutton: '. Swiper-button-next ',
Prevbutton: '. Swiper-button-prev ',
paginationclickable:true,
spacebetween:30,
centeredslides:true,
autoplay:4000,
autoplaydisableoninteraction:false,
Loop:true
});$ (". swiper-part20 span"). CSS ({
Width: ' 80px ',
Height: ' 80px ',
Marginleft: "85px",
Display: "inline-block",
Borderradius: "10px",
Backgroundcolor: "#F7F7F7"
});
var imgs0 = new Image ();
Imgs0.src= "img/camerablue.png";
var imgs1 = new Image ();
Imgs1.src= "img/musicblue.png";
var imgs2 = new Image ();
Imgs2.src= "img/pptblue.png";
$ (". swiper-part20 span"). eq (0). html (imgs0);
$ (". swiper-part20 span"). eq (0). html (imgs0). append ("<p style= ' color: #00AEEF ' > Remote control selfie </p>");
$ (". swiper-part20 span"). eq (1). html (imgs1);
$ (". swiper-part20 span"). eq (1). html (imgs1). append ("<p style= ' color: #00AEEF ' > Remote control Music </p>");
$ (". swiper-part20 span"). eq (2). html (imgs2);
$ (". swiper-part20 span"). eq (2). html (imgs2). append ("<p style= ' color: #00AEEF ' > Remote ppt</p>");
$ (". swiper-part20 span img"). css ({
Width: ' 80px ',
Height: ' 70px ',
Borderradius: "10px"
});
});
</script></body>
Note that the red part of the code, because The selector name in the swiper.js is uniform, if you use it directly, a page can only be used once, that is, if your page has more than 2 carousel diagram, Then do not rename the name of the selector under the premise that they will interfere with each other, and ultimately lead to ineffective or error;
So I added my own class selector after each of the original Swiper-containter class names, and then in the JS code, The Red font part also made the corresponding changes; done these two steps, Basic can be implemented in the page to achieve 2 different effects of the carousel work properly at the same time, the other part of the page CSS only
is the width and heightof the section itself, and its position in the page has been adjusted; so here is not given; interested readers can copy the above code to try the effect;
Swiper.js Source Code: Http://www.swiper.com.cn/download/index.html#file7
HTML5 How to quickly write multiple carousel graphs in a page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
