Slick Slider Using CSS

Slick Slider Using CSS

While there are many JavaScript-based slider plugins available, CSS slick sliders provide a lightweight and efficient option that can improve the appearance and user experience of your website. sliders are used to add multiple images as a background inside the website. Slick Slider Using CSS

The Magic of CSS Slick Sliders:

CSS sleek sliders give a dynamic and attractive feature to any website. Sliders load quickly and work smoothly, even on mobile devices, without the need for additional JavaScript files.

Step1: Adding the structure

<html lang="en">

<body>
  <div class="split-slideshow">
    <div class="slideshow">
      <div class="slider">
        <div class="item">
          <img src="https://learnopencv.com/wp-content/uploads/2021/04/image-15.png" />
        </div>
        <div class="item">
          <img src="https://media.istockphoto.com/id/1146517111/photo/taj-mahal-mausoleum-in-agra.jpg?s=612x612&w=0&k=20&c=vcIjhwUrNyjoKbGbAQ5sOcEzDUgOfCsm9ySmJ8gNeRk=" />
        </div>
        <div class="item">
          <img src="https://wallpaperaccess.com/full/1267221.jpg" />
        </div>
        <div class="item">
          <img src="https://miro.medium.com/max/3840/1*Act0CYfi-TmFts310z2z_A.jpeg" />
        </div>
        <div class="item">
          <img src="https://images5.alphacoders.com/862/thumb-1920-862186.jpg" />
        </div>
      </div>
    </div>
    <div class="slideshow-text">
      <div class="item">Slide 1</div>
      <div class="item">Slide 2</div>
      <div class="item">Slide 3</div>
      <div class="item">Slide 4</div>
      <div class="item">Slide 5</div>
    </div>
  </div>
</body>

</html>

The HTML code provided is a split slideshow, a dynamic image carousel that displays images and associated text in two separate sections. The “image slideshow” section showcases multiple images, each enclosed within a <div class=”item”> container, and the “text slideshow” section displays text descriptions for each corresponding image, also wrapped within <div class=”item”> containers. HTML Output: Slick Slider Using CSS

Step 2: Adding CSS

body,
html {
  height: 50%;
  background: #110101;
  font-family: "Roboto", sans-serif;
  overflow: hidden;
}

.slideshow {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slideshow .slider {
  width: 100vw;
  height: 100vw;
  z-index: 2;
}
.slideshow .slider * {
  outline: none;
}
.slideshow .slider .item {
  height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  border: none;
}
.slideshow .slider .item .text {
  display: none;
}
.slideshow .slider .item img {
  min-width: 101%;
  min-height: 101%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

The body and HTML elements are styled with a background color, font family, and hidden overflow to prevent scrolling. The slideshow container is positioned absolutely, taking up the full viewport width and height. Inside the slideshow, the slider element holds the images, and each image is represented by an item with a relative position and hidden overflow. The text element inside each item is set to display none. Slick Slider Using CSS

.slideshow .slick-dots {
  position: fixed;
  z-index: 100;
  width: 40px;
  height: auto;
  bottom: auto;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  left: auto;
  color: #fff;
  display: block;
}
.slideshow .slick-dots li {
  display: block;
  width: 100%;
  height: auto;
}
.slideshow .slick-dots li button {
  position: relative;
  width: 20px;
  height: 15px;
  text-align: center;
}
.slideshow .slick-dots li button:before {
  content: "";
  background: #fff;
  color: #fff;
  height: 2px;
  width: 20px;
  border-radius: 0;
  position: absolute;
  top: 50%;
  right: 0;
  left: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: all 0.3s ease-in-out;
  opacity: 0.6;
}
.slideshow .slick-dots li.slick-active button:before {
  width: 40px;
  opacity: 1;
}
.slideshow.slideshow-right {
  left: 0;
  z-index: 1;
  width: 50vw;
  pointer-events: none;
}
.slideshow.slideshow-right .slider {
  left: 0;
  position: absolute;
}

.slideshow-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
  font-size: 30px;
  width: 100vw;
  text-align: center;
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 100;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 20px;
  line-height: 0.8;
}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4caf50;
  color: white;
}

.topnav-right {
  float: right;
}
@media (max-width: 767px) {
  .slideshow-text {
    font-size: 40px;
  }
}

The slideshow container has a fixed position on the right side, displaying dots for navigation. Each dot is styled as a button with a white line that expands when the corresponding slide is active. The text caption is positioned in the center with uppercase, spaced-out text. Using the class selector .topnav: hover property we will add a hover property to the navbar as the user hovers over the navbar the background and font color of the navbar will change. Slick Slider Using CSS

Step 3: Adding the slider functionality (Javascript)

var $slider = $(".slideshow .slider"),
  maxItems = $(".item", $slider).length,
  dragging = false,
  tracking,
  rightTracking;

$sliderRight = $(".slideshow")
  .clone()
  .addClass("slideshow-right")
  .appendTo($(".split-slideshow"));

rightItems = $(".item", $sliderRight).toArray();
reverseItems = rightItems.reverse();
$(".slider", $sliderRight).html("");
for (i = 0; i < maxItems; i++) {
  $(reverseItems[i]).appendTo($(".slider", $sliderRight));
}

$slider.addClass("slideshow-left");
$(".slideshow-left")
  .slick({
    vertical: true,
    verticalSwiping: true,
    arrows: false,
    infinite: true,
    dots: true,
    speed: 1000,
    cssEase: "cubic-bezier(0.7, 0, 0.3, 1)"
  })
  .on("beforeChange", function (event, slick, currentSlide, nextSlide) {
    if (
      currentSlide > nextSlide &&
      nextSlide == 0 &&
      currentSlide == maxItems - 1
    ) {
      $(".slideshow-right .slider").slick("slickGoTo", -1);
      $(".slideshow-text").slick("slickGoTo", maxItems);
    } else if (
      currentSlide < nextSlide &&
      currentSlide == 0 &&
      nextSlide == maxItems - 1
    ) {
      $(".slideshow-right .slider").slick("slickGoTo", maxItems);
      $(".slideshow-text").slick("slickGoTo", -1);
    } else {
      $(".slideshow-right .slider").slick(
        "slickGoTo",
        maxItems - 1 - nextSlide
      );
      $(".slideshow-text").slick("slickGoTo", nextSlide);
    }
  })
  .on("mousewheel", function (event) {
    event.preventDefault();
    if (event.deltaX > 0 || event.deltaY < 0) {
      $(this).slick("slickNext");
    } else if (event.deltaX < 0 || event.deltaY > 0) {
      $(this).slick("slickPrev");
    }
  })
  .on("mousedown touchstart", function () {
    dragging = true;
    tracking = $(".slick-track", $slider).css("transform");
    tracking = parseInt(tracking.split(",")[5]);
    rightTracking = $(".slideshow-right .slick-track").css("transform");
    rightTracking = parseInt(rightTracking.split(",")[5]);
  })
  .on("mousemove touchmove", function () {
    if (dragging) {
      newTracking = $(".slideshow-left .slick-track").css("transform");
      newTracking = parseInt(newTracking.split(",")[5]);
      diffTracking = newTracking - tracking;
      $(".slideshow-right .slick-track").css({
        transform:
          "matrix(1, 0, 0, 1, 0, " + (rightTracking - diffTracking) + ")"
      });
    }
  })
  .on("mouseleave touchend mouseup", function () {
    dragging = false;
  });

$(".slideshow-right .slider").slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 950,
  cssEase: "cubic-bezier(0.7, 0, 0.3, 1)",
  initialSlide: maxItems - 1
});
$(".slideshow-text").slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 900,
  cssEase: "cubic-bezier(0.7, 0, 0.3, 1)"
});

Here inside our javascript, we have used the Slick carousel library to create smooth transitions for vertical scrolling. The code clones the slideshow container, appends it to the split-slideshow, and reverses the order of items to create a mirrored effect. Also we have add some eventlistener like mousewheel and touch interactions, allowing users to scroll through the slides vertically. When scrolling, the right section synchronizes with the left section, creating a seamless sliding effect.

Video Output:

Codepen Preview:

Summary:

We can add a slider effect with the help of CSS animation and transition and use javascript to navigate up and down using the javascript event listener and libraries. If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: CodewithRandom
Author: Arun
Code By: Arun



Leave a Reply