5+ CSS Fullscreen Slider Examples

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

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

Related Posts

CSS Fullscreen Slider Examples

1. By OanaGurzau

Made by OanaGurzau. Full Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body, #slider, .wrap, .slide-content{
    margin: 0;
    padding: 0;
    font-family: "Arial", "Helvetica", "sans-serif";
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
}

.wrap{
    position: relative;
}

.slide{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide1{
    background-image: url('https://picsum.photos/1920/1000')
}

.slide2{
    background-image: url('https://picsum.photos/1919/1000')
}

.slide3{
    background-image: url('https://picsum.photos/1918/1000')
}

.slide-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

}

.slide-content span{
    font-size: 5rem;
    color: #fff;
}

.arrow{
    cursor: pointer;
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 0;
    height: 0;
    border-style: solid;

}

#arrow-left{
    border-width: 30px 40px 30px 0;
    border-color: transparent #fff transparent transparent;
    left: 0;
    margin-left: 30px;
}

#arrow-right{
    border-width: 30px 0 30px 40px;
    border-color: transparent transparent transparent #fff;
    right: 0;
    margin-right: 30px;
}
</style>
</head>
<body>
    <div class="wrap">
        <div id="arrow-left" class="arrow"></div>
        <div id="slider">
            <div class="slide slide1">
                <div class="slide-content">
                    <span>Image 1</span>
                </div>
            </div>
            <div class="slide slide2">
                <div class="slide-content">
                    <span>Image 2</span>
                </div>
            </div>
            <div class="slide slide3">
                <div class="slide-content">
                    <span>Image 3</span>
                </div>
            </div>

        </div>
        <div id="arrow-right" class="arrow"></div>
    </div>
    <script>
        let sliderImages = document.querySelectorAll('.slide'),
            arrowLeft = document.querySelector('#arrow-left'),
            arrowRight = document.querySelector('#arrow-right'),
            current = 0;

            //clear all imgs

        function reset(){
            for(let i = 0; i < sliderImages.length; i++){
                sliderImages[i].style.display = 'none';
            }
        }

        function startSlide(){
            reset();
            sliderImages[0].style.display = 'block';
        }


        //show prev
    function slideLeft(){
        reset();
        sliderImages[current - 1].style.display = 'block';
        current--;
    }

    // show next
    function slideRight(){
        reset();
        sliderImages[current + 1].style.display = 'block';
        current++;
    }

    //left arrow click
    arrowLeft.addEventListener('click', function(){
        if(current === 0){
            current = sliderImages.length;
        }
        slideLeft();
    });


    //Right arrow click
    arrowRight.addEventListener('click', function(){
        if(current === sliderImages.length - 1){
            current = -1;
        }
        slideRight();
    });
        startSlide();
    </script>
</body>
</html>
 

2. By Lorenzo

Made by Lorenzo. Simple CSS Fullscreen Slider with Pagination. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
/*inspired by a threehouse workshop*/

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: grey;
  color: white;
  text-align: center;
}

.slider-head {
  background: #123456;
  box-shadow: 0 .5em 1em #111;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
}

.slider-head > label {
  color: #ababab;
  cursor: pointer;
  display: inline-block;
  line-height: 4em
  font-size: .665em;
  font-weight: bold;
  padding: .5em 1.5em;
}

.slider-head > label:hover {
  background: #012345;
  color: white;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 10;
  padding: 8em 1em 0;
  background-color: #120103;
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  transition: left 0s .75s;
}

.slide-one {
  background-image: url('http://www.socwall.com/images/wallpapers/42229-2560x1440.jpg');
}

.slide-two {
  background-image: url('http://www.sfondissimo.com/wp-content/gallery/sfondi-hd/0016.jpg');
}

.slide-three {
  background-image: url('http://lh6.googleusercontent.com/-p5ieP8W5l4Y/U0GTj_xhByI/AAAAAAAAJxI/cFohm8r-tWs/s2400/sfondo-wallpaper-natura-paesaggi-1366-768-%20%28116%29.jpg');
}
[id^="slide"]:checked + .slide {
  left: 0;
  z-index: 100;
  transition: left .65s ease-out;
}

.slide h1 {
  opacity: 0;
  transform: translateY(100);
  transition: transform .5s .5s, opacity .5s;
}

[id^="slide"]:checked + .slide h1 {
  opacity: 1;
  transition: translateY(0);
  transition: all .5s .5s;
}
/*css base*/


html {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 16px; 
  font-weight: normal;
  line-height: 1.4;
}

*,
*:before,
*:after  { box-sizing: inherit; }


h1 { 
  color: #fff;
  font-size: 2em;
  font-size: 6vw;
  line-height: 1.2;
  margin: 0.5em 0 3em;
  text-shadow: 1px 1px 1px #333;
}

@media (min-width: 1075px) {
  h1 { font-size: 4em; }
}
</style>
</head>
  <body>
<div class="wrap">
  <header class="slider-head">
    <label for="slide-1-trigger">Slide One</label>
    <label for="slide-2-trigger">Slide Two</label>
    <label for="slide-3-trigger">Slide Three</label>
  </header>
  <input id="slide-1-trigger" type="radio" name="slides" checked>
  <section class="slide slide-one">
    <h1>Put here some nice text</h1>
  </section>
  <input id="slide-2-trigger" type="radio" name="slides">
  <section class="slide slide-two">
    <h1>Put here some better text</h1>
  </section>
  <input id="slide-3-trigger" type="radio" name="slides">
  <section class="slide slide-three">
    <h1>Put here some fancy text</h1>
  </section>
  
</div>
</body>
</html>

3. By Marco Peretto

Made by Marco Peretto. Fullscreen carousel Slider. Source

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

body {
  font-family: sans-serif;
}

.hide-scrollbars {
  -webkit-overflow-scrolling: touch !important;
  -ms-overflow-style: none !important;
  /* IE and Edge */
  scrollbar-width: none !important;
}
.hide-scrollbars::-webkit-scrollbar {
  display: none !important;
}

.slider-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
}
.slider-container .slide {
  position: relative;
  min-width: 100vw;
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-container .slide .slide__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider-container .slide:nth-child(0) {
  background: rgba(109, 110, 242, 0.8);
}
.slider-container .slide:nth-child(1) {
  background: rgba(74, 53, 145, 0.8);
}
.slider-container .slide:nth-child(2) {
  background: rgba(128, 227, 9, 0.8);
}
.slider-container .slide h2 {
  font-size: 10vw;
  background: #fff;
  width: max-content;
  height: max-content;
  padding: 10px 20px;
  color: #1c2833;
  z-index: 2;
}
</style>
</head>
<body>
  <div id="my-slider" class="slider-container">
  <section class="slide">
    <h2>Slide 1</h2>
    <img src="https://images.unsplash.com/photo-1624298574806-019c81c19244?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60" alt="" class="slide__image">
  </section>
  <section class="slide">
    <h2>Slide 2</h2>
    <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=840&q=80" alt="" class="slide__image">
  </section>
  <section class="slide">
    <h2>Slide 3</h2>
    <img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="" class="slide__image">
  </section>
</div>
      <script>
/*
  Add scrollbars on no touch devices
*/
function is_touch_enabled() {
  return (
    "ontouchstart" in window ||
    navigator.maxTouchPoints > 0 ||
    navigator.msMaxTouchPoints > 0);

}

if (is_touch_enabled()) {
  const slider = document.querySelector("#my-slider");

  slider.classList.add("hide-scrollbars");
}
    </script>
</body>
</html>
 

4. By David

Made by David. CSS Fullscreen Slider with Pagination Button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="com/css/css.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<style>
body {
  overflow: hidden;
  width: 50%;
  height: 50%;
  padding: 0;
  margin: 0;
}
/* Slider wrapper*/
.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/* Slider */
.slider {
  width: 100%;
  height: 100%;
  background: red;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* each slide backgound color */  
.slide1 {
  background: #00bcd7;
  left: 0;
}
.slide2 {
  background: #009788;
  left: 100%
}
.slide3 {
  background: #ff5608;
  left: 200%
}
.slide4 {
  background: #607d8d;
  left: 300%;
}
.slider > div {
  text-align: center;
}
/* Slider inner slide effect */
.slider h2 {
  color: #FFF;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 45px;
  line-height: 120%;
  opacity: 0;
  -webkit-transform: translateX(500px);
  transform: translateX(500px);
}
.slider .button {
  color: #FFF;
  padding: 5px 30px;
  background: rgba(255,255,255,0.3);
  text-decoration: none;
  opacity: 0;
  font-size: 15px;
  line-height: 30px;
  display: inline-block;
  -webkit-transform: translateX(-500px);
  transform: translateX(-500px);
}
.slider h2, .slider .button {
  -webkit-transition: opacity 800ms, -webkit-transform 800ms;
  transition: transform 800ms, opacity 800ms;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}
/* Next and Preive arrow */ 
.control {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  z-index: 55;
}
.control label {
  z-index: 0;
  display: none;
  text-align: center;
  line-height: 50px;
  font-size: 50px;
  color: #FFF;
  cursor: pointer;
  opacity: 0.2;
}
.control label:hover {
  opacity: 0.5;
}
.next {
  right: 1%;
}
.previous {
  left: 1%;
}
/* Slider Pagger */ 
.slider-pagination {
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 1000;
}
.slider-pagination label {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: rgba(255,255,255,0.2);
  margin: 0 2px;
  border: solid 1px rgba(255,255,255,0.4);
  cursor: pointer;
}
/* Slider Pagger arrow event */
.slide-radio1:checked ~ .next .numb2, 
.slide-radio2:checked ~ .next .numb3, 
.slide-radio3:checked ~ .next .numb4, 
.slide-radio2:checked ~ .previous .numb1, 
.slide-radio3:checked ~ .previous .numb2, 
.slide-radio4:checked ~ .previous .numb3 {
  display: block;
  z-index: 1
}
/* Slider Pagger event */
.slide-radio1:checked ~ .slider-pagination .page1, 
.slide-radio2:checked ~ .slider-pagination .page2, 
.slide-radio3:checked ~ .slider-pagination .page3, 
.slide-radio4:checked ~ .slider-pagination .page4 {
  background: rgba(255,255,255,1)
}
/* Slider slide effect */
.slide-radio1:checked ~ .slider {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
  -webkit-transform: translateX(-200%);
  transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
  -webkit-transform: translateX(-300%);
  transform: translateX(-300%);
}
.slide-radio1:checked ~ .slide1 h2,  
.slide-radio2:checked ~ .slide2 h2,  
.slide-radio3:checked ~ .slide3 h2,  
.slide-radio4:checked ~ .slide4 h2,  
.slide-radio1:checked ~ .slide1 .button,  
.slide-radio2:checked ~ .slide2 .button,  
.slide-radio3:checked ~ .slide3 .button,  
.slide-radio4:checked ~ .slide4 .button {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

@media only screen and (max-width: 767px) {
.slider h2 {
  font-size: 20px;
}
.slider > div {
  padding: 0 2%
}
.control label {
  font-size: 35px;
}
.slider .button {
  padding: 0 15px;
}
}
</style>
</head>
<body>
<div class="css-slider-wrapper">
  <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
  <input type="radio" name="slider" class="slide-radio2" id="slider_2">
  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <input type="radio" name="slider" class="slide-radio4" id="slider_4">
  <div class="slider-pagination">
    <label for="slider_1" class="page1"></label>
    <label for="slider_2" class="page2"></label>
    <label for="slider_3" class="page3"></label>
    <label for="slider_4" class="page4"></label>
  </div>
  <div class="next control">
    <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-right"></i></label>
    <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-right"></i></label>
  </div>
  <div class="previous control">
    <label for="slider_1" class="numb1"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_2" class="numb2"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_3" class="numb3"><i class="fa fa-arrow-circle-left"></i></label>
    <label for="slider_4" class="numb4"><i class="fa fa-arrow-circle-left"></i></label>
  </div>
  <div class="slider slide1">
    <div>
      <h2>Css Based slider</h2>
      <a href="http://www.htmllion.com/pure-css-based-fullscreen-slider.html" class="button">Back</a>  <a href="#" class="button">Download</a> </div>
  </div>
  <div class="slider slide2">
    <div>
      <h2>CSS Slider</h2>
      <a href="http://www.htmllion.com/pure-css-based-fullscreen-slider.html" class="button">Back</a> <a href="#" class="button">Download</a> </div>
  </div>
  <div class="slider slide3">
    <div>
      <h2>Full screen animation slider</h2>
      <a href="http://www.htmllion.com/pure-css-based-fullscreen-slider.html" class="button">Back</a> <a href="#" class="button">Download</a> </div>
  </div>
  <div class="slider slide4">
    <div>
      <h2>css3 slider</h2>
      <a href="http://www.htmllion.com/pure-css-based-fullscreen-slider.html" class="button">Back</a> <a href="#" class="button">Download</a> </div>
  </div>
</div>
</body>
</html>

5. By Marcello Hutchinson-Trujillo

Made by Marcello Hutchinson-Trujillo. Basic Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body,
#slider,
.wrap,
.slide-content {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
}

.wrap {
  position: relative;
}

.slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.slide1 {
  background-image: url("https://c2.staticflickr.com/2/1827/28571264287_1b9848c867_b.jpg");
}
.slide2 {
  background-image: url("https://static.pexels.com/photos/302892/pexels-photo-302892.jpeg");
}
.slide3 {
  background-image: url("https://c2.staticflickr.com/2/1773/43356485364_39b4ee9613_b.jpg");
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide-content span {
  font-size: 20px;
  color: #fff;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 55%;
  margin-top: -35px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left {
  border-width: 15px 20px 15px 0;
  border-color: transparent #fff transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right {
  border-width: 15px 0 15px 20px;
  border-color: transparent transparent transparent #fff;
  right: 0;
  margin-right: 30px;
}
</style>
</head>
<body>
  <div class="wrap">
  <div id="arrow-left" class="arrow"></div>
  <div id="slider">
    <div class="slide slide1">
      <div class="slide-content">
        <span>Image One</span>
      </div>
    </div>
    <div class="slide slide2">
      <div class="slide-content">
        <span>Image Two</span>
      </div>
    </div>
    <div class="slide slide3">
      <div class="slide-content">
        <span>Image Three</span>
      </div>
    </div>
  </div>
  <div id="arrow-right" class="arrow"></div>
</div>
<script>
  let sliderImages = document.querySelectorAll(".slide"),
  arrowLeft = document.querySelector("#arrow-left"),
  arrowRight = document.querySelector("#arrow-right"),
  current = 0;

// Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = "none";
  }
}

// Init slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

// Show prev
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

// Show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

// Left arrow click
arrowLeft.addEventListener("click", function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

// Right arrow click
arrowRight.addEventListener("click", function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();
</script>
</body>
</html>

6. By Desain

Made by Desain. Bootstrap Fullscreen Slider. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
.carousel-fade .carousel-inner .item {
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next .prev .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
  top: 35vh;
  font-size: 100px;
}
.carousel-fade .carousel-control.left {
  background: transparent;
}
.carousel-fade .carousel-control.right {
  background: transparent;
}
html,
body,
.carousel,
.carousel-inner,
.carousel-inner .item {
  height: 100%;
}
.item:nth-child(1) {
  background: #74C390 url(http://www.pes-patch.com/wp-content/uploads/2016/12/Timnas.jpg) no-repeat;
  background-size: cover;
}
.item:nth-child(2) {
  background: #51BCE8 url(http://sumberbola.nikff6y.netdna-cdn.com/wp-content/uploads/2016/07/wallpapers-timnas-indonesia-u19-1.jpg) no-repeat;
  background-size: cover;
}
.item:nth-child(3) {
  background: #E46653 url(https://4.bp.blogspot.com/-gjShmJNXRXQ/Uj8aY2kcPrI/AAAAAAAABPQ/-2Ttj4-alsQ/s1600/walpaper+timnas.jpg) no-repeat;
  background-size: cover;
}
</style>
</head>
<body>
  <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#carousel" data-slide="prev"><i class="fa fa-angle-left" aria-hidden="true"></i></a>
    <a class="carousel-control right" href="#carousel" data-slide="next"><i class="fa fa-angle-right" aria-hidden="true"></i></a>
</div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js'></script>
      <script>
$('.carousel').carousel();
//# sourceURL=pen.js
    </script>
</body>
</html>