Overview and Demo of the Advanced Card Carousel
In this tutorial I'll show you how we can make this kind of advanced slider in your Elementor website. Here on the right side you can see a mini card carousel and when you change this carousel everything is changing accordingly: the background image, the content on the left side.
On the very left you can also see these indicators which are also perfectly working. These transitions are also so smooth. So when you go forward we can see that forward animation, and when you go to the previous slide we can also see that backward animation.
Okay. So this slider is also 100% responsive; it's perfectly working from tablet, mobile, or any other devices. Without any further ado, let's see how we can make that.
Okay, here I will start everything from scratch. But if you don't want to watch this full tutorial and only want to get this advanced slider as a ready-made template, you can also get this from my template shop.
Importing the Ready Template and Preparing to Build
So here after downloading this you will get a zip file, so you just need to unzip that. Inside that you will get both the container and the old non-container version. So if you are using the new flexbox container, let's go to here and you will get this JSON file. We need to upload this to our template upload option. Let's just drag this to here and we can see this one: advanced carousel with card carousel. Let's insert this.
If we save this and see it from our preview we can see it's perfectly working. And here on this edit page you can also see we have a wrapper container with this five slides, and for that we have also taken five heading widgets. From the navigator view you can see there are five headings, five paragraphs, and five buttons for that which are changing with that carousel change. Also for this background image we have also set that from our container option on here.
Okay, so if you don't want this ready template you can also start everything from scratch. I want to delete all of this content and now I will start everything from scratch. Let's click on this plus icon and select these two-column structure. First of all I want to make it full height, 100 vh, and instead of boxed make it full width.
Building Left Column: Text Stack, Styling, and Layout
Now inside this left column we will take both our indicator and this text. For our indicator we will take a container and for the text we will take another one. Let's go to here and take another container inside that, and under here let's also add another one. As we want to place this one after another, for this parent container I want to make its direction row.
For our first one make its width full width and make it only 30 pixels. Inside this container we will take our text. If you go to here we can see when we change our slide we can see multiple headings, so basically we will put all of our headings inside a container. Add a container and here add a heading widget. Change this text and also do some basic styling like changing the text color.
We cannot see that, so for that container temporarily we will take a dark background color. Again go to here and I want to make some changes with the typography. Let's also add a line height. Inside this container we need to make other five headings, which we can do by duplicating. Before that I want to do the basic structure first, so I will copy this container.
Instead of this heading I want to add a paragraph widget, change this text, and also make its color white. Also change font size and apply some text shadow under that so we can perfectly see the text above our background image. Lastly, like this paragraph, let's duplicate this container again and inside that we will take a button widget. From the styling change its background color to this blue and also adjust the padding. Reduce the spacing at the top by using a negative top margin.
Centering Content, Adding the Carousel Widget, and Preparing Slides
Now this looks good. I want to place all of this content at the center, so go to the parent container and make its justify-content center. Let's also add padding on left and right side, make it 15%.
On the right side, to add the slider we will use the Testimonial Carousel widget. Make it center by going to the topmost container and make its align-items center. We don't need this paragraph; we will only use these two text and this image, so delete this. Put the same text like here and also add a subtitle here. Upload this image. By following this let's also add the content for the other slides.
Okay, we have added a total of five slides. After that I want to make slides-per-view five and also make a custom width 1200 or 1400 pixels. From the advanced option I also don't want autoplay, so turn this off. To change the default look to our card carousel here we need to do a couple of things.
First, with our top container we need to add a class: it is dash-slider. With our carousel we also need to add another one: it is that-side-slider. After that we need to write some custom CSS code. If you don't know this, the custom CSS option is only available in Elementor Pro. If you don't have Elementor Pro you can quickly get this from my link in the description.
Paste this code. We still cannot see that, so we also need to add some JavaScript code. If we paste this, okay now we can see our slider. You also don't need to worry about any of this code snippet; I will give all the code snippets on my website and also give that code snippet link in my description. From here you just need to copy and paste that code.
In the custom CSS code I have also given you some customization options like changing the radius of the sliders, changing the height or the active height — you can do all of this from here. You can also control the intensity of the overlay from this option from zero to one. Now we need to do some adjustment. First I want to make the space between the items 30 pixels and also on the left side you can see some gaps so make it 0. I also add some padding at the bottom and adjust typography.
Custom Navigation Buttons and Text Animation Setup
Okay, now that looks good. From the content advanced option you can see I've enabled both the arrows and dots for this carousel but we cannot see them because I disabled these from our custom CSS. I don't like the default design of these arrows; I want to do this with the button widget which gives more flexibility.
To add the button first take a container, insert a button widget, remove the text and only add an icon. To make it a fully round shape make the border radius 100 pixels. If you see spacing on the right side make it 0 and adjust the padding to make it fully round. Change the background color to a semi-transparent color and change the icon color to white.
Duplicate this to create the second button and change its icon to the right arrow. Place these after another by going to the parent container and make its direction row and adjust spacing to 17 pixels. Reduce spacing further by giving some negative margin. From the preview if you click the button nothing happens; to make it functional we need to add classes. For the first button add the class slider-acts-left and for the second add slider-acts-right. Now it's perfectly working.
After that let's work with our text. We need to duplicate items, but before duplicating I want to check tablet and mobile because if we duplicate first and then do responsive work we must repeat steps. Go to tablet and reduce the font size to 50. On mobile reduce further to 30 pixels. Back to desktop and duplicate headings and change content. Do the same for paragraphs and buttons.
To achieve the text animation effect we need to add a class to the parent container of headings: changing-widget, and add custom CSS. From layout also make its overflow hidden. You can see we achieved this effect with the heading. For the paragraph container make overflow hidden, add the class and paste the exact same custom CSS. At the top of this code you can change the speed of the transition; for the paragraph make it a little quicker, 0.5 second. Now we can see two different speeds for these two different text elements. Do the same for the button container. We have done all the things with our text.
Indicator Bar, Slide-Linked Backgrounds, Responsive Tweaks, and Finalizing
Next we want to add our indicator. Previously we have taken this container; first give it a height and add a class: that-part, and paste some custom CSS. I know it's a lot of custom CSS but by default you cannot create this kind of advanced carousel with just Elementor, so that's why we need a lot of custom code. Paste this and we can see our indicator, but we need to spread that evenly with this line. Go to layout option and make justify-content space-between and align-items center. Now that looks perfect.
You can see one, two, three, four, five dots. These dots are automatically generated with the number of your slides. For example, if I create one more additional slide you can see six dots. It's fully automatic.
Now we need some space on the left so go to the top container and give it 10%. Lastly we need to add our changing background. Go to the top container's style settings and go to the slideshow option and upload those images. You can also sort them by dragging left and right. We don't want infinite loop so turn that off. When you upload images in the slideshow option those background images will automatically change after a few intervals, but I want to change those images only when I change over the slides. To do this we need to add some custom CSS with that. Paste this code; now it's perfectly working with our slide change.
If we scroll down we can see some portion of our image goes outside of this section which looks weird, so we need to fix that. Additionally I want to add a background overlay because for some images we cannot see the text properly. Go back and make the container's overflow hidden. To add overlay go to overlay option and add a gradient overlay. Make it a dark color and the second color a bright color, change the gradient angle, and increase opacity if needed. Now that looks really perfect.
We have done everything perfectly on desktop; now check other devices. If you reduce the width before even going to tablet I think we need to reduce the gap on the left and right of the text, so go to the container settings and make some custom media query. Now that looks perfect. On tablet change the left and right column widths to 65% and 35%. Reduce the indicator height to 500 pixels. Customize the slider: on tablet make slides-per-view 3, reduce width, make space 20 pixels, and adjust text padding.
On mobile we will place the indicator at the very last of the section under the slider. In section settings add padding and from layout remove minimum height, make it 0. For the text remove padding; set bottom padding to 50 pixels in pixels. Reduce the negative margin further. For the slider show 3 slides per view, set width to 100%, and space between 20 pixels. On mobile show icons on the left and right of the slider by setting button position absolute: left 0 and top -105 pixels. Do the same for the right button, position absolute with top -105 and right 0. Place dots at the bottom: change indicator direction to row, give it height and width 200 by 30 pixels, and make its position absolute to place it at the bottom. From left 50% and bottom -175 pixels. In mobile preview it's perfectly working.
We have completed making this advanced slider. If you enjoyed this tutorial then don't forget to like and subscribe to this channel. Thank you so much for watching. I'll see you on my next video.
