Let's dive into more components,
more features we can add with the help of bootstrap.
And I also want to emphasize again,
that bootstrap is just one possible third party package.
One of the many CSS packages you can use.
There are other packages which provide similar components,
or maybe also some other components as well.
But here with bootstrap, if we go back to components,
we can, for example, always include a carousel.
And a carousel is basically a slideshow that allows us to
cycle through different elements of, for example,
through different images.
And for that here again,
we find detailed documentation
and there are tons of different variants,
which we can include, different things we can configure,
but I will just take this
with indicators example here,
where we have a slideshow with some indicators down there
where we can see where we currently are.
And again, since we included bootstrap,
both the CSS package and the JavaScript package,
since this will require some JavaScript code in order
to run correctly, we can just grab this code snippet here.
And of course we can also find the unit,
but here I'll just grab it.
And then in our index HTML file below the header,
I'll add the main section, and in there
I'll throw in that div, that div which has my carousel,
and actually I'll change this to be a section
because A: that is semantically a bit better, I would say.
And B: I also want to show you that of course,
these code examples are just examples.
Of course, you need to adhere to the general structure.
And of course you need to use the general attributes
and CSS class as you see here.
But of course you can also replace divs
with more meaningful HTML elements.
You can fine tune this,
as you will also read into documentation.
And therefore here I replaced the div with a section.
And with that, if we save this,
we now see this image placeholder here.
And we see the image placeholder here on our page
because actually the example I copied
does not exactly give us what we see here,
but instead it's using images.
And at the moment, those images
don't really point at any image.
So now we'll need to throw in some images
in order to then see something.
And hence, we should now do that as a next step.
Now attached you find an images, sipp file,
which contains free images, which I will use here.
But of course you can also bring your own images.
You can otherwise just download and extract it
and add the images folder into your project folder.
And with that added here,
I'll just quickly point at these images
and I'll use the berries image for the first image element.
Then here I'll use the christmas image and here I'll use
the tasty image and we could, and should,
of course also add some alt text,
but I'll not do this right now
because the main focus here really just is about
how you can quickly get started with
those third-party packages
and how you can generally use them.
Now I pressed auto format and I'll save this file.
And we now see our image here.
And it's huge because there is no other styling applied here
to this carousel, but you should see the controls here.
They might be a bit hard to spot,
but if you come close to them with your cursor,
you should see them and you can go forward
and you can go backward.
But of course at the moment, as I said,
we've got absolutely no styling. The container is just huge.
And therefore this overall element
of course is not in perfect shape.
And that's good because that brings me to another key topic:
just because you're using some third-party package does
not mean that you're not allowed
to write your own code anymore.