如何创建一个带有模糊无焦点元素的Swiper JS，HTML CSS Carousel？

<div id="mySwiper" class="swiper-container">
  <!-- 轮播图内容 -->
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- 第一张轮播图内容 -->
    </div>
    <div class="swiper-slide">
      <!-- 第二张轮播图内容 -->
    </div>
    <!-- 添加更多轮播图内容 -->
  </div>
</div>

.swiper-container {
  width: 100%;
  height: 400px; /* 根据需要调整高度 */
  background-color: #f5f5f5; /* 设置背景颜色 */
  border: 1px solid #ccc; /* 设置边框 */
}

.swiper-slide {
  width: 100%;
  height: 100%;
  background-size: cover;
  filter: blur(5px); /* 添加模糊效果，可以根据需要调整模糊程度 */
}

var mySwiper = new Swiper('#mySwiper', {
  loop: true, // 开启循环模式
  autoplay: {
    delay: 3000, // 自动切换的时间间隔（单位为毫秒）
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

<script src="path/to/swiper.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var mySwiper = new Swiper('#mySwiper', {
      // 配置参数
    });
  });
</script>