Hello and welcome to this lecture.
In this lecture we will be creating a carousel to rotate images.
We'll be doing these Using put straps javascript.
This is the carousel that we will be creating.
He is in the US group from they put strap framework so you can see the images rotate on a timely interval
or you can manually rotate it.
So are going to attempt to create this to begin.
I've got my sample template here with references to my library.
I've got references to books crap library or saw to be a query library hosted by Google and then the
javascript mean five version hosted by Max.
I shall be writing the code for the carousel in between these bawdy tags are write the code then explain
the code I have got my carreau SOL code in here so I just need to explain it.
The pulte Deep near the outermost div Carol the require the use of a D for the carousel controls to
function properly.
So as I've given in this all tidy here I've given it an idea of carrousel it is housed inside a container.
So mozz bootstrap alamo's will need wrapping container.
So I've given the class container which was a wrap carousel and then Heidi here.
This is the alto carousel of giving it an idea of my carousel and a class of Carol's soul slide.
And then also giving it a detached ride of carrots.
Their Class carousels specifies that the dph contains a carousel that dot slide class as a see says
transition and animation effect which makes the item slide when showing a new item.
If you omit this class then you won't see that effect.
The did turn right it was carrousel here.
This attribute tells a bootstrap to begin the animation of the Curre So immediately when the page loads.
That's what this data right does.
These here the indicators indicate tools are tiny little dots at the bottom of each slide which indicates
how many slides there are in the carousel and which slides the visit or is currently viewing the indicator
as specified in an ordered list with class.
Dr. karasyov DASH indicators.
So this is the all order list specified in the order list.
The data slide attribute points to the idea of the carousel the data slide to attribute specifies which
slide to go to.
We click in on the specific dot.
This hero here is the wrapper for the slides.
These slides are specified in a diff with class of thought carousel dashed into the content of each
slide is defined in the DIV with a class of daut items.
This can be a text or images.
The DOT active class did dot active dot captive class needs to be added to one of the slides.
Otherwise the current cell will not be visible.
So the purpose of the active class is to make the slides fit Len.
These are the various images in the same key refers to a light source of the image it's the left and
right controls.
And there was you to go left and right off b carousel using the glove Click on image icon so that allows
you to talk all left or right manually.
So let's see what this guarisco looks like.
So these are the carousel.
There's a carousel in my shoulders loop of dots here.
The indicators to indicate what slides you're on.
You notice there are four indicators which indicate that there are four images on the carousel.
Only tells you your own image.
No thank you so much for your time and lives.
Sure.
We went through how to create a carousel using strap.