Automatic Fullscreen Carousel Slideshow In jQuery

A responsive, accessible, auto-rotating, fullscreen carousel (slider/slideshow) built on top of jQuery and CSS/CSS3.

To navigate between images manually, click the next/prev buttons or press the Left/Right arrow keys.

How to use it:

1. Add the slideshow together with the steps and navigation controls to the page.

<div class="slideshow">
  <div class="holder">
    <div class="slide-1">jQueryScript.Net</div>
    <div class="slide-2">jQueryScript.Net</div>
    <div class="slide-3">jQueryScript.Net</div>
    <div class="slide-4">jQueryScript.Net</div>
  </div>
</div>
<div class="steps">
</div>
<a href="#" class="prev">Prev</a>
<a href="#" class="next">Next</a>

2. Add background images to the slides.

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

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

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

3. The necessary styles for the caorusel slideshow.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  line-height: 1.6;
  background: #000000;
  color: #ffffff;
  overflow: hidden;
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.holder {
  position: relative;
  top: 0;
  left: 0;
  width: 10000vw;
  height: 100vh;
  transition: left 1s;
}

.holder div {
  float: left;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 20px 30px;
}

.steps {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

a {
  color: white;
  padding: 20px 30px;
  position: absolute;
  bottom: 0;
  text-decoration: none;
  z-index: 1;
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

4. Include the latest jQuery library on the page.

<script src="/path/to/cdn/jquery.min.js"></script>

5. Include the main script slideshow.js after jQuery. That's it.

<script src="js/slideshow.js"></script>

---

This awesome jQuery plugin is developed by AlexEguiluz. For more Advanced Usages, please check the demo page or visit the official website.