Header Hero Slideshow

Justoverclock

Mahendra unfortunately i need to ceck what is the issue, bevause other people use it without problems
https://caba.de/cabaflarum/public/ this is an example

Mahendra

Justoverclock hello sir, Are you online?
Now on extension on site. The image url is taken but image is not show in slide.
If you can help us out really helpful. Please once site again.

Looking to your reply

Justoverclock

Mahendra as you can see the image link is wrong, now is

Photo by Anete Lusina from Pexels: https://www.pexels.com/photo/briefcase-with-documents-placed-on-table-4792282/

and should be
https://images.pexels.com/photos/4792282/pexels-photo-4792282.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1

if you inspect your element you can see clearly the error...your element now is (wrong)

<img class="carousel__slide-image" src="Photo by Anete Lusina from Pexels: https://www.pexels.com/photo/briefcase-with-documents-placed-on-table-4792282/">

Dr_Sommer

Mahendra
Hi, did you try to clear the Cache over CLI? Also try other Browsers.... not sure but I Think at the beginning I hat the same issue...

Mahendra

Justoverclock Thank very much 💟 , it working now.

Mahendra

Need to disable header slideshow, when I click on particular tag. Only want to show on Home page.
Can you please provide me CSS code ?

Devonab

Mahendra

I don't think you can do this in CSS alone because there is a dynamic class that is generated with the number of your tag when you are in a category page... (or else you have to create a CSS rule for each tag, which can be a bit time-consuming depending on the number of categories you have).

However, you could use JavaScript to hide the banner if you're in a category. Try to add this on your footer :

<script>
  document.addEventListener('DOMContentLoaded', () => {
    if (document.querySelector('.IndexPage[class*="IndexPage--tag"]')) {
      document.querySelector('.carousel')?.style.setProperty('display', 'none', 'important');
    }
  });
</script>

Mahendra

Devonab Thank you for replying and help!
But I tried this is not work out properly. carousel still only disable when you reload the site... when you first time click on tag is visible, after site reload it is disable.

Can please fix that?

hf06

Mahendra

document.addEventListener('DOMContentLoaded', () => {
  const indexPage = document.querySelector('.IndexPage');
  const carousel = document.querySelector('.carousel');

  const hideCarousel = () => {
    if (indexPage && indexPage.className.includes('IndexPage--tag')) {
      carousel?.style.setProperty('display', 'none', 'important');
    }
  };
  hideCarousel();
  // check
  const observer = new MutationObserver(hideCarousel);
  observer.observe(document.body, { childList: true, subtree: true });
});

This script should hide the .carousel element immediately and also handle cases where content may be added dynamically after the page load. It listens for changes to the DOM and runs the hideCarousel function when updates occur.

Note: I'm building upon the code Devonab provided, and I forgot to mention this in my previous reply.

Mahendra

Mahendra please someone help on this?

Mahendra

Mahendra Hi friends, can you please help me out on this? @Devonab

hf06

Mahendra

You can try using the following JavaScript code to hide the .carousel element on pages that have classes starting with IndexPage--tag (e.g., IndexPage--tag1, IndexPage--tag2, etc.):

document.addEventListener('DOMContentLoaded', () => {
  const indexPage = document.querySelector('.IndexPage');
  if (indexPage && indexPage.className.includes('IndexPage--tag')) {
    document.querySelector('.carousel')?.style.setProperty('display', 'none', 'important');
  }
});

This script will check if the page contains a class like IndexPage--tag and hide the .carousel element if found. Let me know if it works for you!

Mahendra

hf06 Thanks for reply 🙂
Yes it worked but I need to do site reload then it's hide the carousel.
Important:Needed - If I click first time on any individual tag (a mouse click event) then it open tag discussion with disable header slide show (carousel). Now it woking but need to reload the page.

LordZargum

Hi all, is there a “correct” size for the background?

Mahendra

hf06 having the same issue still, I think code to be using the addEventListener() method: "click" not loaded

hf06

Hi, I'm not sure if the issue is still happening; it's been a week, and it just crossed my mind 😄

Adding a 1ms delay might solve the problem – would you like to give it a try?

(It’s currently 8 AM local time for me, and I just woke up. I think I saw it in a dream 🥱)

setTimeout(() => {
  document.addEventListener('DOMContentLoaded', () => {
    const indexPage = document.querySelector('.IndexPage');
    const carousel = document.querySelector('.carousel');

    const hideCarousel = () => {
      if (indexPage && indexPage.className.includes('IndexPage--tag')) {
        carousel?.style.setProperty('display', 'none', 'important');
      }
    };

    hideCarousel();

    // check
    const observer = new MutationObserver(hideCarousel);
    observer.observe(document.body, { childList: true, subtree: true });
  });
}, 1); // 1 ms

It solved issues in a previous JS code I wrote. Try increasing the 1ms delay up to 1000 and test it.

If it still doesn’t work, let me know. I have another idea: hiding it with CSS on all pages and then making it visible with JS only on the homepage – we can try that as well.

Mahendra

Thank you🙂 @hf06 for helping me. But it still needed the reload the site to remove the carousel.

« Previous Page Next Page »