Full Screen Image Slider

Full Screen Image Slider Tutorial

HTML

<div class="wrapper">
      <div class="owl-carousel fullScreenSlider">
        <div class="item slide slide-1 overlay overlay-violet">
          <a href="#" class="link">Menu 1</a>
        </div>
        <div class="item slide slide-2 overlay overlay-green">
          <a href="#" class="link">Menu 2</a>
        </div>
        <div class="item slide slide-3 overlay overlay-pink">
          <a href="#" class="link">Menu 3</a>
        </div>
        <div class="item slide slide-4 overlay overlay-blue">
          <a href="#" class="link">Menu 4</a>
        </div>
        <div class="item slide slide-5 overlay overlay-red">
          <a href="#" class="link">Menu 5</a>
        </div>
      </div>
    </div>

SCSS

@import url("https://fonts.googleapis.com/css?family=Niconne");
@function rem($value) {
  @return unquote(($value/1px)/16+"rem");
}
* {
  font-family: "Niconne", cursive;
}
$colors: (
  violet: #160c28,
  green: #16db93,
  blue: #020122,
  pink: #ca1551,
  red: #e00214
);
.ease {
  transition: all ease 0.25s;
}
$noOfSlides: 5;
.fullScreenSlider {
  position: relative;
  .slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    .link {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      font-size: rem(50px);
      color: #ffffff;
      text-decoration: none;
      position: relative;
      z-index: 2;
      width: 100%;
      @extend .ease;
    }
    &.overlay {
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;
        opacity: 1;
        @extend .ease;
      }
      &:hover {
        &::after {
          opacity: 0;
        }
      }
    }
    &-1{
      background-image:url('../images/1.jpg');
    }
    &-2{
      background-image:url('../images/2.jpg')
    }
    &-3{
      background-image:url('../images/3.jpg');
    }
    &-4{
      background-image:url('../images/4.jpg');
    }
    &-5{
      background-image:url('../images/5.jpg');
    }
  }

  .owl-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .owl-dot {
      height: rem(10px);
      width: rem(10px);
      background-color: #212121;
      margin: 0 2px;
      border: rem(2px) solid transparent;
      border-radius: rem(50px);
      outline: 0;
      &.active {
        border-color: #ffffff;
      }
    }
  }
}
@each $colorName, $colorValue in $colors {
  .overlay-#{$colorName} {
    &::after {
      background-color: rgba($colorValue, 0.8);
    }
    .link:hover {
      color: #{$colorValue};
      transform: scale(1.5) rotate(1deg);
    }
  }
}

CSS

@import url("https://fonts.googleapis.com/css?family=Niconne");
* {
  font-family: "Niconne", cursive;
}

.ease, .fullScreenSlider .slide.overlay::after, .fullScreenSlider .slide .link {
  transition: all ease 0.25s;
}

.fullScreenSlider {
  position: relative;
}
.fullScreenSlider .slide {
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
}
.fullScreenSlider .slide .link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 3.125rem;
  color: #ffffff;
  text-decoration: none;
  position: relative;
  z-index: 2;
  width: 100%;
}
.fullScreenSlider .slide.overlay::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  opacity: 1;
}
.fullScreenSlider .slide.overlay:hover::after {
  opacity: 0;
}
.fullScreenSlider .slide-1 {
  background-image: url("../images/1.jpg");
}
.fullScreenSlider .slide-2 {
  background-image: url("../images/2.jpg");
}
.fullScreenSlider .slide-3 {
  background-image: url("../images/3.jpg");
}
.fullScreenSlider .slide-4 {
  background-image: url("../images/4.jpg");
}
.fullScreenSlider .slide-5 {
  background-image: url("../images/5.jpg");
}
.fullScreenSlider .owl-dots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullScreenSlider .owl-dots .owl-dot {
  height: 0.625rem;
  width: 0.625rem;
  background-color: #212121;
  margin: 0 2px;
  border: 0.125rem solid transparent;
  border-radius: 3.125rem;
  outline: 0;
}
.fullScreenSlider .owl-dots .owl-dot.active {
  border-color: #ffffff;
}

.overlay-violet::after {
  background-color: rgba(22, 12, 40, 0.8);
}
.overlay-violet .link:hover {
  color: #160c28;
  transform: scale(1.5) rotate(1deg);
}

.overlay-green::after {
  background-color: rgba(22, 219, 147, 0.8);
}
.overlay-green .link:hover {
  color: #16db93;
  transform: scale(1.5) rotate(1deg);
}

.overlay-blue::after {
  background-color: rgba(2, 1, 34, 0.8);
}
.overlay-blue .link:hover {
  color: #020122;
  transform: scale(1.5) rotate(1deg);
}

.overlay-pink::after {
  background-color: rgba(202, 21, 81, 0.8);
}
.overlay-pink .link:hover {
  color: #ca1551;
  transform: scale(1.5) rotate(1deg);
}

.overlay-red::after {
  background-color: rgba(224, 2, 20, 0.8);
}
.overlay-red .link:hover {
  color: #e00214;
  transform: scale(1.5) rotate(1deg);
}

JAVASCRIPT

$(document).ready(function() {
  $(".fullScreenSlider").owlCarousel({
    responsive: {
      0: {
        items: 1
      },
      768: {
        items: 2
      },
      992: {
        items: 3
      },
      1200: {
        items: 4
      }
    },
    responsiveRefreshRate: 100
  });

  var setItemHeight = function() {
    $(".slide").css("height", document.documentElement.clientHeight);
  };

  setItemHeight();
  $(window).resize(function() {
    setItemHeight();
  });
});

 

Add a Comment

Your email address will not be published. Required fields are marked *