How to make Materialize css Carousel slider Autoplay


We can see that this image slider is not auto
playing. So, in order to make some
auto-movement into the slider we need to implement some added code to it. In that
essence, we need to get back to index.html, and here we will be implementing some
kind of functions which is been created by us. So, how to do it? We will be using our own function over here. For say, we are using this function autoplay();
Now we have invoked this custom function here which is known as autoplay. So we need to define them. That is why we will be… Now we are providing here this autoplay option. So we need to define it. Another thing, we have not provided
this class name over here; it is practically indicating the class name. We had missed this class name here, that is
why it wasn’t working. If we get back to our project and reload,
we will see that this is the result. Practically there wasn’t any interval defined
over here. We haven’t mentioned what should be the time
interval. So that is it is showing such absurd output
over here. Those are practically maintaining no schedule
between two consecutive sliders. So this is what we need to mention here. Now, we are putting this time interval of
two seconds. So that is why we need to put this parameter
in milliseconds. Press CTRL + s, get back to your project and
reload, and now we can see that there is a sharpen time interval of 2 seconds. In the same manner if we increase it a little,
for say, the slider interval will be five seconds, so we need to set this parameter
accordingly. Get back to your project and
reload. Now we can see that the auto play option is
initiating five seconds after. So this is how we are now able to create our
own carousel slider into our project. In the next case we will
be learning about implementing this menu bar right over here and then our target will be
to put this menu bar into the position right on top of the carousel slider that we have
created into our project. And another thing in the last case, I would
like to suggest you to remove all those background colors and if you do not wish to keep
any more padding at the beneath of the carousel slider then you should be able to remove them
off. All you need to do, get back to stylesheet.css
and look for those padding-bottom options those we have turned on here in an order to
see the result whether they are exactly working or not. If you do not wish to keep all those padding
things then you need to remove this padding and you need to remove this background too,
if you do not wish to keep any background color
into the carousel slider, or into this individual slider holder right over here….

Add a Comment

Your email address will not be published. Required fields are marked *