Link on Banner Section Not Clickable (Possible Z-Index or Interaction Conflict)

Finsweet Components
1

Description

Hey everyone — I’m running into an issue on my Prisma site where the main banner section has a link applied (either through a link block or an interaction trigger), but it’s not clickable on the live site. Everything looks fine in Webflow Designer — the link covers the full banner, but on publish, the link either doesn’t register at all or only certain parts are clickable.

I’ve checked:

  • Z-index layers (the link block is on top)

  • Pointer events on overlay or animation elements

  • That no Finsweet Attributes (like fs-scroll-disable or fs-interaction) are interfering

  • The element hierarchy (the link block wraps all child elements properly)

Still, no luck. It feels like something on top is blocking it or an injected attribute is overriding pointer events.

Has anyone run into a similar issue with banner links not working — especially if using Finsweet scripts, CMS filters, or injected elements elsewhere on the site?

Site URL

Required: Please provide a staging/production URL where we can see the issue

Steps to Reproduce

Refresh homepage

Expected Behavior

CMS project page to link correctly to each link on the slider showing the projects.

Actual Behavior

When hovering over link area to view project it is linking to the last project in the slider. Once you scroll through all of the projects in the initial loop it then works correctly when you reset the loop fully.

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

Hey @sam! Could you please pinpoint me to which page/link you are referring to?

Are you adding this link with code or natively?

3

This is what I have in the body code for the homepage.

<!-- Sync Hero Slider Button with Active Slide -->

<script>
window.Webflow ||= [];
window.Webflow.push(() => {
  const sliderEl = document.querySelector('.homepage-hero-slider-2_instance');
  const buttonLink = document.querySelector('.homepage-hero-slider-2_button a'); // actual <a> tag inside button
  if (!sliderEl || !buttonLink) return;
  const waitForSwiper = setInterval(() => {
    if (sliderEl.swiper) {
      clearInterval(waitForSwiper);
      const swiper = sliderEl.swiper;
      const updateButtonLink = () => {
        // find the currently active real (non-duplicate) slide
        const activeSlide = swiper.slides[swiper.activeIndex];
        const realSlideIndex = activeSlide.getAttribute('data-swiper-slide-index');
        const realSlide = document.querySelector(`.homepage-hero-slider-2_slide[data-swiper-slide-index="${realSlideIndex}"]:not(.swiper-slide-duplicate)`);
        
        if (realSlide) {
          const slideLink = realSlide.querySelector('.home_hero-slider-project-details');
          if (slideLink && slideLink.href) {
            buttonLink.href = slideLink.href;
            buttonLink.style.pointerEvents = 'auto';
            buttonLink.style.zIndex = '30';
          }
        }
      };
      // Run on load and after every transition
      updateButtonLink();
      swiper.on('slideChange', updateButtonLink);
      swiper.on('loopFix', updateButtonLink);
      // extra safety refresh
      setTimeout(updateButtonLink, 1000);
    }
  }, 200);
});
</script>

It’s the hero header section on the homepage: https://madebyprisma.webflow.io

Thanks for looking @Support-Luis

4

Hey @sam, the issue is the selector used on this line

const buttonLink = document.querySelector('.homepage-hero-slider-2_button a'); // actual <a> tag inside button

If you were to console log the buttonLink, you’ll see it returns null which makes the script stop due to the followun conditional.

if (!sliderEl || !buttonLink) return;

My recommendation is to use attribute selectors, such as data-link = buttonLink as these are less likely to change as the design of the page changes.

I’d also recommend using the Component Slider API to add any code that interacts with the slider elements as it is only ran after the library has sucessfully loaded on the page.

The callback looks like this

<script>
  window.fsComponents = window.fsComponents || [];
  window.fsComponents.push([
    'slider',
    (sliderInstances) => {
      console.log('slider Successfully loaded!');

      // The callback passes a sliderInstances array with all the sliderInstance instances on the page.
      const [sliderInstance] = sliderInstances;
      console.log(sliderInstance);

      // Each sliderInstance is a Swiper object - Now you can interact with Swiper's APIs.
      // https://swiperjs.com/swiper-api#events

      sliderInstance.on('slideChange', function () {
        console.log('slide changed');
      });
    },
  ]);
</script>