swiper4 usage

1.swiper: HTML structure

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
    </div>
</div>

  2. Style

       .swiper-container{
            margin:0 auto;
            width:100px;
            height:200px;
            overflow: hidden;
            border:1px solid red;
        }
        .swiper-wrapper,.swiper-slide{
            width:100px;
            height:200px;
        }

  3. horizontal carousel

mySwiper new new Swiper = var ( 'Swiper-Container.', { 
        AutoPlay: to true, // Optional, slides automatically 
        Loop: to true 
    })

  4. Vertical Rotation

mySwiper new new Swiper = var ( 'Swiper-Container.', { 
        AutoPlay: to true, // Optional, automatic sliding 
        direction: 'vertical', // control the scrolling direction, horizontal or vertical 
        Loop: to true 
    })

  5. About switching event

  6.

Guess you like

Origin www.cnblogs.com/dyy-dida/p/11128345.html