0

In swiper, I set slidesperview to 5, and slidespergroup is calculated based on my list data. If the length of list data is 11, then slidespergroup is 3, then the first page is 5, the second page is 5, and the third page is 1. But in fact, there are five on each page. Is there any way to solve it?

config2:SwiperOptions={
    slidesPerView: 5,
    spaceBetween: 10,
    grabCursor:true,
    slidesPerGroup:1,
    pagination: {
        clickable: true,
        type:"custom",
        renderCustom(swiper,current,total){
            let html="";
            for(let i=0;i<total;i++){
                if(i==current-1){
                    html+=`<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>`
                }else{
                    html+=`<span class="swiper-pagination-bullet"></span>`
                }
            }
            return html;
        }
    },
    scrollbar: { draggable: true },
}

The above is my basic configuration, slidesPerGroup will be changed when acquiring data

this.config2.slidesPerGroup=this.homeCatalogsList.length%5==0?this.homeCatalogsList.length/5:parseInt((this.homeCatalogsList.length/5).toString())+1

I don't want swiper to complete automatically. Is there any way to solve it？I hope someone can help me

王婕妤
  • 1
  • please share working example in [stackblitz](https://stackblitz.com/edit/angular-swiper-b6qbap?file=src%2Fapp%2Fapp.component.ts) and screenshots of what is the expected output! – Naren Murali Sep 05 '22 at 06:31

0 Answers0