Overflow with Swiper.js

Design help Custom code
1

Having a little code trouble.

I’ve inserted a slider using Swiper.js and for the most part is has worked okay. For some reason when I change the screen size, the page now becomes very wide, and I can scroll way over the the right with just white space. I’ve tried overflow: invisible but have not been successful. It seems as though it only happens after the size of the screen is changed.

LIVE
http://nohmii-stage.webflow.io/

READ ONLY
https://preview.webflow.com/preview/nohmii-stage?preview=dde7062615413c3a1c19ea9f1c63ce9b

32 PM
32 PM2704×1426 362 KB
16 PM
16 PM2710×1430 692 KB

2

I don’t see this problem (chrome & Firefox). Maybe clear cache

  • put the arrows inside swiper container to follow the swiper docs layout.

Last. Put your JS code inside onReady (maybe this is why you see bugs):

<script>
   // On document ready, initialise code.
    $(document).ready(function(){
    /* swiper code */
     });
</script>
3

Also you load swiper asset 4 times!! (could cause bugs)

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.esm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.esm.bundle.js"></script>

Choise one CDN :slight_smile: This + Move this before body (Why? performance )
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>

final code (before body - Individual Page Body Code):

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>

<script>
   // On document ready, initialise code.
    $(document).ready(function(){
    /* swiper code */
     });
</script>

Bad practice

General: If you use swiper only on some pages - do not add this assets to Entire Site (Again performance).

1 Like