Fullscreen Carousel Slide Show with Jquery | Boyce slideshow

Boyce Slideshow is a responsive, accessible, carousel, auto-rotation, and full screen (slider/slide show) built on jQuery and CSS/CSS3. To move between images manually, click the Next/Previous buttons or press the Left/Right arrow keys.

This site has a full-screen slideshow that changes when you use the previous and next buttons and plays automatically, every few seconds the slide moves to the next slide. Every time we make an update we can see in which segment we are browsing thanks to the numbers at the bottom of the page.

How to make use of it:

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

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

2. Add background pictures 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 needed styles for the carousel 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 newest jQuery library on the web page.

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

5. Include the principle script slideshow.js after jQuery.

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

Automatic Fullscreen Carousel Slideshow, Boyce slideshow Plugin/Github


See Demo And Download

Official Website(AlexEguiluz): Click Here

This superior jQuery/javascript plugin is developed by AlexEguiluz. For extra Advanced Usage, please go to the official website.

Share