Swiper Tutorial--swiper Basics of Use (20)

This article is the official HTML5 training course Swiper Tutorial for h5edu institutions.
This content we introduce Swiper to add the mouse wheel Control page scrolling.

It is customary to build a basic Swiper page and set CSS styles.

<div class= "Swiper-container" >            <div class= "Swiper-wrapper" >                <div class= "Swiper-slide" > h5edu 1</div>                <div class= "swiper-slide" >h5edu 2 </div>                <div class= "swiper-slide" >h5edu 3</div>                <div class= " Swiper-slide ">h5edu 4</div>                <div class=" Swiper-slide ">h5edu 5</div>            </div>            <div class= "swiper-pagination" ></div>        </ Div>  

Then initialize it in JS and add the mouse wheel to control the paging properties.

var swiper = new Swiper ('. Swiper-container ', {               pagination: '. Swiper-pagination ',               paginationclickable:true,               spacebetween:30,               slidesperview:1,               direction: ' Vertical ',               mousewheelcontrol:true  // Turn on the mouse to control the paging property            });  

This way, when we slide the mouse wheel in the page, we can flip the top and bottom pages.

Click to enter Swiper Intensive tutorial: http://h5edu.cn/htm/step/h5edu_893.html

Swiper Tutorial--swiper Basics of Use (20)