如何为Owl-Carousel最后一个可见项添加模糊效果

我正在使用Owl-Carousel组件，希望为轮播中最后一个可见的item添加轻微模糊效果，效果示例如下：

相关HTML代码：

<div class="owl-carousel owl-theme owl_carousel_1">
  <div class="item">
    <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="main_hir_img_link" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">
      <img class="img-responsive main_news_thumb  radius" src="/images/news/th-44555-71.jpg" alt="Utalással is fizethető az egészségügyi szolgáltatási járulék">
    </a>
    <h3 class="event_title my-2"><a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" title="Utalással is fizethető az egészségügyi szolgáltatási járulék" class="event_title_link text-black">Utalással is fizethető az egészségügyi szolgáltatási járulék</a></h3>
    <p class="event_desc">2024-ben havi 11 300 forintot kell fizetniük azoknak, akik nem biztosítottak és más módon sem jogosultak az egészségügyi ellátásra.</p>
    <a href="/hir/5/utalassal-is-fizetheto-az-egeszsegugyi-szolgaltatasi-jarulek" class="news_list_to_link d-block text-black" title="Utalással is fizethető az egészségügyi szolgáltatási járulék">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
  </div>
  <div class="item">
    <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="main_hir_img_link" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">
      <img class="img-responsive main_news_thumb  radius" src="/images/news/th-44-283.jpg" alt="2024. évi nyitvatartási idő Pécel Város Óvodáiban">
    </a>
    <h3 class="event_title my-2"><a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban" class="event_title_link text-black">2024. évi nyitvatartási idő Pécel Város Óvodáiban</a></h3>
    <p class="event_desc">Tájékoztatjuk a Tisztelt Szülőket, hogy a 2024. évben Pécel Város Óvodáiban (PVO) az 1. a heti nyitvatartási idő 60 óra, munkanapokon 6:00 óra és 18:00 óra között.</p>
    <a href="/hir/4/2024--evi-nyitvatartasi-ido-pecel-varos-ovodaiban" class="news_list_to_link d-block text-black" title="2024. évi nyitvatartási idő Pécel Város Óvodáiban">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
  </div>
  <div class="item">
    <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="main_hir_img_link" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">
      <img class="img-responsive main_news_thumb  radius" src="/images/news/th-33-882.jpg" alt="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">
    </a>
    <h3 class="event_title my-2"><a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása" class="event_title_link text-black">Még egy hónapig kérhető az szja-bevallási tervezetek postázása</a></h3>
    <p class="event_desc">Március 15-étől mindenki megnézheti szja-bevallási tervezetét, legegyszerűbben a Nemzeti Adó- és Vámhivatal (NAV) Ügyfélportálján vagy eSZJA-oldalán.</p>
    <a href="/hir/3/meg-egy-honapig-kerheto-az-szja-bevallasi-tervezetek-postazasa" class="news_list_to_link d-block text-black" title="Még egy hónapig kérhető az szja-bevallási tervezetek postázása">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
  </div>
  <div class="item">
    <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="main_hir_img_link" title="Képviselő-testületi ülés - 2024. február 28.">
      <img class="img-responsive main_news_thumb  radius" src="/images/news/th-22-532.jpg" alt="Képviselő-testületi ülés - 2024. február 28.">
    </a>
    <h3 class="event_title my-2"><a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" title="Képviselő-testületi ülés - 2024. február 28." class="event_title_link text-black">Képviselő-testületi ülés - 2024. február 28.</a></h3>
    <p class="event_desc">Pécel Város Önkormányzatának Képviselő-testülete 2024. február 28. napján (szerda) 8.00 órai kezdettel rendes képviselő-testületi ülést tart, melyre tisztelettel meghívom.</p>
    <a href="/hir/2/kepviselo-testuleti-ules-2024--februar-28" class="news_list_to_link d-block text-black" title="Képviselő-testületi ülés - 2024. február 28.">Elolvasom <i class="fa fa-chevron-right ml-1"></i></a>
  </div>
</div>

我曾搜索相关解决方案，但未找到有效结果。

解决方案 #

要实现这个效果，需要结合Owl Carousel的事件监听和CSS模糊样式，具体步骤如下：

1. 监听轮播状态变化，标记最后一个可见Item

Owl Carousel会给当前可见的Item的父容器添加active类，我们可以通过监听轮播的初始化和滑动完成事件，动态给最后一个可见Item添加自定义类：

// 监听轮播初始化和滑动完成事件
$('.owl_carousel_1').on('changed.owl.carousel initialized.owl.carousel', function(e) {
  // 移除所有Item的模糊类
  $(this).find('.item').removeClass('last-visible-blur');
  // 获取当前所有可见的Item父容器
  const visibleItems = $(this).find('.owl-item.active');
  // 给最后一个可见Item添加模糊类
  visibleItems.last().find('.item').addClass('last-visible-blur');
});

2. 编写CSS实现模糊效果

根据示例图的渐变模糊效果，推荐使用伪元素实现右侧渐变模糊（比直接给Item加filter更贴合设计）：

/* 给最后一个可见Item设置相对定位，为伪元素提供基准 */
.last-visible-blur {
  position: relative;
  overflow: hidden;
}

/* 右侧渐变模糊遮罩 */
.last-visible-blur::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%; /* 模糊区域宽度，可根据需求调整 */
  height: 100%;
  /* 渐变背景 + 背景模糊 */
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), transparent);
  backdrop-filter: blur(3px); /* 模糊程度，可调整 */
  pointer-events: none; /* 不遮挡Item内部的点击事件 */
}

如果需要Item整体轻微模糊，也可以直接使用filter：

.last-visible-blur {
  filter: blur(2px);
  /* 可选：调整透明度增强效果 */
  opacity: 0.9;
}

注意事项

• 确保代码在Owl Carousel初始化之后执行，或者放在$(document).ready()中
• 不同浏览器对backdrop-filter的支持可能有差异，可根据需要添加浏览器前缀
• 模糊程度和渐变宽度可根据实际设计需求调整

内容的提问来源于stack exchange，提问作者nagyaaa2000