Touch-enabled Carousel With RGB Split And Liquid Distortion Effects – rgbKineticSlider

Preview:

Description:

rgbKineticSlider is a JavaScript slider plugin to create a pretty awesome, touch-enabled carousel with RGB split and liquid distortion effects using WebGL and JavaScript animations.

See It In Action:

Dependencies:

• imagesloaded: Renders the slider after all images are loaded.
• Pixi.js & Pixi Filters: Used as a Renderer and filtering engine.
• GSAP TweenMax: Used for high-performance animations.

How to use it:

1. Load the rgbKineticSlider plugin and other required resources in the document.

<script src="/path/to/cdn/imagesLoaded.pkgd.min.js"></script>
<script src="/path/to/cdn/pixi.min.js"></script>
<script src="/path/to/cdn/pixi-filters.min.js"></script>
<script src="/path/to/cdn/TweenMax.min.js"></script>
<script src="/path/to/js/rgbKineticSlider.js"></script>

2. Create a container to hold the slider.

<div id="rgbKineticSlider" class="rgbKineticSlider"></div>

3. Create next/prev navigation controls for the slider.

<nav>
  <a href="#" class="main-nav prev" data-nav="previous">Prev <span></span></a>
  <a href="#" class="main-nav next" data-nav="next">Next <span></span></a>
</nav>

4. Define image & description arrays as follows:

const images = [
      "1.jpg",
      "2.jpg",
      "3.jpg",
];
const texts = [
      ["Title 1", "Description 1"],
      ["Title 2", "Description 2"],
      ["Title 3", "Description 3"],
]

5. Initialize the rgbKineticSlider plugin and done.

const mySlider = new rgbKineticSlider({
      slideImages: images,
      itemsTitles: texts
});

6. Customize the Liquid Distortion effect.

const mySlider = new rgbKineticSlider({
      slideImages: images,
      itemsTitles: texts,
      backgroundDisplacementSprite: 'Sprite.jpg', // slide displacement image 
      cursorDisplacementSprite: 'Sprite.png', // cursor displacement image
      cursorImgEffect : true, 
      cursorTextEffect : false,
      cursorScaleIntensity : 0.65, 
      cursorMomentum : 0.14
});

7. Customize the RGB split effect on images.

const mySlider = new rgbKineticSlider({
      slideImages: images,
      itemsTitles: texts,
      imagesRgbEffect : false,
      imagesRgbIntensity : 0.9,
      navImagesRgbIntensity : 80
});

8. Enable/disable the touch support.

const mySlider = new rgbKineticSlider({
      slideImages: images,
      itemsTitles: texts,
      swipe: true,
      swipeDistance : window.innerWidth * 0.4, 
      swipeScaleIntensity: 2
});

9. Enable/disable the slider navigation.

const mySlider = new rgbKineticSlider({
      slideImages: images,
      itemsTitles: texts,
      nav: true, 
      navElement: '.main-nav'
});

10. Customize the transition effect.

const mySlider = new rgbKineticSlider({
      slideImages: images,
      itemsTitles: texts,
      slideTransitionDuration : 1, 
      transitionScaleIntensity : 30, 
      transitionScaleAmplitude : 160
});

11. Possible options for the image titles & descriptions.

const mySlider = new rgbKineticSlider({
      slideImages: images,
      itemsTitles: texts,
      textsDisplay : true, // show title
      textsSubTitleDisplay : true, // show subtitles
      textsTiltEffect : true, // enable text tilt
      googleFonts : ['Playfair Display:700', 'Roboto:400'], // select google font to use
      buttonMode : false, // enable button mode for title
      textsRgbEffect : true, // enable text rgb effect
      textsRgbIntensity : 0.03, // set text rgb intensity
      navTextsRgbIntensity : 15, // set text rgb intensity for regular nav
      textTitleColor : 'white', // title color
      textTitleSize : 125, // title size
      mobileTextTitleSize : 125, // title size
      textTitleLetterspacing : 3, // title letterspacing
      textSubTitleColor : 'white', // subtitle color ex : 0x000000
      textSubTitleSize : 21, // subtitle size
      mobileTextSubTitleSize : 21, // mobile subtitle size
      textSubTitleLetterspacing : 2, // subtitle letter spacing
      textSubTitleOffsetTop : 90, // subtitle offset top
      mobileTextSubTitleOffsetTop : 90
});