14 days later

Hi Friends
Can someone help me out with this ?
I add this extension to flarum site but image is not displayed after adding the link of image url. Just showing Black in screen in every slide.
@Justoverclock

    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

        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 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/">
              6 months later

              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 ?

                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>

                    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?

                        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!

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

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

                                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.

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