Responsive Image Carousel Slider Using CSS Clip-path

Preview:

Description:

A tiny responsive image carousel slider component that comes with a subtle transition effect based on CSS clip-path property.

How to use it:

1. Code the HTML for the carousel slider.

<div class="main-wrapper">
  <div class="slider">
    <img class="slide slide_current" src="1.jpg">
    <img class="slide" src="2.jpg">
    <img class="slide" src="3.jpg">
    <img class="slide" src="4.jpg">
    <img class="slide" src="5.jpg">
  </div>
  <div class="arrow arrow_prev">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.6 451.8">
      <path d="M0,225.9c0-8.1,3.1-16.2,9.3-22.4L203.5,9.3c12.4-12.4,32.4-12.4,44.8,0c12.4,12.4,12.4,32.4,0,44.7L76.4,225.9l171.9,171.9c12.4,12.4,12.4,32.4,0,44.7c-12.4,12.4-32.4,12.4-44.7,0L9.3,248.3C3.1,242.1,0,234,0,225.9z"/>
    </svg>
  </div>
  <div class="arrow arrow_next">
    <svg class="arrow arrow_next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 257.6 451.8">
      <path d="M248.3,248.3L54,442.6c-12.4,12.4-32.4,12.4-44.7,0c-12.4-12.4-12.4-32.4,0-44.7l171.9-171.9L9.3,54C-3.1,41.7-3.1,21.6,9.3,9.3C21.6-3.1,41.7-3.1,54,9.3l194.3,194.3c6.2,6.2,9.3,14.3,9.3,22.4C257.6,234,254.5,242.1,248.3,248.3z"/>
    </svg>
  </div>
</div>

2. Include the core stylesheet in the header of the document.

<link rel="stylesheet" href="style.css">

3. Include the main JavaScript file at the end of the document. That’s it.

<script async src="script.js"></script>

4. Override the default styles of the carousel slider.

.slider{
  position: relative;
  display: flex;
}
.slide{
  width: 100vw;
  height: 100vh;
  display: block;
  object-fit: cover;
  object-position: center;
}
.slide:not(.slide_current):not(.slide_next-right):not(.slide_next-left){
  display: none;
}