el-carousel實現分頁

<el-carousel :interval="5000" arrow="always" :autoplay="false" height="600px">
    <el-carousel-item v-for="item in Math.ceil(goodsList.length / 4)" :key="item">
        
        <ul class="price-main">
          
          <li v-for="(site,index) in goodsList.slice((item - 1) * 4, item * 4)" 
              :key="site.id"
              v-if="index<=3"
              >
              
                <p>
                  <span class="shortname">{{site.shortname}}</span>
                  <span class="label">{{site.label}}</span>
                  <span class="label">{{site.label1}}</span>
                </p>
                <p>
                  <ol>
                    <li>
                      <p>貼現率(%)</p>
                      <span>{{site.price}}</span>

                    </li>
                    <li>
                      <p>預計成交價(元)</p>
                      <span>{{site.deal}}</span>
                    </li>
                    <li>
                      <p>每十萬扣息(元)</p>
                      <span>{{site.discount}}</span>
                    </li>
                  </ol>
                </p>
                <p class="label2">
                  *{{site.label2}}
                </p>
                <p class="sqqy-p">
                  <a class="sqqy" href="#">申請簽約</a>
                </p>
              
          </li>
        </ul>
      
    </el-carousel-item>
  </el-carousel>

如下圖:

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