How to Create a Divi Carousel WITHOUT a Plugin 🔥😮

Поделиться
HTML-код
  • Опубликовано: 4 фев 2025

Комментарии • 133

  • @DiviLife
    @DiviLife  Месяц назад

    If you love this tutorial, you'll love our popup tutorial: "How to Create a Divi Popup WITHOUT a Plugin" (plus FREE Popup Layout) 🥳 ruclips.net/video/HS4YymTqZAk/видео.html

  • @hdp007
    @hdp007 11 месяцев назад +2

    This is exactly what I have spent days trying to achieve with various heavy loading plugins. This is easy and beautiful - thank you for teaching this and providing the code for free! Much appreciated.

  • @TJEureka554
    @TJEureka554 8 месяцев назад +1

    This gentlman is one of my favorite Divi instructors. Clear, concise and to the point. Moves at just the right speed and clearly explains the 'why' behind the details. IMO, far superior to the rapid-fire, low-explanation Elegant Themes instructors that seem oriented toward more advanced users than me. The customer support from Divi Life is also excellent. I recommend!

    • @DiviLife
      @DiviLife  25 дней назад

      Just now reading your very encouraging comment. Thanks so much! This is great to hear 😍

  • @brittliz06
    @brittliz06 2 года назад +1

    THANK YOU! I finally found the right help with your video. Took me 5 hours to get to it after so many tries with other tutorials, but I'm relieved nonetheless. I used testimonial modules instead of blurb modules, so I made sure to replace "blurb" wherever I saw it in the code with "testimonial" and it worked like a charm! Mucho gracias!!

  • @deardaughtersunite
    @deardaughtersunite 2 года назад +2

    thank you for saving me 3 hours of tube surfing! Awesome job!

  • @estyxtranslations6877
    @estyxtranslations6877 2 года назад +4

    That was an amazing tutorial. Easy to understand, and with an amazing result to websites. Really happy to be improving my website's look by using more and more of these tutorials. Thanks a lot for that!

  • @taljasusec
    @taljasusec Год назад +1

    Oh God, this is such a balsam for my brain - your way of explenation is sooo excellent, thank you!

    • @DiviLife
      @DiviLife  Год назад

      You’re welcome! Glad it was helpful 🙂

  • @giseladominguez9254
    @giseladominguez9254 Год назад +1

    Thank you so much, this help me a lot is just the carousel I needed

    • @DiviLife
      @DiviLife  Год назад

      You're very welcome! 😎

  • @thehappysites
    @thehappysites 8 месяцев назад +1

    This was incredibly helpful! This was the third tutorial I followed and it worked the best AND it was free (no paid plugins) AND it's lightweight on code for the site's speed. Plus, I learned some Divi time-saving skills along the way. Thank you! For anyone that missed @DiviLife 's comment from two years ago, you can make this auto scroll by adding "autoplay: true," after "slidesToScroll: 1, " (without the quotes).

    • @DiviLife
      @DiviLife  25 дней назад

      That's great to hear!! :)

    • @GoDarkGaming
      @GoDarkGaming 22 дня назад

      Actually, you could include a few extra options to the autoslide to gain more control:
      autoplay: true, // Enables auto-slide
      autoplaySpeed: 2500, // Slides every 2500ms (2.5 seconds)
      pauseOnHover: true, // Pauses slider on hover
      Enjoy!

  • @hectormorales4090
    @hectormorales4090 Год назад +1

    Cool tutorial. I was able to create a photo gallery with it. Thanks a lot!

    • @DiviLife
      @DiviLife  25 дней назад

      That's great to hear! :)

  • @intransitstudiosteam
    @intransitstudiosteam 2 года назад

    Just wahat we were looking for today. Thanks Tim.

  • @kathryncolton5123
    @kathryncolton5123 3 года назад +2

    This is exactly what I've been looking for! Thank you!!

    • @DiviLife
      @DiviLife  3 года назад

      Awesome! I'm so glad to hear it was helpful :)

  • @suparswa
    @suparswa 2 года назад +1

    Your tutorials are awesome. And very easy to understand. Keep it up... and thanks.

  • @Mpittttt
    @Mpittttt Год назад +1

    it works well! thank you 🙌

  • @mhamblin6703
    @mhamblin6703 2 года назад +1

    This is awesome, thank you. Been hoping to add this to my website for a couple of years now.

  • @monicabjerke3141
    @monicabjerke3141 3 года назад +1

    Excellent - just what I needed! I've been able to implement it on my website and tweaking it just the way I want it.

    • @DiviLife
      @DiviLife  3 года назад

      That's great to hear!! :)

  • @bruyneelglenn
    @bruyneelglenn 2 года назад +3

    Hey @Divi Life. I have a lot of white space under my carousel, how can I fix this?

  • @MarkMadison
    @MarkMadison 10 месяцев назад +1

    Thank you, Tim. You teach me so much and it's greatly appreciated. I love your products especially the "bricks". That's why I bought an All Access pass. That and my Elegant Themes lifetime pass are the best purchases I have ever made. I am looking at your carousel layout packs. What I want is a carousel with 5 images that shows 1 image at a time and is full width. I'm thinking that Carousel layouts 2 and 3 might be adaptable. Am I on the right track. Thanks.

    • @DiviLife
      @DiviLife  25 дней назад

      Thanks so much for your kind words! 😍 I'm just now seeing it. For some reason, RUclips stopped sending comment notifications.

  • @mokikoki21
    @mokikoki21 10 месяцев назад

    Thank you. This tutorial is almost perfect. The only little thing missing is that the carousel should slide automatically. If anyone knows how to do this please comment! However, big props for the tutorial. It works very well. Btw, I could even use it for a blog module carousel. Just had to make it fullwidth , show only one post, copy it 6 times and set a post offset number for the different blog modules starting from 0 to 5. I am hyped! Thank you once again!

    • @rogermendoza2234
      @rogermendoza2234 2 месяца назад

      Hey buddy I was wondering the same. Did you find how to set it to slide automatically? I would love to know how as well.... Cheers!

    • @DiviLife
      @DiviLife  25 дней назад

      You can make it slide automatically by adding the following code:
      autoplay: true,
      autoplaySpeed: 2000,
      It needs to be added after the line: slidesToScroll: 1,

  • @systemadmax
    @systemadmax 2 года назад +1

    Is it possible to do a dynamic post carrousel same style ?

  • @timdetmer
    @timdetmer Год назад +1

    Awesome video, unfortunately, after going through the steps about ten times with no luck when I exit edit mode, the blub modules are just lined up vertically. Yes, I was careful not to put the first CSS in the column not the row menu, separate the
    divilife-3-col-feature-blurb-slider in the column CSS
    divilife-3-col-feature-blurb in the blub settings
    New row, code module at the coding
    ... but no carousel.
    So I installed the free one you sent me and it is the same.
    I can't figure out why it doesn't work on my site.
    I would really appreciate it if you had any ideas

    • @DiviLife
      @DiviLife  Год назад

      Hey there, sorry to hear about it not working. If the layout we sent isn’t working either then it sounds like there is something blocking the carousel script from loading correctly on the page. It could be a plugin conflict, or cache. I’d recommend trying with your plugins deactivated and see if it works. Then activate them again one by one to find which one is conflicting.

    • @timdetmer
      @timdetmer Год назад

      I; am going to try that right now. I DID try it on a fresh page, but plugins sounds like a good way to troubleshoot this.@@DiviLife

    • @timdetmer
      @timdetmer Год назад

      @@DiviLife THank you. When I went back to it after letting it sit for several hours it was working. I think it is because my hosting service has my site on multiple servers, any coding added takes awhile to update. I just walked through the process of sprucing it up to look good, adjusting sizing and shadows. some of the adjustments take effect, but not the margins. Again, I will let it sit for a few hours and wait. Thank you for taking the time. I have enthusiastically Liked and Subscribed!

    • @lukasik1230
      @lukasik1230 10 месяцев назад

      @@timdetmerI also have similar problem, everything is almost perfect but blurbs ans sticked together without any space between them, on mobile the blurb is somehow shifted to the right side so about 10% of the right side is cut, on the left side there is about 10% of background @DiviLife

  • @glenallan6279
    @glenallan6279 3 года назад +3

    Hey Tim... Something you might find handy for video tutorials is to use a split screen setup. Then you can have the code and Divi editing area on one side and the live site on the other side. Really helps to not have to jump in and out of the builder to see the final rendered front end code. Especially on designs which you can't see in the Visual Builder it makes the editing process much faster. I use it all the time for this purpose and would never go back to tab jumping in the same browser window as the main navigation method.
    Also, get a Blackmagic ATEM Mini for your videos. I'd say the Extreme, but even just the Pro ISO and you'll have a lot more dynamic control over your video sources. Love your plugins and am a long time purchasing supporter!

    • @DiviLife
      @DiviLife  3 года назад +1

      Hey Glen, thanks for the feedback. I don't plan on ever doing a split screen set up for videos because it would make everything too small and hard to see, especially for users with smaller screens. I tested the ATEM Mini Pro a while back but ended up returning it. It didn't really gain me anything for my needs, but took away my ability to change sources in my software.

    • @glenallan6279
      @glenallan6279 3 года назад +1

      By the way your video quality and background are great! You are definitely making sure to present well.

    • @glenallan6279
      @glenallan6279 3 года назад

      Okay, seems RUclips won't let me name all of the components to set up the ATEM Extreme without flagging it as spam. I had this happen on another video. Check your spam area to see the full comment. I don't know why it thinks it's spam. It's just naming the different components for a full setup, and the best setup.

    • @DiviLife
      @DiviLife  3 года назад

      @@glenallan6279 Thank you! I appreciate that very much :)

  • @natemitchell4560
    @natemitchell4560 25 дней назад

    This worked great...but is there any way to make subsequent sections visible/not visible by what blurb is currently in the middle of the Carousel?

    • @DiviLife
      @DiviLife  25 дней назад

      It should be possible with custom Javascript, but that unfortunately is out of the scope of this tutorial.

  • @antonestrada8878
    @antonestrada8878 4 месяца назад

    Will this be able to work with background images?

  • @anapenatamayo3922
    @anapenatamayo3922 5 месяцев назад +1

    Maravilloso ♥ Gracias!

    • @DiviLife
      @DiviLife  25 дней назад

      You're welcome!! :)

  • @linamahrach9696
    @linamahrach9696 2 года назад +1

    Hi, thanks for the video! I don't understand why in my carousel the titles of the summary modules are not aligned while my images/icons are the same size, thanks!

  • @PrzemysawCioch
    @PrzemysawCioch Год назад

    Hey, works well with most modules. Any advice how to style it with Shop module?

  • @CaliforniaCareerInstitute
    @CaliforniaCareerInstitute 7 месяцев назад

    Great tutorials. Featuring this on our new website (with modifications of course)

    • @DiviLife
      @DiviLife  25 дней назад

      That's awesome!! :)

  • @alluringdesign7241
    @alluringdesign7241 2 года назад +1

    Thank you so much sir. This is awesome.

  • @richardnorby2167
    @richardnorby2167 3 года назад +1

    Loved the tutorial. Thanks!

    • @DiviLife
      @DiviLife  3 года назад

      You're welcome! :)

  • @It_mathias
    @It_mathias Год назад

    Thanks for a very good video. However, I have a small problem that I do not get organized. On mobile devices I get an extra arrow inside the left arrow where you can browse the carousel. What is the reason for. At Desktop you do not see it, but it is only on mobile devices.

  • @lucas_games_oficial
    @lucas_games_oficial 2 года назад

    thank you somuch man, I use this in a job!!

  • @jumazurkiewicz
    @jumazurkiewicz 4 месяца назад

    Hello Tim, thanks for this tutorial, it works perfectly!
    I was wondering if it’s possible to add a clickable link to each image that would redirect to another page? I’ve made a few unsuccessful attempts.
    Thank you !

    • @DiviLife
      @DiviLife  25 дней назад

      Did you try adding the link to the module link within the Divi module?

  • @abhaypanchal4434
    @abhaypanchal4434 2 года назад +1

    Great and useful tutorial. 👍
    I want to know, How to change a number of columns in the carousel?
    Instead of 3 if we want 4 or more columns to slide.
    Can you with that.

    • @DiviLife
      @DiviLife  2 года назад +1

      Glad you liked the tutorial! Yep, you can do that! In the code module with the carousel script, theres a rule that defines the number of columns. Simply change that from the set number to your desired number of columns and it will change 🙂

  • @SudeshChouhan
    @SudeshChouhan Год назад

    superb tutorial like a pro. Just one thing. Whenever you make next tutorials please do something that website fonts look bigger. It's very difficult to see even in FULL HD

  • @meathopportunitiestraining1143

    Lovely Tutorial, Easy to follow and gives a nice carousel without a plugin. If I could ask a question, with blurb/testimonials being different length (some one sentence some five) is there a way to force equal sizes in the carousel? Thanks.🙂

  • @LandyVlad_Rides
    @LandyVlad_Rides Год назад

    So if using images instead of blurbs do you need to use a different class for that ?

  • @franklinmtelho
    @franklinmtelho 7 месяцев назад

    Thank you for optimizing my project.
    When my success comes, I'll repay you by buying from your store!

    • @DiviLife
      @DiviLife  25 дней назад

      Sounds like a plan!

  • @fjshea
    @fjshea 7 дней назад

    I tried to install the json file into a divi page and got the message
    "This file should not be imported in this context".
    I've tried multiple time with the extruded .json file with no luck.
    Any suggestions?

  • @realalesuarez
    @realalesuarez Год назад

    Can this be used to create a video carousel?

  • @MarcFerre-or1bm
    @MarcFerre-or1bm 8 месяцев назад

    HI, Can this code works with the Divi Woo Products? Thank you

    • @DiviLife
      @DiviLife  25 дней назад

      Yes it should work fine!

  • @alejandrosuarez2479
    @alejandrosuarez2479 Год назад

    Hi Tim, I used the carousel on the image module and although I can sift through the images, they dont open up to be full screen. Is there a work around to this?

  • @daneking2911
    @daneking2911 2 года назад

    Thanks for the video! Everything works except when I change the colour codes for the arrows etc it doesn't change on the front end. Any thoughts as to why? Cheers

  • @nensi986
    @nensi986 5 месяцев назад

    Can I do this with blog post module?

    • @DiviLife
      @DiviLife  25 дней назад

      Yes! Any Divi module should work :)

  • @pclalramenga304
    @pclalramenga304 2 года назад

    How do I get the dot to the middle of the slide. Its showing on the side.

  • @sobrisobri4530
    @sobrisobri4530 Год назад +1

    very usefull thank bro

    • @DiviLife
      @DiviLife  25 дней назад

      You're welcome! :)

  • @rafaelbrodriguez
    @rafaelbrodriguez Год назад

    Is it possible to disable dragging? I'm using a "Supreme Before/After Image slider" so I need the carroussel to stay still when the user drags the before and after and the carrousel should only move when the user clicks on the arrows or dots. Any ideas? Thank you so much!

    • @DiviLife
      @DiviLife  Год назад

      Yes, you can do that! In the code, after line 119, add draggable: false, and that should disable the dragging. :)

  • @ChernoPhil
    @ChernoPhil Год назад

    How is it possible to allow that only on mobile devices?

    • @DiviLife
      @DiviLife  Год назад

      You mean you only want the carousel to show on mobile? You can use Divi's built in responsive editing tools to hide the entire carousel section on Desktop and Tablet :)

  • @JonathanBaileyn2u
    @JonathanBaileyn2u 2 года назад

    Can this be achieved with images, the same way?

  • @anitataylor5093
    @anitataylor5093 3 месяца назад

    Is it possible to autoplay the carousel?

    • @DiviLife
      @DiviLife  25 дней назад

      Absolutely! Just set autoplay to true in the code. Look for the line in the code "slidesToScroll: 1," and add this below it:
      autoplay: true,
      autoplaySpeed: 2000,
      You can then adjust the speed (in milliseconds) as needed.

  • @elpinosero3
    @elpinosero3 2 года назад

    HI Tim, It works and looks very well on desktop, but on phone I'm experiencing horizontal scroll, I'm having the same issue when I'm following the tutorial of Donjetë Vunjiqi from Elegant Themes. I just can't get it right, any sugestions?

  • @linamahrach9696
    @linamahrach9696 2 года назад

    Hello, thank you for this good tutorial!
    I would like to make a carousel with the testimonial module that displays the testimonials one by one, but I didn't manage to modify the code... Can you help me or detail the advantage code so that I can modify it efficiently?
    Thanks in advance

  • @rasmuslarsen3318
    @rasmuslarsen3318 3 года назад +1

    Hey Tim! I'm considering buying the all access pass. One thing I would like to know more about is video carousel. Is it possible with the all access bundle? Both as a section on the page and maybe as a hero section as well? Much appreciated! :)

    • @DiviLife
      @DiviLife  3 года назад

      Hi Rasmus,
      We actually have a carousel module being released for Black Friday that will allow you to create video carousels and more! It allows you to use layouts in your library as carousel items so you can use videos, or entire sections, etc. within your carousel. :)

    • @rasmuslarsen3318
      @rasmuslarsen3318 3 года назад +1

      @@DiviLife Excellent, you have my order tomorrow. Thanks for the fast response Tim ;-)

    • @rasmuslarsen3318
      @rasmuslarsen3318 3 года назад

      @@DiviLife Hey, I bought the full access pass and I have tried to customize some of the 16 carousel modules without luck, even the carousel layout nr. 13. I can get a video to play in the background of each carousel but then it is on autoplay and visitors can't stop the video and play another instead, all videos start at the same time. I can insert link to video, but that link opens in another vindow.
      Is it possible you can make a video carousel setup video and maybe include the carousel section functionality? Perhaps my request evoke something you can add as well :)

  • @pj7390
    @pj7390 2 года назад

    A year old and still hugely relevant. Three issues. Have reduced visible slide to one as I am using image positioned to left. I have 5 images yet it is showing a blank sixth? Is it possible to reposition the arrows? Perhaps higher up in line with my images instead of below. Lastly, too much space between the dots at the bottom and what is above. Any help greatly appreciated. Ta

    • @pj7390
      @pj7390 2 года назад

      Change vertical position of arrows: line 44 - top: 50%;; decrease %tage to move up. Increase %tage to vertically move down.

    • @pj7390
      @pj7390 2 года назад

      Reposition dots. Line 71, bottom value changed to 35%. So far so good

  • @WePiphany
    @WePiphany 2 года назад

    Attempted to get this working, using text modules instead of the blurb moduels, but it is not working. Wonder if reent DIVI updates have broken this?

  • @thebeetbandit1732
    @thebeetbandit1732 Год назад +1

    followed everything on a new website with no plugins and didn't work.

    • @DiviLife
      @DiviLife  25 дней назад

      Make sure to clear all caches!

  • @moussamhanna
    @moussamhanna 8 месяцев назад

    unfortunately it did not worked, the page failed to save when the script is inserted!

  • @alexandrkrasnov3108
    @alexandrkrasnov3108 4 месяца назад

    Hello everyone! Does anyone have this problem with this slider? The distance between the reviews is close, although I download the file from the guys' site, where all the sizes are already corrected. Padding and Margin are set. Who knows what the problem is?

    • @alexandrkrasnov3108
      @alexandrkrasnov3108 4 месяца назад

      Why is this smash together? When I use your premade file?

  • @ThomasschmidtTJS
    @ThomasschmidtTJS 2 года назад +4

    Maybe its because of a Divi update, but Divi adds an additional .et_pb_column inside the column with the .divilife-3-col-feature-blurb-slider class. This results in Slick slider adding the .slick-slider class (the class that slick slider needs to add to the slide container) to the wrong element. To fix this, use the following selector on line 117 of the code provided by this tutorial:
    .divilife-3-col-feature-blurb-slider .et_pb_column

    • @jcturkeyruben
      @jcturkeyruben 2 года назад

      Thanks!

    • @RoFulcher
      @RoFulcher 2 года назад +1

      Is the .et_pb_column added to the existing selector on line 116 or is it addd to a new line on 117? I can't get it to work for me

    • @grantgp
      @grantgp 2 года назад +2

      @@RoFulcher I added it to line 116 jQuery('.divilife-3-col-feature-blurb-slider .et_pb_column').slick({ worked 100%

    • @grantgp
      @grantgp 2 года назад +1

      Thanks

    • @photonsecuritysystem5280
      @photonsecuritysystem5280 Год назад

      @@grantgp its works for me also. thanks.

  • @schreitererstudio
    @schreitererstudio Год назад

    ERROR to upload the zip in wordpress

  • @successemy3713
    @successemy3713 Год назад +1

    I am very disappointed to find that even though I have done as you said and signed up to the email list and logged into my divi account I am still being asked for £24 for the divi carousel layout pack. Whilst I recognise that you will change your offers, it would only be fair surely to also update your utube offers so that I and other are not disappointed.

    • @DiviLife
      @DiviLife  Год назад +1

      Nothing has changed. There’s still a free layout included with this tutorial as promised. It’s only one layout though. The entire layout pack costs money, and has always cost money. The free carousel layout is only for one layout.

    • @successemy3713
      @successemy3713 Год назад

      Thank you for your response, but when I click on your links it only takes me to the whole pack and not to the layout. Can you advise where I am going wrong I don't want all of them, just the one you used. It fits in perfectly with what I am wanting to do. I followed every link and each time I am being taken to the pack only

    • @DiviLife
      @DiviLife  Год назад +1

      If you click on the button that says “Download the Carousel for Free” it will open a popup to put your name and email. Then you’ll get an email with a download link. Check your spam folder if you don’t see the email.

  • @HareeshRajuk
    @HareeshRajuk 3 года назад

    how do you. make this carousal auto scroll?

    • @thehappysites
      @thehappysites 8 месяцев назад

      I have the same question as Hareesh. Did anyone ever figure this out? Thanks!

  • @rahulsonwal5679
    @rahulsonwal5679 3 года назад

    I want to use an image instead of an icon, how will that work?

    • @DiviLife
      @DiviLife  3 года назад

      That will work just fine. You can simply edit the blurb module to show an image instead of the icon :)

    • @rahulsonwal5679
      @rahulsonwal5679 3 года назад +1

      @@DiviLife Thanks, It's work

  • @glenallan6279
    @glenallan6279 3 года назад

    Something I'm not seeing is the carousel auto rotating. The slider plugin I'm using does auto move the modules and it uses slick, so is there a way to get them to move without having to click on the dots? I like this solution a lot more, but really want it to move on its own.

    • @DiviLife
      @DiviLife  3 года назад +3

      Yes, you can easily enable the autoplay within the settings for the carousel (Customizing Carousel Settings: 23:25). Just add "autoplay: true," after "slidesToScroll: 1, " (without the quotes) and that will do it :)

    • @glenallan6279
      @glenallan6279 3 года назад +1

      Okay good. I'd like that option with showing only 1 slide (by editing the slidesToShow: 3, section). Slider plugins are usually quite heavy, so this is great info!

    • @DiviLife
      @DiviLife  3 года назад

      @@glenallan6279 yeah absolutely :)

  • @cherca5110
    @cherca5110 2 года назад

    Thank you :)

  • @jcturkeyruben
    @jcturkeyruben 3 года назад +1

    not working for me

  • @pclalramenga304
    @pclalramenga304 2 года назад

    It works for testimonials & blurb etc but it doesn't work for Blog module. Can anyone help me?

  • @max.guedes
    @max.guedes 2 года назад

    Obrigado pela ajuda!
    👏👏

  • @emmanuelruizestrada5697
    @emmanuelruizestrada5697 2 года назад

    thanks a lot

  • @pj7390
    @pj7390 2 года назад

    Extra dot. Extra blank slide. 5 images showing 6, with one blank?

  • @leonardwass8392
    @leonardwass8392 10 месяцев назад

    This is almost perfect. But I need to create a carousel in a multi-column row, not a 1 column row. Doh! Nice script though.

    • @DiviLife
      @DiviLife  25 дней назад

      I'm not sure what you mean. The carousel code allows you to decide how many columns you want to show in the carousel (slidestoshow).

  • @UnikaKunder
    @UnikaKunder Год назад +2

    2.0 playback speed

  • @mrbalagan9966
    @mrbalagan9966 Год назад

    vampire !!!

  • @gabrielgonzalezgspain
    @gabrielgonzalezgspain Год назад

    TIPS: Increase the volume for your next videos or compare this one to others most recently. YOU ARE A CRACK!!!

  • @SaraGroothof
    @SaraGroothof 4 месяца назад

    Please help! Everything was very straight forward and I followed all the steps, but the blurbs all show up stacked on top of each other and the code shows up written on the website, almost like it is in a text box. @divilife

    • @DiviLife
      @DiviLife  25 дней назад

      It sounds like the carousel code is not being loaded. Try clearing all caches and make sure there's no security plugin or firewall that would prevent the carousel scripts from being loaded on the page.