DEV Community

Ibrahima Ndaw
Ibrahima Ndaw

Posted on • Updated on • Originally published at ibrahima-ndaw.com

Fullscreen slider with HTML, CSS and JavaScript

Originally posted on my blog


In this post, we will build a Fullscreen slider using HTML, CSS, and JavaScript.

You can check it live here

HTML

As you can see, we start by wrapping everything in the main tag.

    <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>
Enter fullscreen mode Exit fullscreen mode

Then, hold the slider elements in the .slider class. We will also need two buttons to be able to go to the next or previous slide. The .slider--feature will hold the title and the description of the slide elements.

By the way, I use Font Awesome for the icons, so you will need to create an account here then add the link to the head tag.

CSS

As usual, we start the CSS by doing some resets.

@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;
}
Enter fullscreen mode Exit fullscreen mode

Then, change the background, the font family and import the font Open Sans from google fonts.

.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;
}
Enter fullscreen mode Exit fullscreen mode

Afterwards, we use the .slider class to make the slide element using the full width and height of the viewport and prepare it to receive the image later as the background with the help of javaScript.

Then, set display:flex and justify-content:space-between to the .slider--content class to distribute equitably elements following the available space.

.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);
}
Enter fullscreen mode Exit fullscreen mode

As you can see, this code block is used to style buttons. The .slider__btn-right and .slider__btn-left classes help us style the left and right button of the slide. We also use transition: transform 0.1s ease-in-out to make a little scale effect on hover with transform: scale(0.95). And the .slider--btn class is applied to the call to action button to have a nice style.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation: fadeIn 1s;
}
Enter fullscreen mode Exit fullscreen mode

Here, we use @keyframes to apply a fade in animation to the slide element. And the .fadeIn class will be added to the slide dynamically when a change occurs.

JavaScript

As usual, we start the JavaScript part by selecting the needed elements.

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;
Enter fullscreen mode Exit fullscreen mode

Then, we create an array of images that will be used as a background image for the slide. And also, declare the variable slideCounter to be able to count the number of slides.

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;
};
Enter fullscreen mode Exit fullscreen mode

The startSlider() function will set the first image of sliderImages array as background to the slide. I also style the background with linear-gradient() to darken the image a little bit, and finally append the adequate text to the slide element.

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);
});
Enter fullscreen mode Exit fullscreen mode

Here, we listen to a click event on the right button on the slide. Then, we check if the counter (slideCounter) is equal to the last slide. If it's the case, restart the slide with the first image and text of the array. Then, add the fadeIn class to animate the slide on entrance.

Afterwards, if the counter (slideCounter) is not equal to the last slide, we can set the next slide with the appropriate data and increment the slideCounter variable and finally remove the animation after 1 second to be able to animate it again.

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);
});

startSlider();
Enter fullscreen mode Exit fullscreen mode

As you can see here, we use the same process to change the slide with the left button except for the fact that we check if the counter is equal to zero. And if it's the case, go to the last slide. Then, if not, go the previous slide and decrement the counter variable.

And finally, start the slider with the startSlider() function.

You can check it live here

fullscreen-slider

Top comments (5)

Collapse
 
juancarlospaco profile image
Juan Carlos

You should check Spectre CSS, tiny 9kb CSS that makes this stuff, without JS.

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Thanks Juan for your suggestion, i will give it a try. But it's always good to practice these kind of things without framework or third library.

Collapse
 
likhitreddy5 profile image
Likhit Reddy

Or we can take some time and make it ourselves with css. That should be fun

Collapse
 
hedgehog34 profile image
Robert Jeżyk

Thanks Ibrahima,

Good stuff

FYI Codepen example is not loading images

Collapse
 
ibrahima92 profile image
Ibrahima Ndaw

Images are fetched from my google drive, and they are high quality that's why they take time to load. So, you can change them with yours if you want. And thanks again for your comment.