Swiper插件分頁器硬應該怎么樣使用

  1. 創(chuàng)新互聯(lián)的服務器不僅具有高穩(wěn)定性，高速訪問，而且易于管理，安全和輕松使用，以減少用戶在服務器維護中的能量和時間成本，并專注于自己的業(yè)務的開發(fā)和推廣。億速云服務器，致力于為用戶提供性價比最高的服務器！

    站在用戶的角度思考問題，與客戶深入溝通，找到順德網(wǎng)站設計與順德網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站制作、網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋順德地區(qū)。

    引入swiper.min.css

  2. Swiper插件分頁器硬應該怎么樣使用

  3. 引入query.min.js 和swiper.min.js

  4. 分頁器以及輪播的一般樣式引用

    <style type="text/css">
            .swiper-container {
                margin: 0 auto;
                position: relative;
                overflow: hidden;
                width:100%;     
            }
            .swiper-slide {
                position: relative;
                width:100%;
            }
            #article-slide p img {
                width: 100%;
                display: block;
            }
            #article-slide .swiper-aa {
                width: 100%;
                position: absolute;
                text-align: center;
                z-index: 210;
                bottom: 10px;
                left: 0;
               
            }
            .swiper-pagination-bullet-active{
                background: red;
            }

            #article-slide .swiper-pagination-bullet{
                margin:0 5px;
            }
        </style>

  5. html樣式：

    <div class="swiper-container swiper-container-horizontal" id="article-slide">

     針對圖片
        <div class="swiper-wrapper">
            <div class="sec-activity swiper-slide swiper-slide-duplicate">
                <p>
                    <a href="http://m.welltrend.com.cn/special/meiguo-shuangtui-2017"><img
                        src="img/retreat_03.jpg"></a>
                </p>
            </div>
            <div class="sec-activity swiper-slide">
                <p><a href="/Responsive-56255.html"><img src="img/retreat_04.jpg"></a></p>
            </div>
            <div class="sec-activity swiper-slide swiper-slide-prev">
                <p><a href="/Responsive-56266.html"><img src="img/retreat_05.jpg"></a></p>
            </div>
            <div class="sec-activity swiper-slide swiper-slide-active">
                <p><a href="/Responsive-55642.html"><img src="img/retreat_06.jpg"></a></p>
            </div>
        </div>
    針對分頁器
        <div class="swiper-aa swiper-pagination-clickable">
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet"></span>
                <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
                <span class="swiper-pagination-bullet"></span>
        </div>
    </div>

  6. js部分

    var countrySwp = new Swiper('#article-slide', {
                pagination: '.swiper-aa',
                spaceBetween: 25,
                initialSlide: 0,
                slidesPerView: 'auto',
                centeredSlides: true,
                paginationClickable: true,
                paginationType:'bullets'
            })
           

    創(chuàng)新互聯(lián)服務器與全球多個國家頂級機房直接合作，提供包括香港、美國、日本等國家和地區(qū)的服務器，需要的請聯(lián)系創(chuàng)新互聯(lián)官方客服！ 優(yōu)質(zhì)的服務器租用!

本文題目：Swiper插件分頁器硬應該怎么樣使用
網(wǎng)頁URL：http://bm7419.com/article6/jjsgig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站收錄、響應式網(wǎng)站、虛擬主機、App設計、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網(wǎng)站建設