How to Create a DIVI Carousel Slider Without Plugins | Easy Step-by-Step Tutorial

[@mortenriis5368]

Great explainations, Ryan! But I can't seem to get the "prev/next" arrows to show up. Any idea why that could be?

[@divigeek]

Hi @mortenriis5368, Apologies for the delay, I have been away on holiday. Can you please send or email me a link to your web page, so I can have a look at the code? Thanks, Ryan

[@TilakConrad]

super - thanks very much - great content and style - so happy I came accross your channel - best of luck

[@divigeek]

Hi @TilakConrad, Thanks so much for the kind words. I really appreciate it. All the best, Ryan

[@maryazizi-zm7gg]

Hi, Tnx for your great explanation. I don't like the color and style of the arrows . How can I change them?

[@divigeek]

Hi @maryazizi-zm7gg, Thank you for the kind comment, I appreciate it. Please check the following video to see how to style the navigation and pagination: kzbin.info/www/bejne/l2K1qaGBeLqmerc Let me know if you still need any further help. All the best, Ryan

[@inge-3dwalk836]

hi Ryan, great tutorial! I managed to set up a blurb slider carousel and works fine, THANKS 👌. one small issue: when trying to copy the "autoplay" (from your codepen- imageslider - previous lesson), I must have misplaced something (may be wrong place, error with the accolades (?),...) which obviously breaks the code . Could you show me where to add exactly this autoplay (autoslide) instruction? Many thanks!

[@divigeek]

Hi @inge-3dwalk836, Thank you for your kind comment. I appreciate it. You can edit the code as follows: const blurbCarouselSlider = new Swiper('#blurb-carousel-slider', { slidesPerView: 1, spaceBetween: 15, pagination: { el: '.blurb-carousel-pagination', clickable: true, }, navigation: { nextEl: '.blurb-carousel-button-next', prevEl: '.blurb-carousel-button-prev', }, loop: true, autoplay: { delay: 2000, pauseOnMouseEnter: true, }, breakpoints: { 600: { slidesPerView: 2, spaceBetween: 30, }, 981: { slidesPerView: 3, spaceBetween: 50, } } }); Thanks, Ryan

[@szlavikeszter]

Hi, For some reason, I cannot use the plugin for the snippets. Where do I copy the script then? (This script: const blurbCarouselSlider = new Swiper.....)

[@divigeek]

Hi @szlavikeszter, You can also use a code module to add the JavaScript. Put the code module after all the other elements, and paste the JavaScript between tags. Regards, Ryan

[@divigeek]

If you have any questions or if something was not clear in the video, please leave a comment below. Also let me know if you want me to make any other general WordPress tutorials. Check out my other Divi Sliders and Carousel tutorials here ==> kzbin.info/aero/PLNsnyJYWmvugVM5tpdfKLtFcPROCv6NqL Check out my other Divi tutorials here ==> kzbin.info/aero/PLNsnyJYWmvui4Te84ZvmeJfOFbblcCL1c

[@anatemsmaya9562]

I really like your video! It's pretty helpful, but how do you change the colour of navigation elements (especially pagination)? Thank you!

[@divigeek]

Hi @anatemsmaya9562, Thank you for your kind words, I really appreciate it. You can watch this video in the playlist to see how you can change the styles of the navigation elements: kzbin.info/www/bejne/l2K1qaGBeLqmerc All the best, Ryan

[@AlexMaggi-ct8ro]

Thanks, Ryan. I used this with testimonial modules, which produces largely the same results as blurbs--modules that vary in height, and that adapt to changes in screen size, depending on the amount of content in the module. But I'd prefer the module heights all be the same--basically driven by the tallest module in the group for the particular screen size. How can this be accomplished?

[@divigeek]

Hi @AlexMaggi-ct8ro, Thanks for your comment. Please can you post or email a link to the page, and I can check the code and advise further. Regards, Ryan

[@divigeek]

Hi all, If you have the same issue as above, where the height of the modules are not equal, please paste the following code into the module settings => Advanced Tab => Module Elements => Main Element: height: auto; If you have any issues, please post a comment or send me an email with the page link. Thanks, Ryan

[@mohitashliya8750]

Thanks Ryan that was a greate explaination

[@divigeek]

Hey @mohitashliya8750, Only a pleasure. Thanks for the kind words. All the best, Ryan

[@patsymutiso]

I'm wondering if the Code Snipit plugin slows down your site🤔. I've seen a number of tutorials that use code snipit but im concerned it will make my site slow 😮

[@divigeek]

Hi @patsymutiso, Apologies for the delay, I have been on holiday. I have not noticed an drastic changes with performance issues when using the Code Snippets plugin on my sites. Regards, Ryan

[@MadisonSiufanua]

It didn't work for me, all of my colums are pushed off the the side and its just one vertical row of blurbs squished to my left hand side of the screen

[@divigeek]

Hi @user-vy1pe5og3o, Please can you send me a link to your website page and I will try help you. Regards, Ryan

[@balancogil]

Thank you very much

[@divigeek]

Hi @user-nw4gp4oz4n, Thank you for your comment. regards, Ryan

[@Hgrewssauujdkhvcjjipp]

It's cool 🎉

[@divigeek]

Hi @dedisupardi2815, Thanks very much again for the comment. All the best, Ryan