How to Enable Autoplay for SwiperJS React | JavaScript Carousel Swiper Tutorial

hello everybody and welcome to this new video in which you will learn how to enable the auto play feature in react swiper so a very common question which i'm asked is how do i actually enable this auto play feature in direct version of swiper um so what people want is when you start your website and they want this carousel to auto swipe right um so that's a feature which is built into uh swiper.js but it's kind of a little bit hidden and it's not very well documented so understand why some failed struggle but it's very easy so you should not need more than a minute to enable this so let me show you how this works um so on the left hand side i have a very small swiper project is based on react so we have our swipe instance and we have a couple of enabled modules you know like the navigation and the pagination which gives us those bubbles on the bottom and the arrows on the left and right side um and then i'm creating four slides here so i created a function for that um so the create slide function does nothing else then just create a swipe a slide instance um and add the image into that and the source is just a random uh url pointing to pixelm which returns us the random image and full hd resolution so uh that's pretty much it um and if you now want to enable autoplay you have to uh import a couple of things first so uh the first thing is over here you go and import autoplay right so not telling us hey you imported that correctly but it's not using it which is correct um now the second thing here is um you also need to import some css so you go import swiper slice css slash auto play so this is super important and to be honest i sometimes just forget that this exists um and then i forget it so you really have to add the css otherwise it's not going to work next we go to our swipe instance here and we need to add our autoplay module so we go auto play and now we're ready to use our module now you could be thinking okay and i'll add just something like uh autoplay right well wrong and this is the tricky part so uh first of all um this needs to be in lower case right so if you um if you use the uppercase a as described here in the module it's not going to work so over here is maybe lowercase and then uh very simple you could go for something like true okay so i'm going to save this and this should now um swipe to the next slide there um every three seconds uh which is the default value for autoplay uh if you want you can change the default setting um by just replacing uh true with the delay attribute here so you create a new object literally javascript object literal and you're setting to how many milliseconds you want between each transition so let's say you wanted a hundred milliseconds which is probably very quick but i'm going to save it and as you can see it's going to slide very quickly but i can change that to a second so that's a 1000 milliseconds and now it's just going to work fine so i hope this quick tip was helpful to you um if you have any comments or want to know more about swiper or you know just javascript development in general just let me know post in the comments and i see you in the next video [Music] you

Channel: Timo Ernst

Views: 22,010

Keywords: react, swiper, autoplay, enable, turn on, activate, javascript, html, css, swiperjs, Swiper.js, Turn on, Activation

Id: tmNtM0Gin-E

Length: 4min 16sec (256 seconds)

Published: Sat Feb 05 2022