How to make a Full-width slider with Indicators in Materialize CSS

How to make a Full-width slider with Indicators in Materialize CSS


Now so far that we have learnt in our tutorial,
we are now aware of how to bring on some carousel sliders from the materialize
css website and use it into our project, but still now we are miles away of creating the
proper, or implementing the proper carousel slider
into our project. As an instance so far the slider we are using,
actually instead of a full-width slider it is using this individual type of slider;
this is the style of it. All it is doing it is practically using
the defined width and height of the image that you are using currently. But this is not the true manner; we haven’t
used any kind of full-width slider property here, we haven’t initialized any full-width
slider property here. So, here
it is, this is the full-width carousel slider initialization; all we need to do, we need
to copy this one from here; just copy it, get back here into your project and
instead of this one, we are going to implement it here. So there it is so far. Now if we press CTRL + S and get back to our
project and reload, we will see that this is the actual scenario and in this respect
I would like to say that this varying size of
images, it is making all the differences; it is now getting more than the full device
height over here and this is what we need to check. But first of all let’s bring on some indicators
here. In order to do so the second thing that we
are going to do, we are going to put a comma here, and we are
going to make use of this instructions: indicators true. Now if we press CTRL + S and get back to our
project and reload, and now we will see that here are some indicators those are right now
in action. Now here is the limitation of using image
source into our project. Moreover it is much more easy to implement
these sort of things over here. As if, if we want to
overlay another div or block element on this carousel slider, then we need to make some
added manipulation, some css tricky manipulations out there which could be
way tricky and which could be way complicated. To avoid that, that is why we will be getting
back to our project and instead of using an image source into the carousel slider
that we are using, we are now about to use some kind of background image and, what is
the advantage of using a background image? First of all I do not need to manipulate the
image itself; manipulation of image includes some
third party Graphics software those we may not want to use into our project. And the second thing is all of them should
be defined into a definite width and height; for say as low
as 1280px to 720px. But this is not the exact same case that we
could see in each and every cases; we may not be inclined to use this kind of things
over here. So what is the additional thing that we could
use in this particular case? If we bring on our images as a background
source, then we can implement the syntax background-size cover, and
we can set the height of block element as it satisfies or manifests of our project. As an example if we set the height of a block
element to 900px for say, then we do not need to manipulate
our images every time into a certain height of 900px. Instead, we can use the syntax of background-size
cover, and in that essence the whole image will be fitting into that individual block
level element. So this is the advantage of using background
image in a slider instead of using an image source, and as I have specified earlier, that
it is much more tricky to suppress your image element and write
something on it. Instead that, we can go through this block
level element. So that is why we will be getting back to
our project and here, first of all, this is the carousel slider that we are using into
our project and we can see that all of them are
practically using an image source. So, instead of using an image source into
our project, if we bring on our images as a background image, then there’s another way
to implement background images into our carousel slider
into your project; and here it goes. Just get down and you can see that this is
another option where you can use a particular individual block level element where you can
use your own separate button, or you can use a header tag,
or you can use anything that you want and you can use all these indicators as we have
seen over here. So, this is practically the code which will
be bringing on all of these things into your project. So the very first case that we are going to
do, we are going to use this individual code; copy it, get back to your project and here,
instead of using this one we will be now using this individual code that we have copied from
the materialize css web; and here, instead of
this kind of initialization, let’s see what kind of initialization is being specified
over here; there it goes. You can initialize this particular carousel
slider into your project with the jquery and this
is what exactly we are going to do; so we are going to copy this one, and here we will
be pasting it. There it goes. We can see that the same thing will be happening
over here, this is the full-width, that means all those background images are into that
particular carousel slider which will be full-width in nature. That means it will be occupying this whole
device-width, and it will be having some sort of indicators out there. So this is up to it. Press CTRL + S, get back to your project and
reload. Now
you can see that this is the result so far. So, here it goes. This is the second carousel slider panel;
this is the third one; this is the fourth one; so all of them are right over here.

Leave a Reply

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