swiper出現劃不動解決辦法

直接上代碼

html部分

// HTML
<div className="swiper-container swipertwo">
          <div className="swiper-wrapper two">
            {home.types.map(item=>
              <div className="swiper-slide"  >
                <div className={Styles.Listone} key={item.id} onClick={()=>this.getTypeList(item.id)}>
                  <span className={Styles.Listname}>
                        <img src={imgjpg}/>
                        <p>{item.type}</p>
                  </span>
                </div>
              </div>
            )}
          </div>
        </div>

修改之前
在這裏插入圖片描述

swiper部分

// An highlighted block
var swiper = new Swiper('.swipertwo', {
      slidesPerView : 5,
      slidesPerGroup : 1,
      //加上這三句話即可
      paginationClickable: true,
      observer:true,//修改swiper自己或子元素時,自動初始化swiper
      observeParents:true,//修改swiper的父元素時,自動初始化swiper

    });
  }
</script>

修改之後
在這裏插入圖片描述

問題解決了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章