黑色背景出現在圖像上 slider

Question

基本上我正在使用這個https://github.com/hmongouachon/rgbK.neticSlider試圖制作圖像 slider 但問題是我的圖像更白。 當我按下 next 或 prev 按鈕時，會出現一個很明顯的黑色圖像。 那是我分叉的源代碼，但我的圖像是 450 x 450 不是全屏

---

https://codepen.io/hmongouachon/pen/QWbLpzW

 <section class="hero">
    <div class="hero__box">
      <h1 class="hero__h1">Quize Yourself</h1>
      <p>Download the number one free dictionary app with English language learning tools.</p>
      <div class="hero__btns">
        <img src="./left.png" alt="" class="main-nav prev" data-nav="previous">
        <img src="./right.png" alt="" class="main-nav next" data-nav="next">
      </div>
    </div>
    <div id="rgbKineticSlider" class="rgbKineticSlider"></div>   
  </section>

.hero {
  padding: 0 250px;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hero__box {
  width: 300px;
}
h1 {
  font-size: 60px;
}
p {
  font-size: 20px;
}
.rgbKineticSlider {
  display: block;
  position: relative;
  overflow: hidden;
  width: 450px !important;
  height: 450px !important;
  border-radius: 50px;
}
.rgbKineticSlider canvas {
  width: 450px !important;
  height: 450px !important;
  position: absolute;
  display: block;
  transform: translate(-50%, -50%) scale(2.4) !important;
  background-color: #fff !important;
  /* top: calc(50vh - 225px) !important;
  left: calc(50vw - 225px) !important; */
  /* transform: scale(1) !important; */
}
nav a {
  color: black;
  text-decoration: none;
  position: absolute;
  top: 150vh;
  z-index: 1;
  background-color: white;
  padding: 20px;
}
nav a.next {
  right: 20px;
}
nav a.prev {
  left: 20px;
}

rgbKineticSlider = new rgbKineticSlider({
  // images and content sources
  slideImages: images, // array of images >demo size : 1920 x 1080
  itemsTitles: texts, // array of titles / subtitles
// https://res.cloudinary.com/therealsk/image/upload/v1593860931/heightMap_jjb5ng.png
// https://i.ibb.co/N246LxD/map-9.jpg
  // displacement images sources
  backgroundDisplacementSprite: "https://res.cloudinary.com/therealsk/image/upload/v1593860931/heightMap_jjb5ng.png", // slide displacement image
  cursorDisplacementSprite: "https://i.ibb.co/KrVr51f/displace-circle.png", // cursor displacement image

  // cursor displacement effect
  cursorImgEffect: true, // enable cursor effect
  cursorTextEffect: false, // enable cursor text effect
  cursorScaleIntensity: 0.25, // cursor effect intensity
  cursorMomentum: 0.15, // lower is slower

  // swipe
  swipe: false, // enable swipe
  swipeDistance: window.innerWidth * 0.4, // swipe distance - ex : 580
  swipeScaleIntensity: .1, // scale intensity during swipping

  // slide transition
  slideTransitionDuration: .5, // transition duration
  transitionScaleIntensity: 60, // scale intensity during transition
  transitionScaleAmplitude: 160, // scale amplitude during transition

  // regular navigation
  nav: true, // enable navigation
  navElement: ".main-nav", // set nav class

  // image rgb effect
  imagesRgbEffect: true, // enable img rgb effect
  imagesRgbIntensity: 0.9, // set img rgb intensity
  navImagesRgbIntensity: 20, // set img rgb intensity for regular nav
});

我認為它的 div 容器上出現了 canvas 問題。

Answer 1

圖像被 CORS 策略（跨源資源共享）阻止

筆中的代碼工作得很好，托管圖像的網站不允許在外部域上顯示內容。

您可以嘗試使用 Unsplash 或 Pexels 等免費資源站點中的圖像進行驗證。

請記住，您共享的筆中的圖像是在頂部定義的，您提供的代碼示例中缺少該圖像。

const images = [
  "https://kineticslider.com/_demos/rgbKineticSlider/nature-01.jpg",
  "https://kineticslider.com/_demos/rgbKineticSlider/nature-02.jpg",
  "https://kineticslider.com/_demos/rgbKineticSlider/nature-03.jpg",
];

嘗試這個：

const images = [
  "https://images.pexels.com/photos/11143927/pexels-photo-11143927.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260g",
  "https://images.pexels.com/photos/11143927/pexels-photo-11143927.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
  "https://images.pexels.com/photos/11143927/pexels-photo-11143927.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
];