Responsive Parallax Carousel In Pure JavaScript – FG-image-slider

FG-image-slider is a lightweight, responsive JavaScript carousel plugin that supports any web content and comes with a parallax effect when transitioning between slides.

More features:

• Autoplay.
• fade, scale, slide, slide-top animations.
• Configurable animation speed.
• Pagination bullets.

How to use it:

Include the stylesheet ‘slider.css’ and JavaScript ‘slider.js’ on the webpage.

<link rel="stylesheet" href="css/slider.css">
<script src="js/slider.js"></script>

Include the Font Awesome for the icons.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Add your own content to the carousel.

<div class="fg-slider" id="slider-example">
  <div class="fg-content text-center">
    <p>Content 1</p>
  </div>
  <img src="1.jpg" alt="">
  <div class="fg-content text-center">
    <p>Content 2</p>
  </div>
  <img src="2.jpg" alt="">
  <div class="fg-content text-center">
    <p>Content 3</p>
  </div>
  <img src="3.jpg" alt="">
  ...
  
</div>

Initialize the carousel with optional settings.

new FgSlider('slider-example', {
    autoplay: true, // autoplay on / off
    effect: 'slide', // fade, scale, slide, slide-top
    duration: 5000, // duration till the next slide
    bullets: true, // show / hide bullets
});