- [Instructor] Hey guys,
this is Nila from Elementor.
Today we'll go over the
image carousel widget.
With it you can add interesting
and dynamic galleries
to your page.
As you can see on this page,
we have a gallery image carousel,
a three column carousel,
and a logo strip carousel.
To begin, let's click on the
Edit with Elementor button.
First, let's search for the
widget in the search bar,
and drag it to where the
blue line is displayed.
Now once the widget is placed,
you'll see the Edit Image Carousel area
with the content, style, and advanced tab.
In the content area, you have full control
over the image carousel contents.
In the content area, you have
the image carousel options
and additional options.
In the image carousel
options, you can add images
from the media library
using a WordPress gallery.
So you can see the images
are now displayed on the page
and we have image size.
The image sizes that are listed here
are the image sizes that
you set for your website
under Settings > Media.
So here we have thumbnail,
medium, medium large,
large, full, and customize.
Now if we customize
it, you can set a width
and a height,
apply it.
Now you could choose the slides to show.
Let's pick one.
Image stretch, which means
stretching the image out
in the widget.
Navigation.
You can choose whether to
display the arrows and dots,
or only arrows, only dots, or none,
and you could add a link to the carousel.
You could choose media file link,
which links every image to its media file,
or custom URL.
Those were the image carousel options.
We'll move on to the additional options,
where you could choose
whether to pause on hover
or autoplay when you enter the page,
whether it starts playing on itself,
and you have autoplay
speed, infinite loop,
effects, as slide or
fade, animation speed,
or direction in which it will play.
All right.
Those were the contents
options of the image carousel.
Now we'll move on to the style options.
Here you have full control
over the navigation styles
and the image styles.
Under navigation styles, you
could set the arrow styles
and the dot styles.
Under the arrow styles
options, you could choose
the arrow's position, inside the carousel,
or outside it,
and you could choose the arrow size,
and its color.
Under the dot style options,
you have the same options
of dot's position, which
means outside the carousel
or inside the carousel,
and the dot's size,
and its color.
Now for the image style options.
You have a border type.
Here you could choose the
type of border for your image,
and its width,
which gives a very cool
touch to your carousel,
and its color,
and the border radius.
Let's give it 20.
As you can see, it's rounded
the corners of the carousel.
Those were the style options
of the image carousel.
And now I'll show you
how to set a carousel
of three columns.
First, let's search for the widget again,
and drag it into the page.
Let's insert those images,
and set their size.
Now for slides to show,
we'll leave it at three,
slides to scroll, we'll give it one.
For image stretch, we'll leave it at no.
And navigation, we'll leave
both the arrows and the dots.
Now I'll show you how
to set a bigger space
between the images.
We'll just go over to the style tab,
image style options, and here you can see
that the spacing option is added.
Here you have the defaults,
or customize.
The customize always opens at 20,
but you could set a bigger space,
or a smaller one.
And now I'll just give them
a bit of border radius.
Let's put it in preview mode,
and here we go.
I hope you enjoyed this video.
For more videos and tutorials,
subscribe to our YouTube channel
or visit us as docs.elementor.com.
