Tips for using swiper (1)

Swiper It's a very easy-to-use plug-in , Meet various use conditions and environments , Response type , Multiple columns , Multiple lines , wait , however , Many times, there are still some conditions Swiper Provided API It can't directly help us solve the problem , But it can be handled in a flexible way . What I want to share today is about swiper Left and right switch buttons , Display or hide problems of paging navigation .

Sometimes , Our needs are like this ,1, When swiper When there are no more pages , The left and right buttons do not appear ,2, More than one page , Left and right buttons appear , But not forward or backward , There will be left and right buttons that cannot be clicked state .

swiper During initialization, the left and right buttons that cannot be clicked will be added ‘swiper-button-disabled’ This class, We can use css For this class Add the appropriate style , If you want to hide , You can hide it directly , But to do so , When only one of the left and right buttons is disabled In the state of , There will be situations where one side has no side . The solution to this problem is , We are swiper Get after initialization swiper object , And get swiper.isBeginning and swiper.isEnd attribute , Then judge if these two attributes are true That means ,swiper At the same time , Neither forward slide You can't go backwards slide 了 , That means there is no more than one page , Then we can execute the logic we want to execute .

Of course , If your swiper It is not responsive to adjust the number of displays according to the screen size , Then don't bother , Direct judgment slide That's enough ,

It should be noted that , When judging in this way , Must be in browser When the window size changes , Manual trigger swiper Of update event , And then get isBeginning and isEnd attribute , Only in this way can we get swiper The result after adjusting the quantity responsively .

gridSwiper.update();
let $gridSwiperCheck = this.$('.swiper-container-horizontal .home-todo-check');
if (gridSwiper.isBeginning === gridSwiper.isEnd) {
   $gridSwiperCheck.hide();
} else {
   $gridSwiperCheck.show();
}

Copy