IMPORTANT! Some people told me that the CSS is not working. This is possible when swiper library update is ENABLED in dashboard > Elementor > Settings > Features > Upgrade Swiper Library. Don't worry, you don't have to disable the update. You only have to change the selector to make it work: Instead of : selector .swiper-container { overflow: visible; } use this... selector .swiper { overflow: visible; } Or use both selectors if you are not sure: selector .swiper, selector .swiper-container { overflow: visible; }
I'm glad I found your channel, short into the point tutorials ❤ Also your replies to the comments are valuable to me! Yeah I'm comments addict 🤣 Thanks! And keep up the great work
It's the same thing but you have to use the new carousel widget. You have to enable "nesting elements" in the Elementor settings first before you can use the new Carousel widget.
Hello Frank, Certainly! I appreciate your thanks for the cool video. I've followed all the tutorials in the video, but I'm facing an issue with the layout on both desktop and mobile views, causing a horizontal scrollbar. I've tried changing the overflow in the layout tab > additional options > overflow > hidden, but it didn't work. Can you please help?hello frank.
Yes, with the new carousel widget you can nest whatever widgets you like. Enable "containers" and "nested elements" feature in Elementor settings. It's in Elementor Pro since V3.14. This will work, because all carousels/slides in Elementor use the same swipers.js API.
I would like to align the slider on the left container line. I got a container of 1440px wide. Added padding left for smaller screens. but on bigger screens it failes because I use the 75% container width in your video. Any ideas?
Good question. You probably need a custom property with a calc function that calculates the width of that container. I'll take a look at it when I find the time. In the meantime, I recommend you take a look at this brilliant tutorial from Dav Eden Webdev. He uses a method to calculate that space that I would apply here, but adapted for the carousel. ruclips.net/video/gIaCz3OdZkI/видео.html&
Hi, I found a way to do this. Here is a demopage: franktielemans.be/blog/carousel-partitally-visible-aligned-with-boxed-content/ Aligning the carousel with the boxed sections is not the challenge here. This easy with a simple CSS calc function. --page-margin: calc((100% - 1140px) / 2); The hardest part is to prevent it from kissing the edge when screenwidth becomes less then 1140px, because I'm a perfectionist in these things :-) You can add padding to the boxed section to prevent that, but you can't do the same thing with the carousel. I found a solution but it's hard to explain what I did, you need a pretty good knowledge of CSS.
Is there an option do to this in the loop carousel without turning on infinite scrolling? I found: selector .swiper-wrapper {margin-left: -80px; } But this is not really doing the job, it only shifts everything 50px, also the first loop item is now cropped
I just tried it and I couldn't find any issues when I disable infinite loop. Here is my demo page franktielemans.be/blog/carousel-slides-partial-visible-tutorial The fourth carousel on the page has infinite loop disabled
Hi. What are the steps if we do not occupy Containers? What would be the steps and css for which we use the above method to elementor containers? Many hugs
The CSS and settings for the carousel are the same. The CSS for the section that holds the carousel: selector { width: 80%; margin-left: auto; } selector .elementor-widget-wrap { justify-content: flex-start; } @media screen and (max-width: 767px) { selector { width: 100%; } selector .elementor-widget-wrap { justify-content: center; } } I have not tested this because I only use containers, but I do know the structure (and classnames) of the sections. Please learn the flex-box containers, they are way better.
This is really a great video. But I have got some problem. I need to show some card on the partially visible on both sides. How will I do it? Can you help me?
Thank you for the video! I have the problem that after the first round of sliding all the images, there is a blank space before the first image. Do you know how I can solve this problem?
Unfortunately not. That how swiper.js works let me try to explain... When you disable infinite loop, the carousel/slider is just a list of photos that are placed next to each other and animated via JavaScript. But when you enable infinite loop it's a whole different story. With infinite loop enabled, 2 copies of each slide are made, so you get three series of photos. So if you have 5 slides you actually have 15. One series of photos is placed in front of the current cycle and the second series is placed after the current cycle. When you navigate through the slides and you come to the end of a series, the series before the current cycle will move backwards. Conversely, if you navigate in the other direction, the series shifts backwards after the current cycle. That movement causes a glitch and the slide disappears until you show the next one. Nothing you can do about that I'm afraid, it's the way swiper.js works. A way that sometimes works to avoid that glitch is to change the slide animation in the other direction, so instead of left to right, from right to left. To be honest, I don't know why that fixes it sometimes, because it makes no sense.
You can do this all types of carousels, it will work as long as the carousel uses the swiper.js library. With the new elementor carousel widget you can nest any widget you want inside each slide.
You need Javascript or jQuery to implement that in the slider/carousel widget. It's a parameter named "freeMode" in the swiper.js API. However, that is beyond my skills. But I can recommend you to someone who can.
Hello, thanks for this tutorial. I did this with Elementor posts and with a loop grid. I want the left side to be fixed sticked to the container if you know what I mean. When you switch your layout to full width in stead of boxed, I want it to stick to the boxed width on the left side but the right side full width and partially visible. Is this possible? If I follow ur tutorial the left side is in % and is different on every screen.
Yes that is possible. I have a demo example of that. It works, but it's experimental. franktielemans.be/blog/carousel-partitally-visible-aligned-with-boxed-content/ Code is on the page. I have 2 classes: car-container-R: for a carousel aligned to the left of the box content car-container-L: for a carousel aligned to the right with the box content Please note that you add those classes in the container that holds the carousel, not the carousel widget (or loop grid) itself. Then you need a calc function that calculates how wide the carousel needs to be to stay aligned with the boxed content. I do this via custom properties so that I can easily make adjustments later. --boxed-width-section: 1280px; --page-margin: calc((100% - var(--boxed-width-section)) / 2); In this example, the boxed width is 1280px. This works fine, but the difficulty arises when the screen width decreases. How far should carousel and boxed content stay away from the edge on smaller screens? I also have written a custom property for that --pad_desktop: 150px; --pad_tablet: 80px; --pad_mobile: 25px; On desktop 150px, on tablet 80px and on mobile 25px. You must add these custom properties in the boxed width container(s). You select the container, you go to padding values and there you select the custom unit selector (the pencil icon) In the left and right padding you put this value: var(--path_desktop) Then you switch to tablet responsive view and you do the same thing but you this value: var(--pad_tablet) Then you switch to mobile responsive view and change the padding a third time to: var(--pad_mobile) Now you have to write a media query to update the width of the carousel. (see line 29) First for desktop: You have to take the boxed-width (1280px in this case) + 2 times --pad_desktop (300px in this case) = 1580px. That should be it, but that is not correct because through trail and error I found out that you have to add 17px to align it exactly. I don't know why, that's why I call it somewhat experimental. (maybe the scrollbar width??) Anyway, that media query should therefore be at 1597px instead of 1580px. For tablet and mobile you also have to write a media query. On a screen width of 1024px the carousel remains 80px away from the edge and on mobile (767px) 25px. I hope you understand it a bit because it is quite complex. If your boxed-content width is different than 1280px, you can adjust the values in the custom properties and the rest will be calculated automtically, BUT you will have to do that calculation for that one media query for desktop manually. (in line 29) Formula is: your boxed-width + (2 times the value of --pad_desktop) + 17px.
@@franktielemans6624 Your Video and this demo is a great help and thank God I found you. Many Thanks!!!! In my situation, I have a parent boxed container (which is set to 95% width) with two in-line containers, where the left one has a heading and body text and the right container is the carousel. How would I be able to achieve the right containers carousel to go off to the right edge of the DOM?
@@paulb1993 You can use the same principle. You can't use a boxed container though, but that not a problem. Here is the setup: One full-width container, width 100%. Inside that parent container add another full width container, but set it's width to 95%. Flex direction : row and make sure there is no gap. Add two more full width containers inside that container. Set the left container to a fixed width like 350px and set the right container to a calculated width with the custom units selector (the pencil) calc(100% - 350px) The left container will be 350px (no matter what) and set width of the second container with the carousel will take up the rest of the space. Make sure you set the width of the left and right container to 100% on mobile. Place the a heading and body in the left container (and some padding) and the image carousel in the right container and use the CSS from the video. Here is a quick example franktielemans.be/blog/partially-visible-carousel-with-fixed-column
Yes, It's possible with some CSS. The arrows use absolute positioning so it's easy to place them at the bottom. You need some calc magic to position them precisly though. Also the parent container has an overflow of hidden so you have to add some padding at the bottom of that container, otherwise the arrows will not be hidden too. try something like this: 1) Select the parent container (that holds the carousel) and add 60px padding at the bottom (to make space for the arrows) 2) Add this CSS in the carousel widget: selector .swiper-container { overflow: visible; } /* I make arrows 60px by 60px with a black background */ selector .elementor-swiper-button { background: black; height: 60px; width: 60px; display: grid; place-items: center; transition: filter 0.5s ; } /* make arrows black with white background on hovering, simply with the filter property */ selector .elementor-swiper-button:hover { filter: invert(1) } /* Position the previous arrow at the bottom left /* selector .elementor-swiper-button-prev { top: calc(100% + 30px); left: 0%; } /* Position the next arrow at the bottom left, but next the previous arrow (with 1px gap) /* selector .elementor-swiper-button-next { top: calc(100% + 30px); right: calc(100% - 121px); } example: (first carousel) franktielemans.be/blog/carousel-slides-partial-visible-tutorial Also possible with javascript offcourse, but that's a different approach.
@@franktielemans6624 Merci, dank u, thank you for this :) By the way, a few minutes ago, I received the new beta Elementor 3.15 and they added a feature to customize Pagination and Navigation. You can now further customize your carousels by adjusting the position and orientation of navigation and pagination elements. For example, you can reposition the pagination element and place navigation elements next to each other. You can also customize the color, background color, border, and box shadow of each navigation icon.
You can do this with new the loop carousel too and the loop item can be the anything. I don't think you have to change anything. Custom navigation buttons are also possible, but you need Javascript / jQuery.
Hi Frank, That's a great tutorial! However, i've tried to set the image to Image Size to Full and Image Stretch to Yes but the images won't fill the container.
Hi, Thanks! The Stretch to fit option only works when your images have the same aspect ratio. Not size, but aspect ratio, The Elementor image carousel is not a justified image carousel, you can't display images with different aspect ratio and streched to fit. You can crop all your images manually to the same aspect ratio or you can do it via CSS. Add this extra CSS in the image carousel: selector img { aspect-ratio: 8/10; object-fit: cover; object-position: center center; } In this example all images will be displayed in a aspect ratio of 8/10 . Change it to your liking, 1/1 wil make it square. Or you can crop the images manually as I said, that gives you the advantage that you choose which part of the photo is cropped. With the CSS here it automatically will crop out the middle part of your photo's.
I believe the question he might be asking is how are you showing Desktop, Tablet and mobile in your preview screen at the same time ? - which I am curious about too.
@@befitoriginals_ You can add thumbnails to product categories when you install woocommerce, but the problem is that you don't have a carousel in Elementor that can query for product categories. You do have a products category widget in Elementor Pro but that's not a carousel but a grid. Also the new carousel-loop widget can't query product categories. (it can query products though) So I think you have to write a custom query in php in use it in query ID. Writing PHP is not easy and beyond my skills though. The method from the tutorial only works with the Elementor widgets that use swiper.js library.
@@befitoriginals_ i do know people who can write PHP for that custom query, but they don't work for free. Maybe with a third plugin? Crocoblock, Dynamicoo? Also not free though.
Tried following every step with the video, but doesn’t work at the moment of writing. Also tried importing your template but did not work… Any idea what is going wrong?
Are you talking about the loop carousel? I haven't tried it yet with this CSS but it should work fine, because it uses the same swiper.js library and HTML structure.
The same way it does with any carousel in Elementor. You have to add the CSS to the loop carousel widget (or the container that holds the widget) instead of the image carousel.
Sorry to hear that. Demo page still works fine franktielemans.be/blog/carousel-slides-partial-visible-tutorial/ Have you tried to download the template in the description? Maybe it is because you updated the swiper library? In that case read my pinned comment
The video is very good, but it doesn't work. I followed the entire video step by step. You can see the overflow in the development visualization, but not in the preview. The custom ccs preview is not applied. Elementor Pro v3.18.3
Sorry, I have no idea what went wrong. Maybe a cache issue? Can you expect the page with the devtools to see if the CSS has been executed? And if it is overridden by a specificity issue, you can also see which other CSS declaration is causing it. My demo page still works fine franktielemans.be/blog/carousel-slides-partial-visible-tutorial/ Have you tried to download the template? Link is in the description.
@@franktielemans6624 Yes, it works perfect!! It was my mistake, I already had a CSS code that was incorrectly closed in a container prior to "Carousel with partially visible slides", that code was affected the CCS of the Carousel. Thanks for the video!
@franktielemans6624 Did try exactly the same way following the video every single step but the next images aren't showing the edge instead full image!
IMPORTANT!
Some people told me that the CSS is not working. This is possible when swiper library update is ENABLED in dashboard > Elementor > Settings > Features > Upgrade Swiper Library.
Don't worry, you don't have to disable the update.
You only have to change the selector to make it work:
Instead of :
selector .swiper-container {
overflow: visible;
}
use this...
selector .swiper {
overflow: visible;
}
Or use both selectors if you are not sure:
selector .swiper, selector .swiper-container {
overflow: visible;
}
I'm glad I found your channel, short into the point tutorials ❤
Also your replies to the comments are valuable to me!
Yeah I'm comments addict 🤣
Thanks! And keep up the great work
Can we make the slide apeear like, left side in container width and rightside in fullwidth? How to achieve this challende?
Did u find a solution for this?
@@visje4949No
I have the same question !
THANK YOU SO MUCH. Always wanted to know how to do this.
Huge fan of your videos, you should post more videos you are a mentor to us
Works perfect! Thanks Frank 🤗
Thanks brother great help , looking for this solution for long time
Bedankt voor de uitleg. Eindelijk maak je weer video’s. Ga zo door. 👍🏼🇳🇱
Best tutorial ever!
Thanks for the great videos. I tried it and it is working perfectly in the desktop but not in mobile device. Any guidance please.
What's happening on mobile and what do you want to achieve?
@@franktielemans6624 I want to achieve the carousel showing part of the next slide like in getyourguide or hellotickets s
100% awesome. Can you do a video with the new carousel and flex box containers?
You mean the loop caroiusel?
It should work exactly the same, but you have to apply the CSS to the loop carousel.
thankyou , but this is for images, canwe make same one for the text/button having cards ? please can you tell
It's the same thing but you have to use the new carousel widget.
You have to enable "nesting elements" in the Elementor settings first before you can use the new Carousel widget.
Hello Frank, Certainly! I appreciate your thanks for the cool video. I've followed all the tutorials in the video, but I'm facing an issue with the layout on both desktop and mobile views, causing a horizontal scrollbar. I've tried changing the overflow in the layout tab > additional options > overflow > hidden, but it didn't work. Can you please help?hello frank.
Are there any other elements on that page that can cause the overflow?
Is there a way to include text on the images and a button to move along with the carousel?
Yes, with the new carousel widget you can nest whatever widgets you like. Enable "containers" and "nested elements" feature in Elementor settings.
It's in Elementor Pro since V3.14.
This will work, because all carousels/slides in Elementor use the same swipers.js API.
Thanks for the video, you helped me a lot !
Thanks for the video!!! So amazing.
Very useful. Thank you.
Thx!
I would like to align the slider on the left container line. I got a container of 1440px wide. Added padding left for smaller screens. but on bigger screens it failes because I use the 75% container width in your video. Any ideas?
Good question. You probably need a custom property with a calc function that calculates the width of that container.
I'll take a look at it when I find the time.
In the meantime, I recommend you take a look at this brilliant tutorial from Dav Eden Webdev. He uses a method to calculate that space that I would apply here, but adapted for the carousel.
ruclips.net/video/gIaCz3OdZkI/видео.html&
Hi, I found a way to do this.
Here is a demopage: franktielemans.be/blog/carousel-partitally-visible-aligned-with-boxed-content/
Aligning the carousel with the boxed sections is not the challenge here. This easy with a simple CSS calc function.
--page-margin: calc((100% - 1140px) / 2);
The hardest part is to prevent it from kissing the edge when screenwidth becomes less then 1140px, because I'm a perfectionist in these things :-)
You can add padding to the boxed section to prevent that, but you can't do the same thing with the carousel. I found a solution but it's hard to explain what I did, you need a pretty good knowledge of CSS.
Is there an option do to this in the loop carousel without turning on infinite scrolling? I found: selector .swiper-wrapper {margin-left: -80px; }
But this is not really doing the job, it only shifts everything 50px, also the first loop item is now cropped
I just tried it and I couldn't find any issues when I disable infinite loop.
Here is my demo page
franktielemans.be/blog/carousel-slides-partial-visible-tutorial
The fourth carousel on the page has infinite loop disabled
Hi. What are the steps if we do not occupy Containers? What would be the steps and css for which we use the above method to elementor containers? Many hugs
The CSS and settings for the carousel are the same.
The CSS for the section that holds the carousel:
selector {
width: 80%;
margin-left: auto;
}
selector .elementor-widget-wrap {
justify-content: flex-start;
}
@media screen and (max-width: 767px) {
selector {
width: 100%;
}
selector .elementor-widget-wrap {
justify-content: center;
}
}
I have not tested this because I only use containers, but I do know the structure (and classnames) of the sections. Please learn the flex-box containers, they are way better.
This is really a great video. But I have got some problem. I need to show some card on the partially visible on both sides. How will I do it? Can you help me?
It's in the video
3:51
Thank you for the video! I have the problem that after the first round of sliding all the images, there is a blank space before the first image. Do you know how I can solve this problem?
Unfortunately not. That how swiper.js works
let me try to explain...
When you disable infinite loop, the carousel/slider is just a list of photos that are placed next to each other and animated via JavaScript.
But when you enable infinite loop it's a whole different story.
With infinite loop enabled, 2 copies of each slide are made, so you get three series of photos. So if you have 5 slides you actually have 15. One series of photos is placed in front of the current cycle and the second series is placed after the current cycle. When you navigate through the slides and you come to the end of a series, the series before the current cycle will move backwards. Conversely, if you navigate in the other direction, the series shifts backwards after the current cycle.
That movement causes a glitch and the slide disappears until you show the next one.
Nothing you can do about that I'm afraid, it's the way swiper.js works.
A way that sometimes works to avoid that glitch is to change the slide animation in the other direction, so instead of left to right, from right to left. To be honest, I don't know why that fixes it sometimes, because it makes no sense.
Thank you for your answer! I will try this
How to do that, but using boxes, not images?
You can do this all types of carousels, it will work as long as the carousel uses the swiper.js library.
With the new elementor carousel widget you can nest any widget you want inside each slide.
Thanks, I want to ask if I want complete control over moving the images so that it doesn't move an entire image every time, what should I do?
You need Javascript or jQuery to implement that in the slider/carousel widget. It's a parameter named "freeMode" in the swiper.js API.
However, that is beyond my skills. But I can recommend you to someone who can.
How is this possible in the free elementor?
Hello, thanks for this tutorial. I did this with Elementor posts and with a loop grid. I want the left side to be fixed sticked to the container if you know what I mean. When you switch your layout to full width in stead of boxed, I want it to stick to the boxed width on the left side but the right side full width and partially visible.
Is this possible? If I follow ur tutorial the left side is in % and is different on every screen.
Yes that is possible. I have a demo example of that. It works, but it's experimental.
franktielemans.be/blog/carousel-partitally-visible-aligned-with-boxed-content/
Code is on the page.
I have 2 classes:
car-container-R: for a carousel aligned to the left of the box content
car-container-L: for a carousel aligned to the right with the box content
Please note that you add those classes in the container that holds the carousel, not the carousel widget (or loop grid) itself.
Then you need a calc function that calculates how wide the carousel needs to be to stay aligned with the boxed content.
I do this via custom properties so that I can easily make adjustments later.
--boxed-width-section: 1280px;
--page-margin: calc((100% - var(--boxed-width-section)) / 2);
In this example, the boxed width is 1280px.
This works fine, but the difficulty arises when the screen width decreases.
How far should carousel and boxed content stay away from the edge on smaller screens?
I also have written a custom property for that
--pad_desktop: 150px;
--pad_tablet: 80px;
--pad_mobile: 25px;
On desktop 150px, on tablet 80px and on mobile 25px.
You must add these custom properties in the boxed width container(s).
You select the container, you go to padding values and there you select the custom unit selector (the pencil icon)
In the left and right padding you put this value: var(--path_desktop)
Then you switch to tablet responsive view and you do the same thing but you this value: var(--pad_tablet)
Then you switch to mobile responsive view and change the padding a third time to: var(--pad_mobile)
Now you have to write a media query to update the width of the carousel. (see line 29)
First for desktop:
You have to take the boxed-width (1280px in this case) + 2 times --pad_desktop (300px in this case) = 1580px.
That should be it, but that is not correct because through trail and error I found out that you have to add 17px to align it exactly.
I don't know why, that's why I call it somewhat experimental. (maybe the scrollbar width??)
Anyway, that media query should therefore be at 1597px instead of 1580px.
For tablet and mobile you also have to write a media query.
On a screen width of 1024px the carousel remains 80px away from the edge and on mobile (767px) 25px.
I hope you understand it a bit because it is quite complex.
If your boxed-content width is different than 1280px, you can adjust the values in the custom properties and the rest will be calculated automtically,
BUT you will have to do that calculation for that one media query for desktop manually. (in line 29)
Formula is: your boxed-width + (2 times the value of --pad_desktop) + 17px.
@@franktielemans6624 Your Video and this demo is a great help and thank God I found you. Many Thanks!!!!
In my situation, I have a parent boxed container (which is set to 95% width) with two in-line containers, where the left one has a heading and body text and the right container is the carousel. How would I be able to achieve the right containers carousel to go off to the right edge of the DOM?
@@paulb1993 You can use the same principle. You can't use a boxed container though, but that not a problem.
Here is the setup:
One full-width container, width 100%.
Inside that parent container add another full width container, but set it's width to 95%. Flex direction : row and make sure there is no gap.
Add two more full width containers inside that container.
Set the left container to a fixed width like 350px and set the right container to a calculated width with the custom units selector (the pencil)
calc(100% - 350px)
The left container will be 350px (no matter what) and set width of the second container with the carousel will take up the rest of the space.
Make sure you set the width of the left and right container to 100% on mobile.
Place the a heading and body in the left container (and some padding) and the image carousel in the right container and use the CSS from the video.
Here is a quick example
franktielemans.be/blog/partially-visible-carousel-with-fixed-column
Nice video, thank you. It would be better to be able to display arrow at the top or bottom I think.
Yes, It's possible with some CSS. The arrows use absolute positioning so it's easy to place them at the bottom. You need some calc magic to position them precisly though.
Also the parent container has an overflow of hidden so you have to add some padding at the bottom of that container, otherwise the arrows will not be hidden too.
try something like this:
1) Select the parent container (that holds the carousel) and add 60px padding at the bottom (to make space for the arrows)
2) Add this CSS in the carousel widget:
selector .swiper-container {
overflow: visible;
}
/* I make arrows 60px by 60px with a black background */
selector .elementor-swiper-button {
background: black;
height: 60px;
width: 60px;
display: grid;
place-items: center;
transition: filter 0.5s ;
}
/* make arrows black with white background on hovering, simply with the filter property */
selector .elementor-swiper-button:hover {
filter: invert(1)
}
/* Position the previous arrow at the bottom left /*
selector .elementor-swiper-button-prev {
top: calc(100% + 30px);
left: 0%;
}
/* Position the next arrow at the bottom left, but next the previous arrow (with 1px gap) /*
selector .elementor-swiper-button-next {
top: calc(100% + 30px);
right: calc(100% - 121px);
}
example: (first carousel)
franktielemans.be/blog/carousel-slides-partial-visible-tutorial
Also possible with javascript offcourse, but that's a different approach.
@@franktielemans6624 Merci, dank u, thank you for this :)
By the way, a few minutes ago, I received the new beta Elementor 3.15 and they added a feature to customize Pagination and Navigation. You can now further customize your carousels by adjusting the position and orientation of navigation and pagination elements. For example, you can reposition the pagination element and place navigation elements next to each other. You can also customize the color, background color, border, and box shadow of each navigation icon.
Is it possible to do the same but with entire containers and add custom buttons for next/previous slide?
You can do this with new the loop carousel too and the loop item can be the anything. I don't think you have to change anything.
Custom navigation buttons are also possible, but you need Javascript / jQuery.
Hi Frank,
That's a great tutorial! However, i've tried to set the image to Image Size to Full and Image Stretch to Yes but the images won't fill the container.
Hi, Thanks!
The Stretch to fit option only works when your images have the same aspect ratio. Not size, but aspect ratio,
The Elementor image carousel is not a justified image carousel, you can't display images with different aspect ratio and streched to fit.
You can crop all your images manually to the same aspect ratio or you can do it via CSS.
Add this extra CSS in the image carousel:
selector img {
aspect-ratio: 8/10;
object-fit: cover;
object-position: center center;
}
In this example all images will be displayed in a aspect ratio of 8/10 .
Change it to your liking, 1/1 wil make it square.
Or you can crop the images manually as I said, that gives you the advantage that you choose which part of the photo is cropped.
With the CSS here it automatically will crop out the middle part of your photo's.
Hi, how can i see the multiple views in one page?
Sorry, I don't understand your question.
I believe the question he might be asking is how are you showing Desktop, Tablet and mobile in your preview screen at the same time ? - which I am curious about too.
how can we do this with product categories ?
To be really specific, Images with a title below it as well (name of category) that link to the product category.
@@befitoriginals_ You can add thumbnails to product categories when you install woocommerce, but the problem is that you don't have a carousel in Elementor that can query for product categories. You do have a products category widget in Elementor Pro but that's not a carousel but a grid.
Also the new carousel-loop widget can't query product categories. (it can query products though) So I think you have to write a custom query in php in use it in query ID.
Writing PHP is not easy and beyond my skills though.
The method from the tutorial only works with the Elementor widgets that use swiper.js library.
@@franktielemans6624 thanks for your reply. Any other way to achieve the desired result?
@@befitoriginals_ i do know people who can write PHP for that custom query, but they don't work for free. Maybe with a third plugin? Crocoblock, Dynamicoo?
Also not free though.
@@befitoriginals_ Or use the nested carousel, but that's not dynamic.
Tried following every step with the video, but doesn’t work at the moment of writing. Also tried importing your template but did not work… Any idea what is going wrong?
Maybe because you ere using a theme?
Maybe because the swiper library is updated?
@@franktielemans6624 Fixed by disabling the swiper library update
@@jelmerstelp Great.
You can keep it enabled but you have to change the css:
selector .swiper {
overflow: visible;
}
Like I said in the pinned comment
@@franktielemans6624 that did not work.
@@jelmerstelp That's strange.
How can it work with post carousel ? I use elementor
Are you talking about the loop carousel?
I haven't tried it yet with this CSS but it should work fine, because it uses the same swiper.js library and HTML structure.
Yes, i mean loop carousel. I m still confused how to make it works.
The same way it does with any carousel in Elementor.
You have to add the CSS to the loop carousel widget (or the container that holds the widget) instead of the image carousel.
@@franktielemans6624 Can you help me fixed this problem in my site? How can I mail u ?
@@MuhHendrik86 You can see my amail adress on this about page
www.youtube.com/@franktielemans6624/about
Tried 5 times, not working for me.
Sorry to hear that.
Demo page still works fine
franktielemans.be/blog/carousel-slides-partial-visible-tutorial/
Have you tried to download the template in the description?
Maybe it is because you updated the swiper library?
In that case read my pinned comment
Hey Frank, thanks you for this. Will like to know if you can be my go freelancer..
I've tried so for this tutorial, but failed, not worked
The video is very good, but it doesn't work.
I followed the entire video step by step. You can see the overflow in the development visualization, but not in the preview. The custom ccs preview is not applied.
Elementor Pro v3.18.3
Sorry, I have no idea what went wrong. Maybe a cache issue?
Can you expect the page with the devtools to see if the CSS has been executed? And if it is overridden by a specificity issue, you can also see which other CSS declaration is causing it.
My demo page still works fine
franktielemans.be/blog/carousel-slides-partial-visible-tutorial/
Have you tried to download the template? Link is in the description.
@@franktielemans6624
Yes, it works perfect!!
It was my mistake, I already had a CSS code that was incorrectly closed in a container prior to "Carousel with partially visible slides", that code was affected the CCS of the Carousel.
Thanks for the video!
Not worked!
What happened?
@franktielemans6624 Did try exactly the same way following the video every single step but the next images aren't showing the edge instead full image!
@@zamilahamed Not sure what you're talking about.
I included a link to a rdownload with a template in the video description. Can you try that please?
Not working
Can you be more specific?
What do you see?
not working
Can you be more specific?