Cross-slide Background Carousel In Vanilla JavaScript

Category: Javascript , Slider | August 9, 2019
Author: gusmagalhaes
Views Total: 223
Official Page: Go to website
Last Update: August 9, 2019
License: MIT

Preview:

Cross-slide Background Carousel In Vanilla JavaScript

Description:

A tiny, responsive carousel slider that cross-slides between various background images using plain JavaScript and CSS.

How to use it:

Load the core stylesheet slider.css and JavaScript slider.js in the document.

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

Add slides together with navigation arrows and pagination bullets to the carousel.

<div class="slides">
  <div id="slide-1" class="active"></div>
  <div id="slide-2"></div>
  <div id="slide-3"></div>
  <div id="slide-4"></div>
</div>

<ul class="slide-controller">
  <li data-link="slide-1" class="active"></li>
  <li data-link="slide-2"></li>
  <li data-link="slide-3"></li>
  <li data-link="slide-4"></li>
</ul>

<button class="arrow-button-right">
  <img src="vanillaslider/arrow-right.svg" alt="next">
</button>

<button class="arrow-button-left">
  <img src="vanillaslider/arrow-left.svg" alt="previous">
</button>

Add background images to the slides.

#slide-1,#slide-2,#slide-3,#slide-4{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

#slide-1 {
  background-image: url(1.jpg);
}

#slide-2 {
  background-image: url(2.jpg);
}

#slide-3 {
  background-image: url(3.jpg);
}

#slide-4 {
  background-image: url(4.jpg);
}

Enable the autoplay feature and set the interval in milliseconds.

var autoplay = true, slidetime = 5000;

You Might Be Interested In:


Leave a Reply