Hello, in this video, I am going to cover how to implement a cat whistle, so if we go to the official
Bistrot website and carrousel something along these lines where you have essentially a bunch of SLIDIN
images and you cannot text, you can add a bunch of different things inside of it.
OK, so let's get right to it.
To you ideally want it within the container row column, technically CADAVID.
So we just, you know, looks really good when it's breaking down with the bistrot breakpoints.
So that's what I do already.
Epicloud So we can call it whatever you want.
Who's calling the epic carrousel.
We will need this to refer to it later on within the carousel for stuff like these buttons, for example.
So technically you can put them somewhere else.
OK, so we also allow OK, so it's going to be slowing down the data that Schreuder attribute and this
can just be so.
OK, so first of all, we want to put a ordered list and in here we're going to have the list out and
basically the number of slides that we'll have and this is essentially the buttons you can think of
it like is.
No, the right you don't have to have them, it's all not I'm going to put a link to this in the description,
so feel free to check it out.
All the different features available, whether it's Crossfade, for example, JavaScript, for example,
whatever it is, feel free to have a look at it.
But I am going to add the data because look cool and they're good to navigate through.
I need a class called Carousel.
So in the creative.
And another mystery item and this data that's all yet of.
And perhaps and then decided that so if you change it here, sure here and anywhere else that we use
it.
Well, I dated dash
dash to E cause I just pardon them, but the first one is zero.
The incremented by one zero, one, two, three, four, etc..
I'm going to for a class of active because this is the first one that will be active.
If you want the second one to be active by default or the third one on the fourth one, you feel free
to activate that.
We don't need the active class anymore.
Do we really need that for whichever one was initially active and we don't need anything inside of the
system?
So next, what we're going to do is create this.
And this is going to have a class of.
So does Ginna.
And
basically, when you go back to this is the main actual sliding items are going to be placed.
So, you know, inside of here you have another dip.
And each one of these is the council item, which is on the slide.
So it's a class the item and you just active again only for the first one or whichever button is too
active.
So if you have this one, which is technically the second one, you would put this as active and then
you put the next the second item of activity.
Also, notice I made a little mistake here and will be zero one, two, three, four.
I did actually mention that.
I just forgot to put it in.
OK, so next, you know, here is where you can put whatever you want, I imagine work really well in
a council and you can just have an image.
But we're going to have some text as well.
Again, feel free to check out the bootstrap website.
They have a bunch of different variations and feel free to experiment yourself.
You can use pretty much whatever e-mail element that you want and make it your own carousel.
OK, so I am so sorry for what you want.
I've got a bunch of nice images that are find on Google.
They are all the same resolution and ratio.
It helps if they more importantly are the same ratio.
So this is a 16 by nine ratio and the resolution is 19, 20 by 10 at the top.
It just doesn't look very good as an extra task.
I recommend that you change one of the images because the source code is available and get exactly what
I'm doing or recommend they change one of the images to something other known like anything that's not
16 by nine.
And you'll see what.
OK, so have a class and it's going to be dash, blah, blah element, and I'm going to add to the blue
dash one hundred, so it's going to have a whiff of one percent.
So this just basically means it's going to show all of the image you may not be displaying yet the full
resolution, but it works better with the grid system and the low grade error because we closed off
the tag.
Next we're going to do is put our div and this is going to be a class of carrousel dash caption.
D, That's not.
And the dash and the dash.
OK, so I'll explain what that does in a second.
First of all, I just literally want to put it all together now and none of this slide so you can think
of this as the title.
Feel free to put what you want.
And I'm going to put a paragraph tag in there.
You could put a bit more information here and keep it simple.
Put an image one, but, you know, feel free to put some more descriptive information in there again.
Feel free to structure the inside of the council caption however you want.
So what do these to do?
It displays it none, which means it doesn't display it at all unless it is on a medium screen size
or above some medium, large, extra large or extra large, it will be block level element, which it's
going to display if it's less than medium.
The breakpoint so small or small, just because the carousel gets a little too small, having text on
there can really obstruct the image when it's big, the text and the take up that much relative to the
image.
When it's small, you can take a half or even more than the image.
So you want to generally just get rid of that.
And that's one item done instead of, you know.
You know.
Top hat, again, was just copy and paste this.
So I did a couple of changes tonight, we're going to say Samoyed, and that is to say they exploited
and can be traced and we need to change the source files.
You could have the same one, but I think it looks better to sit them.
And so if you just heard a little horrible sound, that's what it was.
And if we go back.
This.
Again, feel free to use whatever you want.
Probably some context or to whatever website or web content to let go and OK, so let me know.
So what we want to do is.
Actually, let's see what we get, so we get this.
Inspect.
The consulate was.
And we got the first slide blow a law.
OK, so I'm probably watching.
The.
That's why because, again, we've got to move active on all those of the two, so.
And that works great, and as you can see, it breaks down and when you get to medium or less, I mean
less the medium.
The caption is no longer displayed.
But now that's the key and the backwards and forward button as well.
Again, these buttons are optional.
You do not have to add them if you do not want to.
But again, I think you just add to the.
The navigability know even a word navigability the ease of navigation.
So we need an anchor and I have a class of callosal that's control dush red.
So this is the previous controls of this world.
Move it.
No one slide left or one side backwards.
Another ref.
The ref is literally going to be this right here.
So, again, we are using that all day.
Next is going to have a roll on the button.
And when our data does, Lloyd, and you just press the previous.
And in here, we're going to have a company on Span's, and the first one is.
He's going to have a class.
Of council, dash controlled dash, grab, dash, all you can see, we just showed the previous icon,
which is an arrow pointing left again, you can put whatever you want to.
You know that that's just say my chicken is ready to flip is fine.
I'll just do it a little less on the other side.
No biggie.
B.B. King wanted to tell you that slice roughly 10 to nine.
OK.
Previously called area
dash.
It then equals.
And that's not going to have anything to focus upon itself.
Another class of that's all August only for this full screen readers, but it's good to put that in
there.
So it is great that Bouchra provide all of this builtin.
We can copy and paste this because as you can imagine, the next button is very similar.
Just the next class, we still referring to a precursor, the Super Bowl next.
And this is the next.
The screen media will save next person that should be all ready to go refresh.
There we go.
We can move backwards and forwards.
So that is it.
That is how easy it is to implement a carousel.
Feel free to check out the source code on the video page.
If you want to have a quick look at it, recommendations, you can follow along.
We'll help you a lot more.
And I will provide a link to the description.
A lot more information on here, what to do.
Most want to know one thing.
If you go to here and you copy and paste all of this code.
It won't work or you'll look like it's not working this because look here, there's no source for the
images from the first time I did it in two or three and I would be suffering and copy and paste sounds
like why isn't it showing up like this is because these are.
Actual images and those images aren't met here somewhere, but those images aren't here, so just make
sure you do put some images.
Otherwise it just won't look like the lie that if you have any questions, feel free to put me on message.
And I look forward to seeing you in the next video.