Cross-slide Carousel With Vanilla JavaScript – HDSlider

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