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
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>
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
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