quote
This is some of the configuration options of the swiper plugin that I have organized while learning. They are all basic, with their own notes attached, which should be understandable. If you don’t understand, just ask me (1035040092). This plugin has Chinese documentation. http://www.swiper.com.cn/api/start/2014/1218/140.html, you can also log in and watch it yourself. I have seen his completeness from the beginning to the end. To be honest, it is not very easy to understand. I am Adhering to the principle of knowing how to use it, I don’t have time to study if I am proficient. The following is a personal arrangement. There may be some places that I don’t understand properly. Please bear with me and help me to point it out. When you log in to that website and see the callback function below, insist on Look at it, although it is very boring and simple, I believe many people can use it, the following code is only for learning, there is a complete package below, that's it
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/swiper-3.4.2.min.css" />
<script type="text/javascript" src="js/swiper-3.4.2.min.js" ></script>
<style>
.swiper-container {
width: ;
height: 490px;
}
.swiper-wrapper{
/*transition-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1)*/
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background: orange;" data-hash="slid1"data-history="mamaipi">Slide 1
<img src="img/z404.jpg" class="data-lazy" />
</div>
<div class="swiper-slide" style="background: orangered;height:490px" data-hash="slid2" data-history="mamaipi2">slider 2
<div style="width: 50%;margin: 0 auto;padding: 0;position: relative;">
<img src="img/z423.jpg" style="width: 100%;" />
<div style="width: 100%;height: 60px;position: absolute;bottom: 0;background: black;opacity: 0.7;">
</div>
</div>
</div>
<div class="swiper-slide" style="background: yellow;" data-hash="slid3"data-history="mamaipi3">
<div class="swiper-zoom-container"> <img src="img/z423.jpg"></div>
<!-- <div class="swiper-container1">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width: 100%;background: pink;">3-1</div>
<div class="swiper-slide" style="width: 100%;background: deeppink;">3-2</div>
<div class="swiper-slide" style="width: 100%;background: hotpink;">3-3</div>
</div>-->
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="swiper-scrollbar"></div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container',{
//For example, slide up and down, the default is horizontal (horizontal slide)
loop : true,//default false true is the last seamless transition to the first ******** This attribute is placed in the position of the first 1 or 2, and an error is reported, so I tried a few times. you can test,
//initialSlide : 1,//The interface 0 displayed for the first time after the index value is opened is the default first interface. and so on
speed : 2000,//Sliding speed, that is, the time from the start to the end of the slider's automatic sliding (in ms), and the time from release to fit when the slider is touched and swiped.
autoplay : 1000,//Time interval of automatic switching (unit ms), slide will not switch automatically if this parameter is not set. You can also set the dwell time separately on a div <div class="swiper-slide" data-swiper-autoplay="2000"></div>
//autoplayDisableOnInteraction : true,//Whether the automatic switching will be stopped after the user operates the swiper, the default is true (stop) false (disregard the user operation and still switch according to the automatic switching time interval) ********* with the above Loop conflict, it is recommended to keep loop, because the default attribute of this is in line with user operation, so there is no need to write
grabCursor : true,//When set to true, the pointer will turn into a palm shape when the mouse covers the Swiper, and the pointer will turn into a grabber shape when dragging. The default false ***** conflicts with autoplay (choose one of the two, discarded as appropriate)
//parallax : true,//parallax effect is ok without referring to the API documentation of online swiper
hashnav : true,//Remember to add a data-hash attribute to each slide. The page effect does not change. The URL is changed. For example, before adding it is...index.html, after adding it, it becomes index.html#slid1 or 2 or 3
//hashnavWatchState:true,//After opening, when the anchor link of the URL changes, control the slide switch (hashnav should also be in the open state). URL control slide switch ******** hashnav this must be added
//history : 'lovve',//This must be placed locally in the server, all addresses will be written by hand and an error will be reported (such as 127.0.0.1/folder name/index.html/lovve/mamaipi3), and an error will be reported when refreshing. If you can write 127.0.0.1/folder name/index.html, the address will be changed only after manual switching or automatic switching. I feel that it is not very useful to make a more complicated fake address (of course, this is my opinion, about the issue of refresh in Chinese There is a 2bi in the web api that explained "the page with the same content needs to be pre-set", I just want to say that it is a perpetrator, it has its answer from beginning to end, look at the date carefully, it is not to say that learning while playing Forced to pretend from the beginning to the end, it's his mother who comes here almost every day, regardless of time, I can't help but scold him when I write this)
//replaceState:true,//same as hashave
//setWrapperSize :true,//I don't know what's the use of this. Baidu didn't find it, you can look for it
//virtualTranslate : true,//I feel useless and don't need to watch
//height : window.innerHeight //The full screen height did not measure the css height, I removed it
//roundLengths :true,//The default is false to round the width of the slide. For example, if you have a layer width of 75% and the screen resolution * 75%, if there is a decimal, then round it up. I have a layer with a percentage width and no height set, and a picture with a style of 100% is placed in it, which is the picture response, and then I make a black layer with a width of 100%, a width of 10%, and a height of 0.8 at the same level of the picture. Above is the description of the picture. position:absolute;bottom:0; This is ok, it is indeed positioned at the bottom of the upper layer of the picture, but as the screen is zoomed in and out, because the width is a percentage, the height also changes with the height of the picture, and the height of the picture will appear decimals However, the height of the outer layer will not appear decimals and will be rounded off, so that the child element is 0. a few pixels larger than the parent, so the black bottom is not 0. It is 0. A few, it will be left blank below Side. If you don't understand the itchy hands, please test it yourself. This article feels useless to test it personally. The above example is that I encountered a bug when I was working on a project, but it may be my bug, but I still share it)
//autoHeight: true,//Automatic height. When set to true, the wrapper and container will change with the height of the current slide, which is useless and sorted out by the way.
pagination : '.swiper-pagination',//Several slides and a few small dots
//paginationType : 'progress',
paginationClickable :true,//Click on the small dots above to jump
prevButton:'.swiper-button-prev',//left button
nextButton:'.swiper-button-next',//Right button
scrollbar:'.swiper-scrollbar',//Set the scroll bar
scrollbarHide:false,//The scroll bar is not hidden, the default is true hidden
scrollbarDraggable : true ,//Allow the scroll bar to be dragged by default false
scrollbarSnapOnRelease : true ,//Release the scroll bar to automatically snap
keyboardControl : true,//When set to true, you can use the keyboard arrow keys to control the slide slide.
//mousewheelForceToAxis : true,//Use the mouse wheel to control the vertical sliding of the slide with the next one. Remember to set the scrolling direction to vertical
mousewheelControl : true,
mousewheelReleaseOnEdges : true,//Use the mouse wheel to control the sliding in the left and right directions with the previous one
//lazyLoading : true,//Set to true to enable image delay loading img tag to add a class="data-lazy"
//lazyLoadingInPrevNext : true, // set to true to allow lazy loading to be applied to the images of the closest slide (previous and next slides)
lazyLoadingOnTransitionStart : true,//default false when the image is loaded after the transition to the slide, if you want to load at the beginning of the transition, set it to true
zoom:true,//Click the image to zoom in the example in slide3 <div class="swiper-zoom-container"> <img src="path/to/image"> </div>
zoomToggle :false,//Set to false, double-click zooming is not allowed, only touch zooming on the mobile phone is allowed.
})
</script>
</body>
</html>