Fullscreen slider with HTML, CSS and JavaScript
Tags: codenewbie, webdev, javascript, css
Published: 2019-11-21 15:38:47

Originally posted on [my blog](https://www.ibrahima-ndaw.com/blog/fullscreen-slider/) <hr>

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

You can check it live [here](https://codepen.io/ibrahima92/full/ExxZVBN)

- [HTML](#html)
- [CSS](#css)
- [JavaScript](#javascript)

## HTML
As you can see, we start by wrapping everything in the main tag.
```html
    <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.<br>
By the way, I use Font Awesome for the icons, so you will need to create an account [here](https://fontawesome.com/) then add the link to the head tag. 

## CSS
As usual, we start the CSS by doing some resets.
```css
@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.

```css
.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.<br>
Then, set `display:flex` and `justify-content:space-between` to the `.slider--content` class to distribute equitably elements following the available space. 

```css
.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.
```css
@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.
```javascript
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.
```javascript
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.
```javascript
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.<br>
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.
```javascript
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.<br>
And finally, start the slider with the `startSlider()` function. <br>

You can check it live [here](https://codepen.io/ibrahima92/full/ExxZVBN) <br>

![fullscreen-slider](https://drive.google.com/uc?id=1DKFtAqMXxl56mYgpFv0Smwt4xENUToN9)

| [TWITTER](https://twitter.com/ibrahima92_) | [BLOG](https://www.ibrahima-ndaw.com/) | [NEWSLETTER](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) | [GITHUB](https://github.com/ibrahima92) | [LINKEDIN](https://www.linkedin.com/in/ibrahima-ndaw/) | [CODEPEN](https://codepen.io/ibrahima92) | [DEV](https://dev.to/ibrahima92) |
| -------------- | ------------------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | ---------------------------------------- | -------------------------------- |