マルチキャストプラグインswiper

swiperで輪番図を作ったばかりの頃、私はずっとできなかったが、私はswiperのjsだけを導入し、swiperのcssを導入しなかったことに気づいた.どちらも導入する必要があり、jqueryライブラリは有無にかかわらずswiperを実行することができる.基本構造の例:

            
             <style>  
            img{width:100%;}
            .swiper-container {
                float:left;
                width: 50%;
                height: 280px;

            }
             style>
             <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="images/timg.jpg">div>
                    <div class="swiper-slide"><img src="images/timg.jpg">div>
                    <div class="swiper-slide"><img src="images/timg.jpg">div>
                    <div class="swiper-slide"><img src="images/timg.jpg">div>
                    <div class="swiper-slide"><img src="images/timg.jpg">div>
                    <div class="swiper-slide">Slide 6div>
                    <div class="swiper-slide">Slide 7div>
                    <div class="swiper-slide">Slide 8div>
                    <div class="swiper-slide">Slide 9div>
                    <div class="swiper-slide">Slide 10div>
                div>
                
                <div class="swiper-pagination" style="bottom:40px;">div>
                
                <div class="swiper-button-next">div>
                <div class="swiper-button-prev">div>
            div>

            


            
            <script>
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            });
            script>
            

これが基本的な使い方です.