Black background appering on image slider

Question

Basically I'm using this https://github.com/hmongouachon/rgbKineticSlider trying to make an image slider but the problem is that my images are more white. When I press next or prev buttons a black image appears which is noticeble. That's the source code I forked but my images are 450 x 450 not full screen

---

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
});

I think there is canvas problem that appears on it's div container.

Answer 1

The images are blocked by a CORS policy (Cross-Origin Resource Sharing)

The code in the pen works perfectly fine, the website the imagery is hosted on does not allow displaying the content on an outside domain.

You can try an image from a free resource site like Unsplash or Pexels to verify.

Keep in mind the imagery in the pen you shared is defined at the top, which is missing in the code sample you provided.

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",
];

Try this:

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",
];