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
CSS
JavaScript

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>

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

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

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

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

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;

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

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

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

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

TWITTER	BLOG	NEWSLETTER	GITHUB	LINKEDIN	CODEPEN	DEV

Blog

Fullscreen slider with HTML, CSS and JavaScript

Ibrahima Ndaw

HTML

CSS

JavaScript

Join Our Newsletter. No Spam, Only the good stuff.

Related