7+ JavaScript Fullscreen Slider Examples

This post contains a total of 7+ Hand-Picked JavaScript Fullscreen Slider Examples with Source Code. All these Fullscreen Sliders are made using JavaScript and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

JavaScript Fullscreen Slider Examples

1. By Steven Chu

Made by Steven Chu. FullScreen Slider with Hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - FullScreen Slider </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@charset "UTF-8";
.mainslider #mainslick * {
  overflow: hidden;
}
.mainslider #mainslick .img--holder {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.mainslider #mainslick .carousel-content {
  width: 100%;
  left: 0%;
  right: 0%;
  text-align: center;
  position: absolute;
  z-index: 2;
  margin: auto;
  top: calc(50% + 50px);
  transform: translateY(-50%);
  bottom: auto;
  padding: 0 20px;
}
.mainslider #mainslick .carousel-content header, .mainslider #mainslick .carousel-content p {
  color: transparent;
  background-color: #949494;
  -moz-background-clip: text;
  /*for Firefox*/
  -webkit-background-clip: text;
  /*for Google Chrome、Safari*/
  -o-background-clip: text;
  /*for Opera*/
  background-clip: text;
  /*for IE*/
}
.mainslider #mainslick .carousel-content header {
  font-size: 56px;
  font-weight: bold;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  text-shadow: -1px -3px 0px #fff;
}
@media only screen and (max-width: 767px) {
  .mainslider #mainslick .carousel-content header {
    font-size: 24px;
    margin-bottom: 15px;
  }
}
.mainslider #mainslick .carousel-content p {
  text-shadow: -1px -1px 0px #fff;
  font-size: 24px;
  margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
  .mainslider #mainslick .carousel-content p {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
.mainslider #mainslick .slick-dots {
  bottom: 20px;
}
.mainslider #mainslick .slick-dots li button::before {
  opacity: 0.7;
  color: white;
  font-size: 14px;
}
.mainslider #mainslick .slick-dots li.slick-active button::before {
  color: white;
  opacity: 1;
}
.mainslider #mainslick .slick-slide .img--holder {
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.mainslider:hover > .main-arrow {
  opacity: 1;
}
.mainslider .main-arrow {
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
}
.mainslider .main-arrow .arrow-prev, .mainslider .main-arrow .arrow-next {
  display: block;
  position: absolute;
  top: 50%;
  font-size: 16px;
  text-align: center;
  color: #111;
  z-index: 6;
}
.mainslider .main-arrow .arrow-prev:before, .mainslider .main-arrow .arrow-next:before {
  content: "";
  display: block;
  position: absolute;
  transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}
.mainslider .main-arrow .arrow-prev i, .mainslider .main-arrow .arrow-next i {
  position: relative;
  top: 20px;
}
.mainslider .main-arrow .arrow-prev {
  left: 0px;
}
.mainslider .main-arrow .arrow-prev:before {
  border-width: 60px 0 60px 66px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.7);
}
.mainslider .main-arrow .arrow-prev i {
  left: 20px;
}
.mainslider .main-arrow .arrow-next {
  right: 0px;
}
.mainslider .main-arrow .arrow-next:before {
  border-width: 60px 66px 60px 0;
  border-color: transparent rgba(255, 255, 255, 0.7) transparent transparent;
  left: auto;
  right: 0;
}
.mainslider .main-arrow .arrow-next i {
  right: 20px;
}
</style>
</head>
<body>
  <div class="mainslider">
	<div id="mainslick">
	    <div>
	    	<div class="img--holder" style="background-image: url(http://i.imgur.com/8vrs2bn.jpg);">
	    	</div>
	    </div>
	
	    <div>
	    	<div class="img--holder" style="background-image: url(http://i.imgur.com/krWjAvp.jpg);"></div>
	    </div>
	
	    <div>
	   		<div class="img--holder" style="background-image: url(http://i.imgur.com/qGkuzRg.jpg);"></div>
	    </div>
	</div>
	<div class="main-arrow">
		<div class="arrow-prev">
			<i class="fa fa-angle-left"></i>
		</div>
		<div class="arrow-next">
			<i class="fa fa-angle-right"></i>
		</div>
	</div>
</div>
  <script src='//code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
      <script>
$(window).load(function () {
  $('.slick-slide .img--holder').height($(window).height());
});
$(document).ready(function () {
  $('#mainslick').slick({
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: false,
    autoplaySpeed: 2000,
    arrows: true,
    lazyLoad: 'ondemand',
    // dots:true,
    // arrow
    prevArrow: $('.arrow-prev'),
    nextArrow: $('.arrow-next') });

  $(window).resize(function () {
    $('.slick-slide .img--holder').height($(window).height());
  });
});
    </script>
</body>
</html>

2. By Ibrahima Ndaw

Made by Ibrahima Ndaw. Simple JavaScript Fullscreen Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
      <script src="https://kit.fontawesome.com/66c63b4ed2.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  background: #444;
}

.slider {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100%;
}

.slider--content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
}

.slider--feature {
  text-align: center;
}

.slider--title {
  font-size: 2.5rem;
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
}

.slider--text {
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  margin: 0.5rem 0;
}

.slider__btn-right,
.slider__btn-left {
  background: transparent;
  border: none;
  outline: none;
  font-size: 4rem;
  color: #eee;
  padding: 0 1rem;
  cursor: pointer;
  transition: transform 0.1s ease-in-out;
}

.slider--btn {
  background: #fff;
  text-transform: uppercase;
  border: none;
  color: #444;
  border: 1px solid #444;
  outline: none;
  font-weight: 700;
  padding: 0.8rem 2rem;
  cursor: pointer;
}

.slider__btn-left:hover,
.slider__btn-right:hover {
  transform: scale(0.95);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 1s;
}
</style>
</head>
<body>
  <body>
    <main>
      <div class="slider">
        <div class="slider--content">
          <button class="slider__btn-left">
            <i class="fas fa-angle-left"></i>
          </button>
          <div class="slider--feature">
            <h1 class="slider--title">Tasty</h1>
            <p class="slider--text"></p>
            <button class="slider--btn">Get started</button>
          </div>
          <button class="slider__btn-right">
            <i class="fas fa-angle-right"></i>
          </button>
        </div>
      </div>
    </main>
      <script>
const slideContainer = document.querySelector('.slider');
const sliderText = document.querySelector('.slider--text');
const btnLeft = document.querySelector('.slider__btn-left');
const btnRight = document.querySelector('.slider__btn-right');

const sliderImages = [
{
  src: 'https://drive.google.com/uc?id=1BzhhKeOc9XyZMPXnZAi_JiOYdZrwLYu-',
  text: 'Taste the magic' },

{
  src: 'https://drive.google.com/uc?id=1M1TR1HjJCj-TuOa54jzty8QK9QUdNfSC',
  text: 'Taste the incredible' },

{
  src: 'https://drive.google.com/uc?id=1twyebwsDDBtPiyFHxTIf9P26sDGiq5Qi',
  text: 'Taste the dream' }];



let slideCounter = 0;

const startSlider = () => {
  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ), url(${sliderImages[0].src})`;
  sliderText.innerHTML = sliderImages[0].text;
};

btnRight.addEventListener('click', function () {
  if (slideCounter === sliderImages.length - 1) {
    slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ), url(${sliderImages[0].src})`;
    sliderText.innerHTML = sliderImages[0].text;
    slideCounter = -1;

    slideContainer.classList.add('fadeIn');
    setTimeout(() => {
      slideContainer.classList.remove('fadeIn');
    }, 1000);
  }
  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
      ),url(${sliderImages[slideCounter + 1].src})`;
  sliderText.innerHTML = sliderImages[slideCounter + 1].text;
  slideCounter++;
  slideContainer.classList.add('fadeIn');
  setTimeout(() => {
    slideContainer.classList.remove('fadeIn');
  }, 1000);
});

btnLeft.addEventListener('click', function () {
  if (slideCounter === 0) {
    slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ),url(${sliderImages[sliderImages.length - 1].src})`;
    sliderText.innerHTML = sliderImages[sliderImages.length - 1].text;
    slideCounter = sliderImages.length;
    slideContainer.classList.add('fadeIn');
    setTimeout(() => {
      slideContainer.classList.remove('fadeIn');
    }, 1000);
  }

  slideContainer.style.backgroundImage = `linear-gradient(
      to right,
      rgba(34, 34, 34, 0.4),
      rgba(68, 68, 68, 0.4)
    ),url(${sliderImages[slideCounter - 1].src})`;
  sliderText.innerHTML = sliderImages[slideCounter - 1].text;
  slideCounter--;
  slideContainer.classList.add('fadeIn');
  setTimeout(() => {
    slideContainer.classList.remove('fadeIn');
  }, 1000);
});
document.addEventListener('DOMContentLoaded', startSlider);
    </script>
</body>
</html>

3. By Yuri Baranov

Made by Yuri Baranov. Fullscreen slider with slideshow and progress bar. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
.slider {
  position: relative;
}

#slider {
  position: relative;
  overflow: hidden;
  width: 100% !important;
}
#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 99999px;
  overflow: hidden;
  list-style: none;
}
#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  text-align: center;
}
#slider ul li .slide {
  background-size: cover;
  height: 100vh;
}

button.control_prev, button.control_next {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: block;
  border: none;
  width: 2em;
  height: 2em;
  line-height: 1.9em;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 2rem;
  opacity: 0.8;
  cursor: pointer;
  border-radius: 50%;
  transform: translateY(-50%);
}
button.control_prev:focus, button.control_next:focus {
  outline: none;
  border: 1px rgba(255, 255, 255, 0.5) solid;
}
button.control_prev:hover, button.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

button.control_prev {
  left: 2rem;
}

button.control_next {
  right: 2rem;
}

.progress {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  height: 0.5rem;
  width: 100%;
  bottom: 0;
  border-top: 1px rgba(0, 0, 0, 0.15) solid;
}
.progress .bar {
  height: 100%;
  width: 0%;
  background: #fff;
}

.teaser {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
  color: #fff;
  transform: translateY(-50%);
}
.teaser h2 {
  font-size: 5em;
  text-transform: uppercase;
  line-height: 1.5em;
  color: #fff;
}
.teaser p {
  font-size: 1.3em;
  line-height: 1.3em;
  border-top: 2px #fff solid;
  width: 33%;
  min-width: 25rem;
  margin: 0rem auto;
  padding: 1.5rem 0;
}
.teaser h3 {
  border-bottom: 2px #fff solid;
  width: 33%;
  padding: 1.5rem 0;
  margin: 0rem auto;
  min-width: 25rem;
}
.teaser a {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
</style>
</head>
<body>
  <div class="slider" id="slider"  data-width="100">
	<button class="control_next">&rarr;</button>
 	 <button class="control_prev">&larr;</button>
		<ul>
			<li class="actslide">
				<div class="slide" style="background: #90cc82" >
					<div class="shadow">
						<div class="teaser">
						
							<h3>Fullscreen Slider</h3>
							<h2>Slide 1</h2>
							
							<p>Slide #1 of 3</p>
							
							
						</div> 
						
						
					</div>
				</div>
			</li>
			<li>
				<div class="slide" style="background: #02517a" >
					<div class="shadow">
							<div class="teaser">
						
							<h3>Fullscreen Slider</h3>
							<h2>Slide 2</h2>
							
							<p>Slide #2 of 3</p>
							
							
						</div> 
					</div>
				</div>
			</li>
			<li>
				<div class="slide" style="background: #c4af03" >
					<div class="shadow">
								<div class="teaser">
						
							<h3>Fullscreen Slider</h3>
							<h2>Slide 3</h2>
							
							<p>Slide #3 of 3</p>
							
							
						</div> 
					</div>
				</div>
			</li>
		</ul>
		<div class="progress">
			<div class="bar"></div>
		</div>

	</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
//Based on https://codepen.io/zuraizm/pen/vGDHl pen by zuraiz
jQuery(document).ready(function ($) {

  startSlider($('#slider'), 30); // Slide container ID, SlideShow interval 

  function startSlider(obj, timer) {

    var obj, timer;
    var id = "#" + obj.attr("id");
    var slideCount = obj.find('ul li').length;
    slideWidth = obj.attr("data-width");
    var sliderUlWidth = (slideCount + 1) * slideWidth;
    var time = 2;
    var $bar,

    isPause,
    tick,
    percentTime;
    isPause = false; //false for auto slideshow

    $bar = obj.find('.progress .bar');

    function startProgressbar() {
      resetProgressbar();
      percentTime = 0;
      tick = setInterval(interval, timer);
    }

    function interval() {
      if (isPause === false) {
        percentTime += 1 / (time + 0.1);
        $bar.css({
          width: percentTime + "%" });

        if (percentTime >= 100) {
          moveRight();
          startProgressbar();
        }
      }
    }

    function resetProgressbar() {
      $bar.css({
        width: 0 + '%' });

      clearTimeout(tick);
    }

    function startslide() {

      $(id + ' ul li:last-child').prependTo(id + ' ul');
      obj.find('ul').css({ width: sliderUlWidth + 'vw', marginLeft: -slideWidth + 'vw' });

      obj.find('ul li:last-child').appendTo(obj.attr('id') + ' ul');

    }

    if (slideCount > 1) {
      startslide();
      startProgressbar();
    } else
    {// hade navigation buttons for 1 slide only
      $(id + ' button.control_prev').hide();
      $(id + ' button.control_next').hide();
    }




    function moveLeft() {
      $(id + ' ul').css({ transition: "1s",
        transform: "translateX(" + slideWidth + "vw)" });


      setTimeout(function () {

        $(id + ' ul li:last-child').prependTo(id + ' ul');
        $(id + ' ul').css({ transition: "none",
          transform: "translateX(" + 0 + "vw)" });


        $('li.actslide').prev().addClass('actslide').next().removeClass('actslide');
      }, 1000);

    }

    function moveRight2() {// fix for only 2 slades
      $(id + ' ul li:first-child').appendTo(id + ' ul');


      $(id + ' ul').css({ transition: "none", transform: "translateX(100vw)" }).delay();

      setTimeout(function () {

        $(id + ' ul').css({ transition: "1s", transform: "translateX(0vw)" });


      }, 100, setTimeout(function () {


        $(id + ' ul').css({ transition: "none", transform: "translateX(0vw)" });
        $('li.actslide').next().addClass('actslide').prev().removeClass('actslide');

      }, 1000));




    }

    function moveRight() {
      if (slideCount > 2) {
        $(id + ' ul').css({ transition: "1s",
          transform: "translateX(" + -1 * slideWidth + "vw)" });


        setTimeout(function () {

          $(id + ' ul li:first-child').appendTo(id + ' ul');
          $(id + ' ul').css({ transition: "none",
            transform: "translateX(" + 0 + "vw)" });


          $('li.actslide').next().addClass('actslide').prev().removeClass('actslide');
        }, 1000);
      } else
      {
        moveRight2();
      }
    }

    $(id + ' button.control_prev').click(function () {
      moveLeft();
      startProgressbar();
    });

    $(id + ' button.control_next').click(function () {

      moveRight();

      startProgressbar();
    });

    $(id + ' .progress').click(function () {
      if (isPause === false) {
        isPause = true;
      } else
      {
        isPause = false;
      }
    });
  };
});
    </script>
</body>
</html>

4. By Craig Roblewsky

Made by Craig Roblewsky. Full Screen slider with nav dots. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,700&amp;#39;'>
  
<style>
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: white;
  overflow: hidden;
}

#panelWrap {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
}

section {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 4em;
  font-weight: 700;
  position: relative;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  position: relative;
  background-color: #fff;
  margin: 12px;
  cursor: pointer;

}

.dots {
  position: absolute;
  z-index: 100;
  top: 50%;
  right: 12px;

}

h1 {
  position: absolute;
  z-index: 100;
  font-size: 18px;
  text-align: center;
  width: 100%;

}

span {
  display: block;
  font-size: 0.75em;
  font-weight: 400;
}
</style>
</head>
<body>
  <h1>Fullscreen slider with the ScrollTo Plugin<span>mousewheel and nav dot control</span></h1>
<div id="panelWrap">
  <section>Panel 1</section>
  <section>Panel 2</section>
  <section>Panel 3</section>
  <section>Panel 4</section>
  <section>Panel 5</section>
  <section>Panel 6</section>  
</div>

<div class="dots"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/ScrollToPlugin.min.js'></script>
      <script>
console.clear();
var colorArray = ["#46a4cc", "#94c356", "#a63ba0", "#cf5b21"];
var slides = document.querySelectorAll("section");
var container = document.querySelector("#panelWrap");
var dots = document.querySelector(".dots");
var oldSlide = 0;
var activeSlide = 0;
var navDots = [];
var dur = 0.5;

for (let i = 0; i < slides.length; i++) {if (window.CP.shouldStopExecution(0)) break;
  TweenMax.set(slides[i], { backgroundColor: colorArray[i % 4] });
  var newDot = document.createElement("div");
  newDot.className = "dot";
  newDot.index = i;
  navDots.push(newDot);
  newDot.addEventListener("click", slideAnim);
  dots.appendChild(newDot);
}window.CP.exitedLoop(0);

TweenMax.set(".dots", { yPercent: -50 });
TweenMax.set(navDots[0], { backgroundColor: "#000" });


function slideAnim(e) {
  if (TweenMax.isTweening(container)) {return;}

  oldSlide = activeSlide;
  if (this.className === "dot") {
    activeSlide = this.index;
  } else {
    activeSlide = e.deltaY > 0 ? activeSlide += 1 : activeSlide -= 1;
    activeSlide = activeSlide < 0 ? 0 : activeSlide;
    activeSlide = activeSlide > slides.length - 1 ? slides.length - 1 : activeSlide;
  }
  if (oldSlide === activeSlide) {
    return;
  }
  TweenMax.to("#panelWrap", dur, { scrollTo: slides[activeSlide] });
  TweenMax.to(navDots[activeSlide], dur, { backgroundColor: "#000", ease: Linear.easeNone });
  TweenMax.to(navDots[oldSlide], dur, { backgroundColor: "#fff", ease: Linear.easeNone });
}

window.addEventListener("wheel", slideAnim);
window.addEventListener("resize", newSize);

function newSize() {
  TweenMax.set(container, { scrollTo: slides[activeSlide] });
}
    </script>
</body>
</html>

5. By Jakub HonΓ­Ε‘ek

Made by Jakub HonΓ­Ε‘ek. JavaScript Responsive Fullscreen Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans");
html,
body {
  height: 100%;
  margin: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  font-family: "Josefin Sans", sans-serif;
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3em;
  color: #ffffff;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.nav:hover {
  opacity: 1;
}

.nav--next {
  right: 0.5em;
}

.nav--previous {
  display: none;
  left: 0.5em;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 1s ease-in-out;
  background-size: cover;
  background-position: center center;
}

.slide--desc {
  font-size: 1em;
  color: #ffffff;
  text-shadow: 0 0 0.25em black;
  margin: 1em;
}

.slide--one {
  background-image: url("https://static.pexels.com/photos/443356/pexels-photo-443356.jpeg");
}

.slide--two {
  background-image: url("https://static.pexels.com/photos/235648/pexels-photo-235648.jpeg");
}

.slide--three {
  background-image: url("https://static.pexels.com/photos/266645/pexels-photo-266645.jpeg");
}

.slide--four {
  background-image: url("https://static.pexels.com/photos/418831/pexels-photo-418831.jpeg");
}
</style>
</head>
<body>
  <div class="slide slide--one">
 <div class="slide--desc">
		Photography #1
	</div>
</div>
<div class="slide slide--two">
 <div class="slide--desc">
		Photography #2
	</div>
</div>
<div class="slide slide--three">
 <div class="slide--desc">
		Photography #3
	</div>
</div>
<div class="slide slide--four">
 <div class="slide--desc">
		Photography #4
	</div>
</div>
<span class="nav nav--previous fa fa-chevron-left" id="previous"></span>
<span class="nav nav--next fa fa-chevron-right" id="next"></span>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
var elementCount = 0;
var firstPos = 0;
var lastPos = 0;

$(function () {
  initialiseSlider();
  $("#next").click(function () {
    slideRight();
  });
  $("#previous").click(function () {
    slideLeft();
  });
});

function initialiseSlider() {
  $(".slide").each(function (value) {
    elementCount += 1;
    var position = -100 * value;
    $(this).css("left", position + "%");
  });
  if (elementCount === 1)
  $("#next").hide();
}

function slideRight() {
  $(".slide").each(function (value) {
    var position = parseInt($(this)[0].style.left) + 100;
    if (value === 0) {
      firstPos = position;
    }
    $(this).css("left", position + "%");
  });
  if (firstPos !== (elementCount - 1) * 100) {
    $("#next").show();
    $("#previous").show();
  } else
  $("#next").hide();
}

function slideLeft() {
  $(".slide").each(function (value) {
    var position = parseInt($(this)[0].style.left) - 100;
    if (value === elementCount - 1) {
      lastPos = position;
    }
    $(this).css("left", position + "%");
  });
  if (lastPos !== (elementCount - 1) * -100) {
    $("#previous").show();
    $("#next").show();
  } else
  $("#previous").hide();
}
    </script>
</body>
</html>

6. By darkylmnx

Made by darkylmnx. Automated Fullscreen Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  line-height: 1.5;
  font-family: arial, helvetica, sans-serif;
}

.app-slider {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.app-slider_wrap {
  height: 100%;
  transition: all 1s ease-out;
}

.app-slider article {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

.app-slider h2 {
  position: absolute;
  left: 50px;
  bottom: 50px;
  text-transform: uppercase;
  font-size: 72px;
}

.app-slider img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
</style>
</head>
<body>
  <nav class="app-nav">
  <a href="#">link 1</a>
  <a href="#">link 2</a>
  <a href="#">link 3</a>
</nav>

<section class="app-slider">
  <div class="app-slider_wrap">
    <article>
      <h2>title 1</h2>
      <img src="https://images.unsplash.com/photo-1503602642458-232111445657?w=1868&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
    </article>
    <article>
      <h2>title 2</h2>
      <img src="https://images.unsplash.com/photo-1464564531096-f0163633a18a?w=2012&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
    </article>
    <article>
      <h2>title 3</h2>
      <img src="https://images.unsplash.com/photo-1493663284031-b7e3aefcae8e?w=1950&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
    </article>
    <article>
      <h2>title 4</h2>
      <img src="https://images.unsplash.com/photo-1422480041422-130238c67fe2?w=1950&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D" alt="">
    </article>
  </div>
</section>
      <script>
var slider_wrap = select('.app-slider_wrap');
var slides = slider_wrap.children;
var current = 0;

slider_wrap.style.width = 100 * slides.length + '%';

resize();
window.addEventListener('resize', resize);

setInterval(slide, 4000);

function resize() {
  for (var i = 0; i < slides.length; i++) {
    slides[i].style.width = slider_wrap.parentElement.offsetWidth + 'px';
  }
}

function slide() {
  current = current >= slides.length - 1 ? 0 : current + 1;
  slider_wrap.style.marginLeft = -100 * current + '%';
}

function select(s) {
  return document.querySelector(s);
}
    </script>
</body>
</html>

7. By Liuba Kuibida

Made by Liuba Kuibida. JavaScript Fullscreen slider with custom pagination. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500');

body {
	margin: 0;
	padding: 0;
	font-family: 'Dosis', sans-serif;
}

.swiper-slide:nth-child(1) {
	background: url('https://images.unsplash.com/photo-1518409274682-1cb2fe2955a8?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b6ce2d94a6218709710dd8f604c62425&auto=format&fit=crop&w=1936&q=80') no-repeat 50% 50%;
}

.swiper-slide:nth-child(2) {
	background: url('https://images.unsplash.com/photo-1512567100135-223e140cd167?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8da2d287529b3ca7bd2dd0c9ba462db0&auto=format&fit=crop&w=1950&q=80') no-repeat 50% 50%;
}
	
.swiper-slide:nth-child(3) {
	background: url('https://images.unsplash.com/photo-1516684402831-c151c11c6023?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=dddb709cd4491c9772628474844f4c54&auto=format&fit=crop&w=1267&q=80') no-repeat 50% 50%;
}

.swiper-slide:nth-child(4) {
	background: url('https://images.unsplash.com/photo-1502977384522-6cfce7817b3d?ixlib=rb-0.3.5&s=d8b3fee58ae0c1e60cf0415ca597a43b&auto=format&fit=crop&w=1350&q=80') no-repeat 50% 50%;
}

.swiper-slide:nth-child(5) {
	background: url('https://images.unsplash.com/photo-1447154705288-7175737fb73c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3e295fa62a141b15470abc8a51ca838e&auto=format&fit=crop&w=1952&q=80') no-repeat 50% 80%;
}

.swiper-container .swiper-slide {
	height: 90vh;
	background-size: cover;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom: 0;
}

.elements {
	position: fixed;
	bottom: 0;
	display: flex;
	height: 10vh;
	z-index: 100;
}

.elements .swiper-pagination-bullet {
	width: 100%;
	height: 100%;
	border-radius: 0;
	text-align: center;
	line-height: 10vh;
	vertical-align: middle;
	opacity: 1;
	background: whitesmoke;
	box-shadow:2px 2px 2px rgba(0,0,0,0.5);
	font-size: 2em;
}

.elements .swiper-pagination-bullet-active {
	opacity: 1;
	background: springgreen;
	transition: background 3s ease;
}

@media only screen and (max-width: 480px) {
	.elements .swiper-pagination-bullet {
		font-size: 1.4em;;
	}
}
</style>
</head>
<body>
  <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
	 	<div class="swiper-slide"></div>
    </div>
    <!-- If we need pagination -->
    <div class="elements"></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  var keys = ['Air', 'Earth', 'Water', 'Fire', 'Love'];

  var mySwiper = new Swiper('.swiper-container', {
    effect: 'fade',
    speed: 3000,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false },

    pagination: {
      el: '.elements',
      clickable: true,
      renderBullet: function (index, className) {
        return '<div class="' + className + '">' + keys[index] +
        '</div>';
      } } });
});
    </script>
</body>
</html>

8. By Joseph

Made by Joseph. Simple responsive Fullscreen slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'>
<style>
body::-webkit-scrollbar { display: none; }

#slide-window
  {
  position:fixed;
  width:100%;
  height:100%;
  overflow:hidden;
  top:0px;
  left:0px;
  }

#slides
  {
  height:100%;  
  position:absolute;
  margin:0px;
  padding:0px;
  
  -webkit-transform: translate3d(0px,0px,0px);
  transform: translate3d(0px,0px,0px);
    
  transition: all 0.66s ease; -webkit-transition: all 0.66s ease; 
  
  }

.slide 
  {
  list-style:none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 100%;
  background: #ccc;
  text-align: center;
  line-height: 300px; 
  background-size: cover; 
  background-position:50% 50%;
  color:#fff;
  -webkit-transform: translate3d(0px,0px,0px);
  visibility:hidden;
  -webkit-transform-style: preserve-3d;
  }

.alive { visibility:visible; }

.nav 
  { 
  position:fixed; 
  z-index:9; 
  top:50%; 
  cursor:pointer; 
  color:#fff; 
  opacity:0.7; 
  transition: all 0.66s ease; -webkit-transition: all 0.66s ease; 
  }

.nav:hover { opacity:1.0; }
#left { left:3%; }
#right { right:3%; }


#credit 
  { 
  position:fixed; 
  top:25px; 
  left:25px; 
  color:#eaeaea; 
  font-family: 'Courier New', Courier, monospace;  
  }
</style>
</head>
<body>
  <div id="slide-window">
  
    <ol id="slides" start="1">
    
      <li class="slide color-0 alive" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-JSxf5Nm/0/X3/Burning-Man-Day-6%20%28202%20of%201606%29-X3.jpg);"></li>
      
      <li class="slide color-1" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KMjVHRd/0/X3/Andramada-X3.jpg);"></li>
      
      <li class="slide color-2" style="background-image:url(http://stuckincustoms.smugmug.com/Burning-Man/i-dd9xmfn/0/X3/The%20Steamy%20Car-X3.jpg);"></li>
      
      <li class="slide color-3" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-KscS8CF/0/X3/Burning-Man-Day-1%20%281006%20of%201210%29-X3.jpg);"></li>
      
      <li class="slide color-4" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-jQcPqJb/0/X3/Burning-Man-Last-Day-Night%20%28151%20of%201120%29-X3.jpg);"></li>
    
    </ol>
 
    <span class="nav fa fa-chevron-left fa-3x" id="left"></span>
    <span class="nav fa fa-chevron-right fa-3x" id="right"></span>
    
    <div id="credit">Photography by Trey Ratcliff<br>Slide No.<span id="count">1</span><br><span id="zoom">zoom</span></div>
    
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$.global = new Object();

$.global.item = 1;
$.global.total = 0;

$(document).ready(function ()
{

  var WindowWidth = $(window).width();
  var SlideCount = $('#slides li').length;
  var SlidesWidth = SlideCount * WindowWidth;

  $.global.item = 0;
  $.global.total = SlideCount;

  $('.slide').css('width', WindowWidth + 'px');
  $('#slides').css('width', SlidesWidth + 'px');

  $("#slides li:nth-child(1)").addClass('alive');

  $('#left').click(function () {Slide('back');});
  $('#right').click(function () {Slide('forward');});

});

function Slide(direction)
{

  if (direction == 'back') {var $target = $.global.item - 1;}
  if (direction == 'forward') {var $target = $.global.item + 1;}

  if ($target == -1) {DoIt($.global.total - 1);} else
  if ($target == $.global.total) {DoIt(0);} else
  {DoIt($target);}


}

function DoIt(target)
{

  var $windowwidth = $(window).width();
  var $margin = $windowwidth * target;
  var $actualtarget = target + 1;

  $("#slides li:nth-child(" + $actualtarget + ")").addClass('alive');

  $('#slides').css('transform', 'translate3d(-' + $margin + 'px,0px,0px)');

  $.global.item = target;

  $('#count').html($.global.item + 1);

}
    </script>
</body>
</html>