In this tutorial, I will show you how to create a dynamic full screen carousel.
We are using the Loop Carousel for this, so the design of the cards can be anything. The content can come from either the Posts, or from a CPT.
Here is what we are creating:
Features:
- Dynamic: All the data is coming from the CPT (or Post). You have the choice to use either the default WP fields (Post Title, Post Content, Feature Image, etc) or Custom Fields to set unique data for the carousel.
- Make it your own: The loop is simply an Elementor Loop template, adjust as you wish. The carousel is the Loop Carousel, set the arrows, count, etc, as you want.
- Polyvalent: Works with 3 slides, works with 12 slides
- Mobile ready: Works well on mobile too!
In the tutorial, we are going to be using a Custom Post Type (CPT) and the Elementor Loop Carousel element for this.
If you have not worked with CPTs before, I suggest you start by watching this tutorial by Paul. The current tutorial presumes you will know how to create and use a CPT and custom fields.
I got the idea for this tutorial from a screenshot that was shared in the Facebook group. Later, after I got done, I realized this a very similar design to what Make Dream Website on YouTube already has, so if you are looking to get this kind of carousel, but for free, check out his video.
The advantage of the current solution is that it's all dynamic, fed from CPTs or posts. The cards can really have any design you wish, as they are a Loop Template.
Let's get started!
First, let's create your CPT
This is a premium tutorial. Purchase access to unlock the full tutorial.
17 Responses
Hi I bought your tutorial, but I am stuck from the steps "Create your CPT posts"
Do you have anything to help me finish the tutorial. I am not super technical, just want your beautiful design on my site 🙂
Greetings!
This just means, go into WordPress, go in your CPT on the left (instead of Posts, you will have another menu item for your CPT) and create a few instances in there.
Add new CPT posts, fill in the data (title, text, featured image, any custom field you have created).
Let me know if this helps!
Cheers!
When I create a new CPT post, it is in the gutenberg style right? So I need the complete post?
I wanted to use this page to awaken some interest to some of my excisting blog posts. Do I need to copy and paste my excisting blog post? Or is there another way?
I'm sorry for not having too much experience on this topic
If you want the slider to be about your existing blog posts, then you don't need to create a new Custom Post Type (CPT) at all.
You can still create the ACF Custom fields, and set them to show on your Posts.
Then in the query, in the loop carousel, you will set it to query your blog posts.
Hi Max,
The dynamic titles dont change when you have the following active:
Cursor:
- https://element.how/custom-mouse-cursors/
Preloader:
- https://element.how/elementor-premium-preloader/
Header Full Screen:
- https://element.how/elementor-off-canvas-navigation-menu/
https://snipboard.io/1aogQF.jpg
When i switch everything off and leave the slider snippet on the titles change.
Can you please advise? thanks
Greetings!
Could you share your URL with me? I will have a look.
Cheers!
https://www.staging7.combuildaustralia.com/projects/#
Could you try to narrow it down? If only the dynamic slider is enabled, everything works?
If so, enabling which one after this breaks it?
Thanks, I just tested and it seems that the header causes the issue, when i disable the "Header Full Screen" it works.
Also, try to exclude it from the Siteground optimization for the JS. Now it's being combined, that might cause some issues....
Try replacing all the javasccript (inbetween the <script> tags), with this:
document.addEventListener('DOMContentLoaded', function () { const defaultDynamicButtonText = 'View Project'; const postData = []; const dynamicContainer = document.querySelector('.dynamicContainer'); const slides = document.querySelectorAll('.swiper-slide'); const dynamicTitle = document.querySelector('.dynamicTitle h2'); const dynamicText = document.querySelector('.dynamicText > div'); const dynamicButton = document.querySelector('.dynamicButton'); slides.forEach((slide, index) => { const info = JSON.parse(slide.firstElementChild.getAttribute('data-post-information')); const data = { index: index, title: info.title, url: info.url, excerpt: info.excerpt, featuredImageUrl: info.featured_image_url, dynamicTitle: info.dynamic_carousel_title, dynamicText: info.dynamic_carousel_text, dynamicButtonText: info.dynamic_carousel_button_text, dynamicButtonLink: info.dynamic_carousel_button_link, dynamicImage: info.dynamic_carousel_image, imageFocusPoint: info.dynamic_carousel_image_focus_point, }; postData.push(data); appendImage(dynamicContainer, data, index); if (index === 0) updateDynamicContent(data); }); function appendImage(wrapper, data, index) { const img = document.createElement('img'); img.src = data.dynamicImage || data.featuredImageUrl; img.classList.add('dynamicImg'); if (index === 0) img.classList.add('isActive'); img.style = 'position: absolute; width: 100%; height: 100%; left: 0; top: 0'; img.style.setProperty('--focus-point', data.imageFocusPoint); img.setAttribute('data-index', index); wrapper.appendChild(img); } function updateDynamicContent(data) { dynamicTitle.innerHTML = data.dynamicTitle || data.title; dynamicText.innerHTML = data.dynamicText || data.excerpt; dynamicButton.href = data.dynamicButtonLink || data.url; dynamicButton.innerHTML = data.dynamicButtonText || defaultDynamicButtonText || data.title; } let swiperElem = document.querySelector('.dynamicContainer .swiper-container, .dynamicContainer .swiper'); let interval = setInterval(() => { try { if (!swiperElem.swiper) throw new Error('Swiper not found'); initDynamicSwiper(); clearInterval(interval); } catch (error) { console.log(error); } }, 100); function initDynamicSwiper() { let dynamicImages = document.querySelectorAll('.dynamicContainer img'); swiper = swiperElem.swiper; swiper.params.slideToClickedSlide = true; swiper.update(); swiper.on('realIndexChange', function () { const currentIndex = swiper.realIndex; const currentData = postData[currentIndex]; dynamicTitle.classList.add('outTransition'); dynamicText.classList.add('outTransition'); dynamicButton.classList.add('outTransition'); setTimeout(() => { dynamicTitle.classList.remove('outTransition'); dynamicText.classList.remove('outTransition'); dynamicButton.classList.remove('outTransition'); updateDynamicContent(currentData); dynamicImages.forEach((img, i) => { img.classList.remove('isActive'); if (i === currentIndex) img.classList.add('isActive'); }); }, 200); }); } });You're the best it works now 🙂
Great, glad it's working now!
Really horrible instructions. For $50 I expect more. I think a simple video for this would have been much better then these disjointed instruction clearly written for advanced WP users and not for beginners. I wish I could tell you where I went wrong but I don't event know. Like the first comment I had no idea what "Create your CPT posts," meant so I'm not sure if I'm doing something wrong there or if I didn't name custom fields correctly so the code recognizes the sections. I thought I did but I have no way of knowing because the instructions are so vague. Next the instruction involving using of the "Code Snippet plugin" was out of blue. Do you want me to download your pluggin or not? Why are so many things up to me when I don't know what I' doing? If you want people to download the plugin you seem to be promoting (maybe because you own it) then tell me at the start to download it with all the pluggins I need before I start, rather than nearly at the end of the "tutorial." Where I stopped trying to figure out the problem was at "child theme functions.php," part. At what point do you explain what this is or where to find it. I tried dropping the code in the custom css panel but that did not work. Honestly feel like requesting a refund or disputing the charge for this. I thought for $50 you'd at least make a video showing how to install it start to finish or have a working file that I could install myself without all these complicated steps. Please show me what to do or I'll need to reach out to customer support for my money back.
Greetings Rich!
No need to dispute. I'm here to help, and if that fails I will refund you.
This tutorial isn't intended for beginners, as I mention in the start, first you need to be familiar with CPTs and ACF. If you don't know what a child theme functions.php file is, it's likely you are not the intended audience for this.
If you would still like some help getting this working, I will be glad to. If you want a refund, no worries. Let me know which you prefer.
Cheers!
Greetings Rich,
Just to let you know I issued a full refund.
Thank you for the refund. I paid a dev to get it working. I will still keep trying your products because I do think you offer high quality templates but I'd just recommend spelling things out for noobies like me more thoroughly or by making a how to video.