Author: | woody180 |
---|---|
Views Total: | 4,550 views |
Official Page: | Go to website |
Last Update: | October 9, 2018 |
License: | MIT |
Preview:

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