Create a Swiper Premium Fashion Slider – HTML and React Snippets

Blog, Sliders | | 5 minutes of reading
swiper premium fashion slider

Swiper Premium Fashion Slider

Looking to elevate your website’s design with a sleek, modern Swiper Fashion Slider? In this blog, we’ll show you how to effortlessly integrate a Swiper premium fashion slider using HTML and React snippets.

Swiper JS Premium Fashion Slider offers a full-page layout, where each slide smoothly transitions between images, providing a polished, professional look. As you move from one slide to another, the images animate and open with stunning effects, making your content stand out like never before.

Whether you’re a developer working on e-commerce platforms or a creative looking to showcase fashion portfolios, this guide provides a free, easy-to-follow trick to add this stylish slider to your projects.

Lets Try Swiper Fashion Slider:

Preview

Who can use this slider?

  • Fashion brands displaying new collections
  • E-commerce websites showcasing product categories
  • Creative portfolios featuring photography or design work
  • Agencies looking to enhance client websites with interactive elements

By the end of this blog, you’ll be equipped to use the Swiper premium fashion slider and seamlessly incorporate it into any project.

Swiper Fashion Slider – Html Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://fashion-slider.uiinitiative.com/assets/index.fca86069.css"
    />
    <link
      rel="modulepreload"
      href="    https://fashion-slider.uiinitiative.com/assets/vendor.688a9bfa.js"
    />

    <script
      type="module"
      crossorigin
      src="
    https://fashion-slider.uiinitiative.com/assets/index.ff8f4572.js"
    ></script>
  </head>
  <body>
    <div class="fashion-slider">
      <div class="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" data-slide-bg-color="#D1C4B4">
            <!-- slide title wrap -->
            <div class="fashion-slider-title" data-swiper-parallax="-130%">
              <!-- slide title text -->
              <div class="fashion-slider-title-text">Nike</div>
            </div>
            <!-- slide image wrap -->
            <div class="fashion-slider-scale">
              <!-- slide image -->
              <img
                src="https://cdn.pixabay.com/photo/2023/03/17/02/42/architecture-7857832_1280.jpg"
              />
            </div>
          </div>

          <div
            class="swiper-slide swiper-slide-next"
            data-slide-bg-color="#9B89C5"
          >
            <!-- slide title wrap -->
            <div class="fashion-slider-title" data-swiper-parallax="-130%">
              <!-- slide title text -->
              <div class="fashion-slider-title-text">Puma</div>
            </div>
            <!-- slide image wrap -->
            <div class="fashion-slider-scale">
              <!-- slide image -->
              <img
                src="https://cdn.pixabay.com/photo/2021/09/27/20/47/nature-6662283_1280.jpg"
              />
            </div>
          </div>

          <div
            class="swiper-slide"
            data-slide-bg-color="#D7A594"
            style="width: 768px"
          >
            <!-- slide title wrap -->
            <div class="fashion-slider-title" data-swiper-parallax="-130%">
              <!-- slide title text -->
              <div class="fashion-slider-title-text">Yeeze</div>
            </div>
            <!-- slide image wrap -->
            <div class="fashion-slider-scale">
              <!-- slide image -->
              <img
                src="https://cdn.pixabay.com/photo/2024/01/18/14/46/train-8517089_1280.jpg"
              />
            </div>
          </div>
        </div>
        <div class="fashion-slider-button-prev fashion-slider-button">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
            <g class="fashion-slider-svg-wrap">
              <g class="fashion-slider-svg-circle-wrap">
                <circle cx="42" cy="42" r="40"></circle>
              </g>
              <path
                class="fashion-slider-svg-arrow"
                d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"
              ></path>
              <path class="fashion-slider-svg-line" d="M80,0H0"></path>
            </g>
          </svg>
        </div>

        <div class="fashion-slider-button-next fashion-slider-button">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
            <g class="fashion-slider-svg-wrap">
              <g class="fashion-slider-svg-circle-wrap">
                <circle cx="42" cy="42" r="40"></circle>
              </g>
              <path
                class="fashion-slider-svg-arrow"
                d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"
              ></path>
              <path class="fashion-slider-svg-line" d="M80,0H0"></path>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </body>
</html>

Swiper Fashion Slider – React Component

import React, { useEffect } from "react";

const Fashionslider = () => {
  useEffect(() => {
    // Add the external CSS link
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href =
      "https://fashion-slider.uiinitiative.com/assets/index.fca86069.css";
    document.head.appendChild(link);

    // Add the module preload link
    const preloadLink = document.createElement("link");
    preloadLink.rel = "modulepreload";
    preloadLink.href =
      "https://fashion-slider.uiinitiative.com/assets/vendor.688a9bfa.js";
    document.head.appendChild(preloadLink);

    // Add the external script
    const script = document.createElement("script");
    script.type = "module";
    script.crossOrigin = "anonymous";
    script.src =
      " https://fashion-slider.uiinitiative.com/assets/index.ff8f4572.js";
    document.body.appendChild(script);

    // Cleanup script and links on unmount
    return () => {
      document.head.removeChild(link);
      document.head.removeChild(preloadLink);
      document.body.removeChild(script);
    };
  }, []);
  return (
    <>
      <div className="fashion-slider">
        <div className="swiper h-screen">
          <div className="swiper-wrapper h-screen">
            <div
              className="swiper-slide swiper-slide-visible swiper-slide-fully-visible swiper-slide-active  "
              data-slide-bg-color="#D1C4B4"
            >
              {/* slide title wrap */}
              <div
                className="fashion-slider-title h-screen flex flex-col justify-center items-center"
                data-swiper-parallax="-130%"
              >
                <div className="fashion-slider-title-text   ">Nike</div>
              </div>
              <div className="fashion-slider-scale   ">
                {/* slide image */}
                <img
                  src="https://cdn.pixabay.com/photo/2023/03/17/02/42/architecture-7857832_1280.jpg"
                  alt="Nike"
                />
              </div>
            </div>

            <div
              className="swiper-slide swiper-slide-next"
              data-slide-bg-color="#9B89C5"
            >
              {/* slide title wrap */}
              <div
                className="fashion-slider-title h-screen flex flex-col justify-center items-center"
                data-swiper-parallax="-130%"
              >
                {/* slide title text */}
                <div className="fashion-slider-title-text">Puma</div>
              </div>
              {/* slide image wrap */}
              <div className="fashion-slider-scale">
                {/* slide image */}
                <img
                  src="https://cdn.pixabay.com/photo/2021/09/27/20/47/nature-6662283_1280.jpg"
                  alt="Puma"
                />
              </div>
            </div>

            <div className="swiper-slide" data-slide-bg-color="#D7A594">
              <div
                className="fashion-slider-title h-screen flex flex-col justify-center items-center"
                data-swiper-parallax="-130%"
              >
                <div className="fashion-slider-title-text">Yeeze</div>
              </div>
              <div className="fashion-slider-scale">
                <img
                  src="https://cdn.pixabay.com/photo/2024/01/18/14/46/train-8517089_1280.jpg"
                  alt="Yeeze"
                />
              </div>
            </div>
          </div>

          <div className="fashion-slider-button-prev fashion-slider-button fashion-slider-button-disabled">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
              <g className="fashion-slider-svg-wrap">
                <g className="fashion-slider-svg-circle-wrap">
                  <circle cx="42" cy="42" r="40"></circle>
                </g>
                <path
                  className="fashion-slider-svg-arrow"
                  d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"
                />
                <path className="fashion-slider-svg-line" d="M80,0H0" />
              </g>
            </svg>
          </div>

          <div className="fashion-slider-button-next fashion-slider-button">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
              <g className="fashion-slider-svg-wrap">
                <g className="fashion-slider-svg-circle-wrap">
                  <circle cx="42" cy="42" r="40"></circle>
                </g>
                <path
                  className="fashion-slider-svg-arrow"
                  d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"
                />
                <path className="fashion-slider-svg-line" d="M80,0H0" />
              </g>
            </svg>
          </div>
        </div>
      </div>
    </>
  );
};

export default Fashionslider;

Note: Since the Premium Swiper Fashion Slider effects are part of a paid plan, the above code snippets use custom coding with CDNs instead of relying on the Swiper.js library, which doesn’t provide these premium features for free.

WEBFLOW GUIDE

Swiper Premium Fashion Slider

Snippets For Webflow Paginations:

<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Create SVG for Next button
    const nextSvg = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
        <g class="fashion-slider-svg-wrap">
          <g class="fashion-slider-svg-circle-wrap">
            <circle cx="42" cy="42" r="40"></circle>
          </g>
          <path class="fashion-slider-svg-arrow" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
          <path class="fashion-slider-svg-line" d="M80,0H0"></path>
        </g>
      </svg>
    `;

    // Create SVG for Prev button
    const prevSvg = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 350 160 90">
        <g class="fashion-slider-svg-wrap">
          <g class="fashion-slider-svg-circle-wrap">
            <circle cx="42" cy="42" r="40"></circle>
          </g>
          <path class="fashion-slider-svg-arrow" d="M.983,6.929,4.447,3.464.983,0,0,.983,2.482,3.464,0,5.946Z"></path>
          <path class="fashion-slider-svg-line" d="M80,0H0"></path>
        </g>
      </svg>
    `;

    // Append SVG to the Next button
    const nextButton = document.querySelector('.fashion-slider-button-next');
    if (nextButton) {
      nextButton.innerHTML += nextSvg;
    }

    // Append SVG to the Prev button
    const prevButton = document.querySelector('.fashion-slider-button-prev');
    if (prevButton) {
      prevButton.innerHTML += prevSvg;
    }

    // Function to trigger the next slide
    function nextSlide() {
      nextButton.click(); // Simulate a click on the next button
    }

    // Function to trigger the previous slide
    function prevSlide() {
      prevButton.click(); // Simulate a click on the prev button
    }

    // Listen for keydown events
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowRight') {
        nextSlide();
      } else if (event.key === 'ArrowLeft') {
        prevSlide();
      }
    });
  });
</script>

If you’re aiming to create more stunning sliders for free, be sure to check out our Sliders Categories. Just click the bold text to discover its features and see how it can elevate your project.

Recent Posts

Scroll to Top