Thanks brother, i was searching literally a full day to find a solution for removing the masking on the slider/carousell. Tried many plugins but your easy css solution made me smile :D thank you
@carsclubae
Жыл бұрын
from 6 months i want to do this carousel on my site but finally i got this video and best part is ready templet woooooooow, thanks man
@sofiamagistrelli9887
3 жыл бұрын
You are awesome!
@sanikapatwardhan1590
2 жыл бұрын
Thank you! This works really well
@franktielemans6624
Жыл бұрын
WARNING! This was build long time ago with Elementor sections and columns and it does not work anymore with the latest Elementor Pro version (3.13.1) However I do have a container friendly version that uses much less CCS code and elements. It also uses some javascript to make the navigation arrows of the carousel remoted. I don't have the time to record a new video but you can download the template here: franktielemans.be/Downloads/Modern-offset-carousel-with-custom-styling-container-friendly.zip The live version can be seen here: franktielemans.be/blog/offset-carousel-with-container-elements
@webmastercharles
Жыл бұрын
God bless you man
@bekircan9039
3 жыл бұрын
GREAAAAT VIDEO; thanks a lot
@MonicaSanchez-nc5lh
3 жыл бұрын
Thanks for your video!! you are great!
@habilosauditoredafirenze3564
3 жыл бұрын
Amazing! Thank you 😊
@surajpayar5734
2 жыл бұрын
A lot of thanks bro..
@teuccio73
4 жыл бұрын
Great
@rullyresa7145
2 жыл бұрын
Great! Thank You.. Now I can offseting image layout. But got some question, how can we custom the opacity of each image. Example we've got 5 image: A,B,C,D,E we must custom only A got 100% Opacity and each image B let say Opacity 80%, image C Opacity 70%, image D Opacity 60%, image E Opacity 50%. So we've got gradient opacity, Only (highlight) Image A got 100%. Can we do it? 😃
@rullyresa7145
2 жыл бұрын
Image A, B, C, D, E are assuming the position, so when we slide di the image right/left, still only image at position A got 100% opacity. Hope you understanding what i mean 😊
@franktielemans6624
2 жыл бұрын
Yes you can do that, but it's hard to explain. You can style each slide differently when you target the 'active' slide via the .swiper-slide-active class and use a + * selector to target the next slide in the carousel. Here is an example where I use that trick. In this design with 5 slides in view, I first target the active slide (which is the most left slide) and than I use selector .swiper-slide-active + * + * to target the third slide or center slide. Then I write CSS to style the third differently. franktielemans.be/blog/custom-testimonial-carousel/ You will need much more CSS though, because you want to style (and target) 4 different slides and adjust the opacity. Remember that you have to write different code for tablet and mobile because you will reduce the slides in view on these devices.
@dimMx
3 жыл бұрын
Hey! Very nice and explanatory video tutorial. You use specific image dimensions for this tutorial. If we want to use bigger width and height i.e. 1024px, then we will have problem with the image widths & heights showing on mobile devices? :)
@robertocortinas5461
3 жыл бұрын
Great tutorial, thanks for the video. Do you have any video how to switch different carousels with buttons? I tried with the advance tab widget from element addons and call templates but second and third don’t do carousel, they just display one image. Any thoughts ?
@franktielemans6624
3 жыл бұрын
Do you mean remoted carousels? That's beyond my knowledge, but The Plus addons has this. theplusaddons.com/widgets/carousal-remote/
@robertocortinas5461
3 жыл бұрын
Thank you for your promptly reply. And thank you for all those great informational videos.
@franktielemans6624
3 жыл бұрын
@@robertocortinas5461 Hi, I just found out there is a free solution to do this with Premium Addons and their carousel widget. Very powerfull widget that allows templates and you can use any Elementor widget to navigate through the slides. It even supports entrance animations in the templates. Very similar and imo even better then remote carousel from Plus addons and it's even free. premiumaddons.com/carousel-widget-for-elementor-page-builder/
@edisvelicanin8854
4 жыл бұрын
can you do the same but with posts? posts sliders aresomwthing thats missing, even in.the elemwntor pro post widget.
@franktielemans6624
4 жыл бұрын
There was a way to turn sections into a carousel before Elementor ditched the slick.js library. It uses swiper.js now and can't figure out how I can turn sections into carousels. Or use a plugin there are plenty of free ones that display posts in carousels. You don't need a specific plugin for Elementor, if it creates shortcodes you can use it in Elementor.
@franktielemans6624
4 жыл бұрын
I have very good news for you :-) A few days ago I asked him to update his old tutorial so it works with the swiper.js And so he did :) It's way harder though than with slick.js because swiper.js needs a specific HTML markup with specific classes. He says that he finds the slick.js still better than swiper.js, but since elementor ditched slick.js, you have to load the library to make it work now. That's not good imo, slick.js for you post slider and .swiper.js for the elementor widgets that use it. problem is, in the editor we can only add classes to elements we can select in the editor but that's not enough to make it work with swiper.js. So we have to add these classes via Jquery and also append some extra HTML elements for the slider navigation. We also need a tiny bit of CSS because the post widget runs on CSS grid, while the swiper runs on flexbox. Watch the tutorial here: (and subscribe his channel, because that guy is GOLD) kzitem.info/news/bejne/u3iumnx8coSJqGU
@edisvelicanin8854
4 жыл бұрын
@@franktielemans6624 watched it. great tutorial. i subscribed. thanks for your help.
@taskitvirtualsolutions
3 жыл бұрын
@@franktielemans6624 who is he?
@ananyarai5507
4 жыл бұрын
How that can be done? Please help
@ananyarai5507
4 жыл бұрын
I want to change the height of text overlay
@franktielemans6624
4 жыл бұрын
The text overlay section is positioned absolute on top of the carousel, the height over the text overlay has no effect on the functionality of the carousel, you can make it as tall as you want.
@jjes.studio
Жыл бұрын
Hi. All the code doesn't work in containers. Could you update all the code from the template for the new version with containers and post it here in the comments?
@franktielemans6624
Жыл бұрын
The tutorials made with sections and columns only work with that. However, the CSS in this tutorials is only for the navigation arrows and the zoom effect, so that should still work I think. Anyway, if I rebuilt this with containers it would look much simpler. One parent container with the media carousel and a child container positioned absolute on top for the overlay column. I would hide the navigation arrows of the carousel and replace them with 2 icon widgets that I link to the carousel via javascript. Then I have remoted navigation arrows that I can place anywhere. .
@jjes.studio
Жыл бұрын
@@franktielemans6624 Hi. javascript is not required. Everything works. It's just that the names of classes have changed a little in the new version of the Elementor. Edited and everything works fine. Thanks for the great idea and tutorial.
@franktielemans6624
Жыл бұрын
@@jjes.studio Glad you could fix it. I already made a container friendly version that uses remoted navigation arrows va JS. franktielemans.be/blog/offset-carousel-with-container-elements it looks the same but it uses containers and also the zoom hover effect is done with clip-path. (inset)
@seanjones
Жыл бұрын
@@franktielemans6624 Could you do a tutorial on this and break it down?
@taskitvirtualsolutions
3 жыл бұрын
Hi Frank, the download doesn't appear to be working?
Пікірлер: 34