使用Swiper4插件问题

好久没使用swiper.js插件,那天使用此插件来展现一个轮播效果,使用的是swiper4的js和css文件,正常我们初始化Swiper会这样写:

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  script>

可是竟然不起作用,分页器呀,前进后退按钮啥的都没反应,有一些方法也都没用,找了好久终于发现问题,原来Swiper4和之前的使用方法有些不一样,在Swiper4里面初始化写法是:

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  script>

你可能感兴趣的:(javascript)