CODEWITHSUNDEEP
javascripthtmlcssscrollbarswiper.js
Anu
Anu

Reputation: 1742

swiper.min.js scrollbar: Force scrollbar

I have used swiper.min.js in my website. However, I need a scrollbar to appear on the right side of my website, because majority of my target audience will be using laptops without mousewheel, and it will be impossible for them to scroll without difficulty.

I already tried adding the following:

<div class="swiper-scrollbar"></div>

and instantiating it as follows from my HTML file:

 <script>
   var swiper = new Swiper('.swiper-container', {
     scrollbar: {
       el: '.swiper-scrollbar',
       hide: true,
     },
   });
 </script>

None of this works. A scrollbar momentarily appears and it instantly disappears. I have checked swiper.min.js documentation, but it doesn't work. How can I force a scrollbar with proper scroll functionality on my website?

Upvotes: 0

Views: 1768

Answers (1)

Tim Gerhard
Tim Gerhard

Reputation: 3587

This is not the intended solution, but it fixes your issue. Basically what your swiper setup does is, it adds overflow:hidden to your .swiper-container css class right after the initiation.

I'm sure there must be a way to prevent this from happening but if you cant figure it out this will help for sure (allthough again, this is not the intended solution):

Add the folowing snipped to your css:

.swiper-container {
     overflow: auto !important;
}

The !important makes sure, that swiper cannot override it via JQuery.

Upvotes: 1

Related Questions