Cartzilla component

# Image comparison slider

JavaScript based slider component that can be used to demonstrate the difference between two images.

The image comparison slider functionality depends on a img-comparison-slider plugin. Ensure that you include links to the plugin's CSS and JavaScript files in your document.

CSS file is linked in the `<head>` section and above `theme.min.css` reference in your document:

    <link rel="stylesheet" href="assets/vendor/img-comparison-slider/dist/styles.css">

JavaScript file is linked before the closing `</body>` tag and above `theme.min.js` reference in your document:

    <script src="assets/vendor/img-comparison-slider/dist/index.js"></script>

#### Horizontal

Before
After

    <!-- Horizontal (default) image comparison slider -->
    <img-comparison-slider class="focus-none text-white rounded-4" style="--divider-width: .125rem; --divider-color: currentColor">
      <figure slot="first">
        <img src="assets/img/docs/image-comparison-slider/before.jpg" alt="Image before">
        <figcaption class="badge position-absolute top-50 start-0 translate-middle-y fs-sm bg-white text-dark rounded px-3 py-2 ms-3 ms-sm-4">Before</figcaption>
      </figure>
      <figure slot="second">
        <img src="assets/img/docs/image-comparison-slider/after.jpg" alt="Image after">
        <figcaption class="badge position-absolute top-50 end-0 translate-middle-y fs-sm bg-white text-dark rounded px-3 py-2 me-3 me-sm-4">After</figcaption>
      </figure>
      <div slot="handle" style="width: 42px">
        <svg class="text-white border border-dark rounded-circle" width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
          <g>
            <circle fill="currentColor" cx="21" cy="21" r="21"></circle>
          </g>
          <path fill="#222934" d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z"></path>
        </svg>
      </div>
    </img-comparison-slider>

#### Vertical

Before
After

    <!-- Vertical image comparison slider -->
    <img-comparison-slider direction="vertical" class="focus-none text-white rounded-4" style="--divider-width: .125rem; --divider-color: currentColor">
      <figure slot="first">
        <img src="assets/img/docs/image-comparison-slider/before.jpg" alt="Image before">
        <figcaption class="badge position-absolute top-0 start-50 translate-middle-x fs-sm bg-white text-dark rounded px-3 py-2 mt-3 mt-sm-4">Before</figcaption>
      </figure>
      <figure slot="second">
        <img src="assets/img/docs/image-comparison-slider/after.jpg" alt="Image after">
        <figcaption class="badge position-absolute bottom-0 start-50 translate-middle-x fs-sm bg-white text-dark rounded px-3 py-2 mb-3 mb-sm-4">After</figcaption>
      </figure>
      <div slot="handle" style="width: 42px">
        <svg class="text-white border border-dark rounded-circle" width="42" height="42" viewBox="0 0 42 42" xmlns="http://www.w3.org/2000/svg">
          <g>
            <circle fill="currentColor" cx="21" cy="21" r="21"></circle>
          </g>
          <path fill="#222934" d="M25.5019 19.7494H15.9147V15.9146L11.1211 20.7081L15.9147 25.5017V21.6669H25.5019V25.5017L30.2955 20.7081L25.5019 15.9146V19.7494Z"></path>
        </svg>
      </div>
    </img-comparison-slider>

Top