vue-awesome-swiper

Each display block (screen) of Swiper is a slide, and pictures or texts are placed in the slide. All the slides are arranged in one line (or multiple lines) and contained in the wrapper. The main container contains the wrapper and Arrow button control navigation and pager control pagination. When the finger (or mouse) touches and slides the Swiper, the Swiper transforms the wrapper by calculating the sliding distance difference in each frame of the browser to produce the drag effect. When the finger (or mouse) is released, calculate the starting position of the next slide and set up a displacement animation (transition) for the wrapper, thereby producing a switching animation effect. The API of Swiper5 has not changed much compared to Swiper4. Swiper5 adds CSS mode (cssMode), and Swiper color style can be modified through CSS files. Swiper4 integrates the related options of the component, and modified the method of obtaining the swiper instance by the callback function to this keyword.