Swiper is often used for content touch and swipe on mobile websites
Swiper is a sliding special effects plug-in created by pure JavaScript, which is aimed at mobile terminals such as mobile phones and tablets.
Swiper can realize common effects such as touch screen focus map, touch screen Tab switching, touch screen multi-image switching, etc.
Swiper is open source, free, stable, simple to use and powerful functions, and is an important choice for building a mobile terminal website!
Based on swipe4, a full-screen scrolling effect on a mobile terminal was written. However, the picture cannot be adaptive to the size of the screen device.
At the beginning, you need to set up mobile configuration
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <!--Introduced hereswipeofcssdocument--> <link rel="stylesheet" type="text/css" href="css/swiper-4.3." rel="external nofollow" />
Then html and body need to be set 100% width and height. If there are nested boxes or elements in the swipe, it must also be set 100% width and height.
The vertical screen effect needs to be set
<!--Introduced herejquerydocument,If necessary -->
<script src="js/jquery-1.12."></script>
<!--Introduced hereswipeofjsdocument-->
<script src="js/swiper-4.3."></script>
<script type="text/javascript">
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',//Set vertical screen. The horizontal screen is similar to the carousel image. The default effect can be not set.//slidesPerView: 'auto',//Set the number of slides that the slider container can display at the same time. 'auto' will automatically set the number according to the width of the slides.//centeredSlides: true,// When set to true, the active block will be centered instead of the left in the default state.//This is to display the pager, provided that the pager has been set in the htmlpagination: {
el: '.swiper-pagination',
type: 'fraction',
},
});
</script>
There is a pit below here. Many attribute values in Baidu are not quoted, which makes them useless - it is best to check it on the official website
For example, the aboveel:'.swiper-pagination' el (property):'.swiper-pagination' (property value)
Summarize
The above is the swipe usage and vertical page scrolling method introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!