Elementor Dynamic Carousel With Full Screen Image Changes

Elementor Dynamic Carousel With Full Screen Image Changes

Element.How also offers premium tutorials! Check them here:

Table of Contents

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:

Please purchase access and be logged in to access this template.

 

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.

Access tutorial

$39/one time Purchase access

Includes

  • Gain Access to This TutorialUnlock complete access to the current tutorial:
  • Future UpdatesYou will get access to all future updates to this tutorial.
  • Enjoy Unlimited UsageUse on as many of your own sites or your clients sites as you wish.

    Note that reselling or redistributing is not permitted.

Access everything

$299/one time Purchase All Access

Includes

  • Unlock every premium tutorial on Element.howGet access to the entire library of premium tutorials on Element.how
    Preview premium tutorials
  • Get access to the CSS course for Elementor usersAccess the complete 14 HTML chapters, 30 CSS chapters and 7 Elementor Projects.Learn more
  • Simple CSS Grid For ElementorAn Elementor Addon to Create Awesome Grid Layouts in a Single Click for Containers, Galleries and Loop Grid. Learn more
  • free extra: ShapeDividers.com Premium AccessLifetime Premium Access to ShapeDividers.comVisit ShapeDividers.com
  • 30 day money backNo questions asked money back. Not what you expected? Get a refund.
  • One-time payment of only $299No hidden fees or subscriptions.

    Sales taxes added where applicable.
  • Great supportGet help when you need it. Support includes getting things working as intended.

    Support excludes customization work.
  • Lifetime access to everything Element.howThe price reflects what is currently available on Element.how. All future updates are included, but none are promised. You pay for what is available now, and the rest is a sweet extra.

    I will say that it is definitely my intention to keep adding tutorials to Element.how.
* All prices are USD. Applicable taxes will be charged at checkout. Have a question? See the FAQ or email me.

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2737 Elements right here:

Checkout the Elementor Addon Finder directly

17 Responses

  1. 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 🙂

    1. 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!

      1. 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

    2. 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.

    1. 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?

      1. Thanks, I just tested and it seems that the header causes the issue, when i disable the "Header Full Screen" it works.

    2. Also, try to exclude it from the Siteground optimization for the JS. Now it's being combined, that might cause some issues....

    3. 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);
              });
          }
      
      });
      
  2. 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.

    1. 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!

      1. 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.

Leave a Reply