swiper插件默认显示三张，第一张和第三张只显示一半，中间全部显示，点击可左右切换默认显示一二张

 

项目地址：

https://github.com/holiday0912/SwiperPreView

 

 

 

  var swiper = new Swiper(".swiper-container", {
    autoplay: false,
    loop: true,
    initialSlide: 2,
    spaceBetween: 20,
    centeredSlides: true,
    slidesPerView: 1.9,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    // 如果需要前进后退按钮
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev",
    // },
  });

 

 

 

 

 

方案二

他的网站效果：https://www.wangdian.cn/

 

  <!-- 行业解决方案 -->
  <section class="solutions">
    <div class="trade">
      <h5 class="trade_title">行业解决方案</h5>
    </div>
    <!-- Swiper -->
    <div>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <!-- s1 -->
          <div class="swiper-slide">
            <div class="swiper-content">
              <div class="s1">
                <div >
                  <h3 class="right_des_hh">零食行业解决方案</h3>
                  <p class="right_des_pp">自动抓取平台订单，与平台实时对接，智能审核拦截各类异常单，灵活多样自动拆分合并订单。</p>
                  <div class="right_des_jumpBox">
                    <a href="https://www.wangdian.cn/lingshi/">查看详情</a>
                  </div>
                </div>
              </div>
              <img src="https://gwcdn.wangdian.cn/static/index/img/newIndex/nut.png" alt="零食行业解决方案">
            </div>
          </div>
          <!-- s2 -->
          <div class="swiper-slide">
            <div class="swiper-content">
              <div class="s2">
                <div >
                  <h3 class="right_des_hh">美妆行业解决方案</h3>
                  <p class="right_des_pp">订单处理自动化，减少错漏，提升回购率。智能仓储管理，提升拣货效率，实现精准补货。</p>
                  <div class="right_des_jumpBox">
                    <a href="https://www.wangdian.cn/meizhuang/">查看详情</a>
                  </div>
                </div>
              </div>
              <img src="https://gwcdn.wangdian.cn/static/index/img/newIndex/presents1.png" alt="美妆行业解决方案">
            </div>
          </div>
          <!-- s3 -->
          <div class="swiper-slide">
            <div class="swiper-content">
              <div class="s3">
                <div >
                  <h3 class="right_des_hh">酒水行业解决方案</h3>
                  <p class="right_des_pp">订单自动审核，智能筛选个性化订单，提高订单审核人效，
                  多种订单自动拆分，解决订单超重，整箱捡货问题。</p>
                  <div class="right_des_jumpBox">
                    <a href="https://www.wangdian.cn/jiushui/">查看详情</a>
                  </div>
                </div>
                
              </div>
              <img src="https://gwcdn.wangdian.cn/static/index/img/newIndex/drinks.png" alt="酒水行业解决方案">
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-content">
              <div class="s3">
                <div >
                  <h3 class="right_des_hh">图书行业解决方案</h3>
                  <p class="right_des_pp">多样化系统策略，降低订单处理难度，支持一码多货、一货多位、图书换版，保证发货准确率。</p>
                  <div class="right_des_jumpBox">
                    <a href="https://www.wangdian.cn/tushu/">查看详情</a>
                  </div>
                </div>
              </div>
              <img src="https://gwcdn.wangdian.cn/static/index/img/newIndex/books.png" alt="图书行业解决方案">
            </div>
          </div>
          <div class="swiper-slide">
            <div class="swiper-content">
              <div class="s3">
                <div >
                  <h3 class="right_des_hh">家居行业解决方案</h3>
                  <p class="right_des_pp">智能分配拣货工具及人员，提升拣货效率。根据订单商品属性，多维度综合选取最优耗材。</p>
                  <div class="right_des_jumpBox">
                    <a href="https://www.wangdian.cn/jiaju/">查看详情</a>
                  </div>
                </div>
              </div>
              <img src="https://gwcdn.wangdian.cn/static/index/img/newIndex/home1.png" alt="家居行业解决方案">
            </div>
          </div>
        </div>
        <!-- 箭头 -->
        <div class="arr_BoxCent">
          <div class="swiper-button-prev">
          </div>
          <div class="swiper-button-next">
          </div>
        </div>
      </div>
    </div>
  </section>

jQuery

var swiper = new Swiper('.swiper-container', {
  slidesPerView: 'auto',
  spaceBetween: 100,
  centeredSlides: true,
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

var sw_button_next = document.getElementsByClassName("swiper-button-next")[0]
sw_button_next.onmouseover = function () { sw_button_next.style.background = "url('https://gwcdn.wangdian.cn/static/index/img/newIndex/rightArr1.png') "; }
sw_button_next.onmouseleave = function () { sw_button_next.style.background = "url('https://gwcdn.wangdian.cn/static/index/img/newIndex/rightArr.png')"; }
var sw_button_prev = document.getElementsByClassName("swiper-button-prev")[0]
sw_button_prev.onmouseover = function () { sw_button_prev.style.background = "url('https://gwcdn.wangdian.cn/static/index/img/newIndex/leftArr1.png') "; }
sw_button_prev.onmouseleave = function () { sw_button_prev.style.background = "url('https://gwcdn.wangdian.cn/static/index/img/newIndex/leftArr.png')"; }