实现带全屏背景的Swiper.js滑块：背景图切换更新失败及报错修复

问题 #

参照网站实现Swiper.js轮播组件，文本动画已完成，但全屏背景图切换时无法更新。尝试通过滑块索引匹配图片数组更新src，持续出现**"无法获取undefined的image属性"**报错。

原代码 #

JavaScript

var images = [
  {
    id: "0",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
  {
    id: "1",
    img: "https://i.im.ge/2022/12/15/df3XIx.almond-key.jpg",
  },
  {
    id: "2",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
  {
    id: "3",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
  {
    id: "4",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
];
const img = document.querySelector(".prjctbg");
// for (i = 0; i < images.length; i++) {
//   console.log(images[i].img);
//   img.src = images[i].img;
// }
var swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  spaceBetween: 1,
  slidesPerView: 2.5,
  centeredSlides: true,
  roundLengths: true,
  loop: true,
  loopAdditionalSlides: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  on: {
    slideChangeTransitionStart: function () {
      var imgElement = document.querySelector(".prjctbg");

      // Get the current slide index
      var slideIndex = this.realIndex;
      imgElement.src = images[slideIndex].img;
    },
  },
});

CSS

.projectSlider {
  width: 100vw;
  height: 100vh;
  position: relative;
  .prjctbg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px);
    -webkit-filter: blur(8px);
  }
}
.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(0.8);
  text-align: center;
  p {
    overflow: hidden;
    color: #fff;
    span {
      transform: translateY(100px);
      transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
        transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
      display: block;
    }
  }
  h1 {
    color: #fff;
    font-size: 3em;
    line-height: 100%;
    transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
      transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
    margin: 0px;
    transform: scale(0.5);
  }
  &.swiper-slide-active {
    p {
      opacity: 1;
      transition-delay: 0.5s;
      span {
        transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
          transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
        transform: translateY(0px);
        display: block;
      }
    }
    h1 {
      transition: transform 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s,
        transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
      transition-delay: 0.15s;
      transform: scale(1);
    }
    transform: scale(1);
  }
}

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/css/swiper.css"
/>
<div class="projectSlider">
  <img src="" alt="" class="prjctbg" />
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="swiper-slide-container">
          <div class="details">
            <h1 class="elmt">
              Audiovisual <br />
              Design
            </h1>
            <p class="elmt">
              <span> Video Installation</span>
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">
          <div class="details">
            <h1 class="elmt">
              Exhibition <br />
              Design
            </h1>
            <p class="elmt">
              <span> Multimedia Exhibition</span>
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">
          <div class="details">
            <h1 class="elmt">
              Texts and <br />
              Images
            </h1>
            <p class="elmt">
              <span> website + Print Magazine </span>
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">
          <div class="details">
            <h1 class="elmt">
              Material and <br />
              Light
            </h1>
            <p class="elmt">
              <span> Short Video</span>
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">
          <div class="details">
            <h1 class="elmt">
              Dimension <br />
              Design
            </h1>
            <p class="elmt">
              <span> Rendered Image </span>
            </p>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="swiper-slide-container">
          <div class="details">
            <h1 class="elmt">
              App <br />
              Design
            </h1>
            <p class="elmt">
              <span> Sustainability App</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.0/js/swiper.js"></script>

解决方案 #

问题根源 #

1. 数组长度与滑块数量不匹配：images数组仅5项，但页面有6个swiper-slide，当索引为5时，images[5]不存在，读取.img属性时报错。
2. 背景图未初始化：页面加载时.prjctbg的src为空，初始无背景图。
3. 重复DOM查询：每次滑块切换时重复调用document.querySelector，性能冗余。

修复代码 #

修改后的JavaScript

var images = [
  {
    id: "0",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
  {
    id: "1",
    img: "https://i.im.ge/2022/12/15/df3XIx.almond-key.jpg",
  },
  {
    id: "2",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
  {
    id: "3",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
  {
    id: "4",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
  {
    id: "5",
    img: "https://i.im.ge/2022/12/15/dfE2sy.aura-blobb.png",
  },
];
// 提前缓存背景图元素
const imgElement = document.querySelector(".prjctbg");
// 初始化背景图
imgElement.src = images[0].img;

var swiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  spaceBetween: 1,
  slidesPerView: 2.5,
  centeredSlides: true,
  roundLengths: true,
  loop: true,
  loopAdditionalSlides: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  on: {
    slideChangeTransitionStart: function () {
      var slideIndex = this.realIndex;
      // 增加边界判断，防止索引越界
      if (images[slideIndex]) {
        imgElement.src = images[slideIndex].img;
      }
    },
  },
});

CSS与HTML代码无需修改，直接使用原代码即可。

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