html 如何以全宽度背景动画swiper.js滑块

anauzrmj  于 2022-12-16  发布在  其他
关注(0)|答案(3)|浏览(124)

我已经尝试过使用Swiper.js创建一个滑块/旋转木马，就像这个网站上的一样：https://stinna-it.nl/alle-projecten。我也设法实现了文本效果，但是，我有麻烦的背景图像。我添加了一个图像标记到HTML，但它不更新时，幻灯片的变化。我创建了一个数组的图像，并试图更新他们根据幻灯片索引号，但我不断得到一个错误，说明“无法获得未定义的图像”。

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;
    },
  },
});
.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;
  //   transition: cubic-bezier(0.165, 0.84, 0.44, 1);
  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);
  }
}
<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>
Html

3条答案

按热度按时间
uinbv5nw

uinbv5nw1#

使用find函数通过图像的.id属性而不是其索引/键来引用图像：

imgElement.src = images.find( el => el.id == slideIndex ).img;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

赞(0）分享  回复(0）举报  2022-12-16
d7v8vwbk

d7v8vwbk2#

我想通了，但我想知道如何动画它，如果有人知道一个更好的解决这个问题，请分享它。这是更新的代码：

on: {
slideChangeTransitionStart: function () {
  var imgElement = document.querySelector(".prjctbg");

  // Get the current slide index
  var slideIndex = this.realIndex;
  console.log(slideIndex);
  for (i = 0; i < images.length; i++) {
    if (slideIndex == images[i].id) {
      img.src = images[slideIndex].img;
    }
  }
},

}，

赞(0）分享  回复(0）举报  2022-12-16
2j4z5cfb

2j4z5cfb3#

我不熟悉Swiper.js，但我继续在React.js中解决并简化了您的问题。
下面是我将如何处理所说的问题（不知道您的情况和完整的用例）。
Index File
CSS File
实时演示：https://codesandbox.io/s/interesting-frog-yzttmb?file=/src/styles.css
这看起来可能真的很复杂，但我所做的只是Map您的图像并使用一些CSS条件来呈现它们。
我选择在PageButtons部分Map照片的原因是，当我们向数据中添加新照片时，我们不必做任何工作，照片和新的carousel按钮将自动添加。
最后，我会建立我自己的旋转木马，我注意到你有一吨的额外的图像，以及是相同的图像。我去，并添加了一个更多的显示点。
你现在唯一剩下的任务是弄清楚你的动画-我会建议远离太多的动画优化的原因，但你会做你想要的。
干杯，

赞(0）分享  回复(0）举报  2022-12-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com