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

Category: Javascript , Slider | October 9, 2018
Author: woody180
Views Total: 1,287
Official Page: Go to website
Last Update: October 9, 2018
License: MIT

Preview:

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

Description:

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

You Might Be Interested In:


Leave a Reply