Author: | harm0nic |
---|---|
Views Total: | 604 views |
Official Page: | Go to website |
Last Update: | March 29, 2022 |
License: | MIT |
Preview:

Description:
HDSlider is a JavaScript library designed to create a responsive, automatic carousel with a cross-fade transition animation.
How to use it:
1. Insert the HDSlider’s JavaScript and Stylesheet into the document.
<link rel=”stylesheet” href=”style.css” media=”all” />
<script src=”script.js”></script>
2. Add slides with background images, titles, and descriptions into the slider.
<div id="slider"> <div class="slide" style="background-image: url(1.jpg)"> <div class="slide_content"> <h3>Slider title 1</h3> <p>This is some paragraph stuff eh</p> <a href="#" class="button">CLICK ME</a> </div> <div class="overlay"></div> </div> <div class="slide" style="background-image: url(2.jpg)"> <div class="slide_content"> <h3>Slider title 2</h3> <p>This is some paragraph stuff eh</p> <a href="#" class="button">CLICK ME</a> </div> <div class="overlay"></div> </div> <div class="slide" style="background-image: url(3.jpg)"> <div class="slide_content"> <h3>Slider title 3</h3> <p>This is some paragraph stuff eh</p> <a href="#" class="button">CLICK ME</a> </div> <div class="overlay"></div> </div> </div>
3. Initialize the HDSlider and done.
HDS("#slider");
4. Additional CSS styles to make the slider more beautiful.
img { max-width: 100%; height: auto; } .slide { display: grid; text-align: center; place-items: center; } .slide_content { max-width: 800px; color: #fff; font-size: 2rem; } h3 { font-size: 1.4rem; color: aquamarine; margin: 0; } p { margin: 0; } .button { text-decoration: none; color: #fff; border: 3px solid aquamarine; padding: 0.4em 1em; font-size: 1rem; } .overlay { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.6; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100% ); }
5. Enable & disable pagination & navigation controls. Default: true.
HDS("#slider",{ pagination: false, navigation: false, });
6. Customize the cross-slide transition effect.
HDS("#slider",{ delay: 0, peed: 5000, transition: 600, });