CodePen Embed - Swiper

<script>
  document.body.className = 'hidden';
</script>

<div class="cursor"><span></span></div>
<div class="cursor-trail"></div>

<div class="page-head" role="banner">
  <div class="site-logo">
    M
  </div>
  <p class="contrast"><a href="#" class="contrast__link"><span class="contrast__switch"></span><span class="contrast__label">Toggle Classes</span></a></p>
</div>

<div class="grid" role="main">

  <div class="grid__item finder">
    <div class="hgroup title-bar">
      <h1 class="brand-name">Name of Page</h1>
    </div>
    <div class="inner">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

  </div>

  <div class="grid__item gallery">

    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" data-caption="1 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1000" />
        </div>
        <div class="swiper-slide" data-caption="2 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1100" />
        </div>
        <div class="swiper-slide" data-caption="3 Caption that is really, really, really, really long">
          <img src="https://www.fillmurray.com/700/1200" />
        </div>

        <div class="swiper-slide" data-caption="4 Caption that is really, really, really, really long">
          <img src="https://picsum.photos/id/237/700/1200" />
        </div>

        <div class="swiper-slide" data-caption="5 Caption that is really, really, really, really long">
          <img src="https://picsum.photos/id/238/700/1200" />
        </div>

        <div class="swiper-slide" data-caption="6 Caption that is really, really, really, really long">
          <img src="https://picsum.photos/id/239/700/1200" />
        </div>

        <div class="swiper-slide" data-caption="7 Caption that is really, really, really, really long">
          <img src="https://picsum.photos/id/240/700/1200" />
        </div>
        <div class="swiper-slide" data-caption="8 Caption that is really, really, really, really long">
          <img src="https://picsum.photos/id/241/700/1200" />
        </div>
        <div class="swiper-slide" data-caption="9 Caption that is really, really, really, really long">
          <img src="https://picsum.photos/id/242/700/1200" />
        </div>

      </div>
      <a class="swiper-button-prev" data-interaction="cursor-prev"></a>
      <a class="swiper-button-next" data-interaction="cursor-next"></a>
    </div>

  </div>

  <div class="page-foot" role="contentinfo">
    <p class="swiper-caption">Caption that is really, really, really, really long...</p>
    <p class="swiper-pagination"></p>
  </div>

</div>

/* #GLOBAL */

body.hidden {
  opacity: 0;
}

body.visible {
  opacity: 1;
  transition: opacity 0.48s ease-out;
}

html {
  background: white;
  font-size: 62.5%;
  height: 100vh;
  height: var(--app-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

.dark-mode {
  background: yellow;
}

.retro {
  background: blue;
  color: white;
}

/**
 * Base `body` styling.
 */

body {
  background-color: transparent;
  font-variant-ligatures: common-ligatures discretionary-ligatures
    historical-ligatures;
  font-size: 16px;
  height: 100vh;
  height: var(--app-height);
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
}

h1,
p {
  margin: 0 0 24px;
  padding: 0;
}

/* #HEAD (left column) */

.page-head {
  border-bottom: 2px solid black;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 24px;
  position: fixed;
  bottom: -64px;
  left: 0;
  transform: rotate(-90deg);
  transform-origin: top left;
  width: 100vh;
}

.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  order: 1;
  stroke: black;
  transform: rotate(90deg);
  width: 32px;
  svg {
    overflow: visible;
  }
}

.contrast {
  display: flex;
  align-items: center;
  flex: 1 1 0%;
  margin-bottom: 0;
  justify-content: flex-start;
}

/* #GRID */

.grid {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.grid__item {
  box-sizing: border-box;
  padding: 24px 24px 0;
  margin-left: 64px;
}

.gallery {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 0 24px 24px;
  text-align: center;
}

.gallery img {
  border: 2px solid black;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  max-width: 100%;
}

/**
 * Side-by-side view for wider devices.
 */

.grid {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: var(--app-height);
}

/**
 * Grid Cells.
 */

.grid__item {
  box-sizing: border-box;
  padding: 48px 48px 0;
  margin-left: 48px;
  @media only screen and (min-width: 1000px) {
    margin-left: 0;
  }
}

.gallery {
  box-sizing: border-box;
  flex: 1;
  overflow: hidden;
  position: relative;
  padding: 0 24px 24px;
  text-align: center;
}

.gallery img {
  border: 2px solid black;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: top center;
  width: 100%;
  max-width: 100%;
  @media only screen and (min-width: 1000px) {
    width: auto;
  }
}

/**
 * Side-by-side view for wider devices.
 */

@media only screen and (min-width: 1000px) {
  .grid {
    background-color: black;
    flex-direction: row;
    column-gap: 2px;
    height: 100vh;
    margin: 0 48px;
  }
  .grid__item {
    background-color: white;
    transition: width 0.12s;
    width: 33.333333%;
    height: 100vh;
  }
  .gallery {
    padding-top: 24px;
  }
  .gallery img {
    height: 100%;
    max-height: 100%;
    //object-fit: initial;
    width: auto;
    max-width: 100%;
  }
}

@media only screen and (min-width: 1000px) {
  .grid__item {
    width: 50%;
  }
}

@media screen and (max-height: 600px) {
  .grid {
    height: auto;
  }
  .grid__item {
    height: auto;
  }
}

/* #FOOTER (right column) */

.page-foot {
  margin-left: 64px;
  padding: 0 24px;
}

.swiper-pagination {
  display: none;
}

@media only screen and (min-width: 1000px) {
  .page-foot {
    border-bottom: 2px solid black;
    box-sizing: border-box;
    display: flex;
    height: 64px;
    padding: 0 24px;
    position: fixed;
    bottom: -64px;
    left: 0;
    transform: rotate(-90deg);
    transform-origin: top left;
    width: 100vh;
    left: auto;
    right: 0;
    transform: rotate(90deg);
    transform-origin: top right;
    p {
      display: flex;
      align-items: center;
      margin-bottom: 0;
    }
  }
  .swiper-caption {
    flex: 1 1 0%;
  }
}

/* CURSOR */

* {
  //cursor: none !important;
}

body:hover {
  .cursor-trail {
    border-color: black;
  }
  .cursor span {
    background-color: black;
  }
}

.cursor {
  position: fixed;
  z-index: 1000;
}

.cursor span {
  background-color: transparent;
  border-radius: 100%;
  display: block;
  height: 4px;
  margin: 0;
  pointer-events: none;
  transition: background-color 0.12s ease-out, height 0.12s, opacity 0.12s,
    width 0.12s;
  position: fixed;
  width: 4px;
}

.cursor--click span {
  height: 0;
  margin: 2px 0 0 2px;
  width: 0;
}

.cursor-trail {
  border: 2px solid transparent;
  border-radius: 100%;
  box-sizing: border-box;
  height: 32px;
  margin: 0;
  pointer-events: none;
  position: fixed;
  transform-origin: center center;
  transition: border-color 0.12s ease-out, height 0.12s ease-out,
    margin 0.12s ease-out, opacity 0.12s ease-out,
    transform 0.24s cubic-bezier(0, 0.5, 1, 1), width 0.12s ease-out;
  width: 32px;
  z-index: 1000;
}

.cursor-trail--hover {
  height: 4px;
  margin: 16px 0 0 16px;
  opacity: 0;
  width: 4px;
}

/* Prev */

.cursor-prev span,
.cursor-next span {
  border-radius: 0;
  height: 2px;
  transition: height 0.12s, opacity 0.12s, transform 0.12s, width 0.12s;
  transform-origin: center center;
  left: -16px;
  width: 32px;
  &:before,
  &:after {
    background: black;
    content: "";
    display: block;
    height: 2px;
    opacity: 0;
    width: 16px;
    position: absolute;
    transform-origin: center left;
  }
  &:before {
    animation: cursor-prev 0.12s ease-in-out 0.32s forwards;
  }
  &:after {
    animation: cursor-next 0.12s ease-in-out 0.32s forwards;
  }
}

.cursor-next span {
  transform: rotate(-180deg);
}

@keyframes cursor-prev {
  0% {
    transform: rotate(0);
  }
  100% {
    opacity: 1;
    transform: rotate(-45deg);
  }
}

@keyframes cursor-next {
  0% {
    transform: rotate(0);
  }
  100% {
    opacity: 1;
    transform: rotate(45deg);
  }
}

/* SWIPER */

.swiper {
  height: 100%; // Fits image in viewport
  position: relative;
  //overflow: hidden; // Removed which seems to help border getting cut off
  touch-action: pan-y;
  z-index: 1; // Fix of Webkit flickering
  -webkit-user-select: none; // Fixes issue in Safari when clicking carousel quickly, page is highlighted black.
}

.swiper-wrapper {
  box-sizing: border-box;
  display: flex;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.swiper-slide {
  backface-visibility: hidden;
  flex-shrink: 0;
  height: 100%;
  max-height: 100%; // Added myself
  pointer-events: none;
  position: relative;
  transform: translateZ(0);
  transition: opacity 12ms ease-out !important;
  width: 100%;
}

.swiper-slide-active {
  pointer-events: auto;
}

.swiper-button-prev,
.swiper-button-next {
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  top: 0;
  width: 50%;
  z-index: 10;
  &:focus {
    outline: 0;
  }
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-current {
  margin-right: 4px;
}

.swiper-pagination-total {
  margin-left: 2px;
}

/* FADE IN WHEN CONTENT LOADED */

window.addEventListener("DOMContentLoaded", function () {
  document.body.className = "visible";
});

/* CLASS TOGGLE */

const html = document.querySelector("html");
const button = document.querySelector(".contrast__link");
button.addEventListener("click", (e) => {
  e.preventDefault();
  if (html.classList.contains("dark-mode")) {
    html.classList.remove("dark-mode");
    html.classList.add("retro");
    let slideIndex = swiper.activeIndex;
    swiper.destroy(true, true);
    swiper = initSwiper("slide", false, 1200);
    swiper.slideTo(slideIndex, 0);
  } else if (html.classList.contains("retro")) {
    html.classList.remove("retro");
    let slideIndex = swiper.activeIndex;
    swiper.destroy(true, true);
    swiper = initSwiper("fade", false, 2000);
    swiper.slideTo(slideIndex, 0);
  } else {
    html.classList.add("dark-mode");
    let slideIndex = swiper.activeIndex;
    swiper.destroy(true, true);
    swiper = initSwiper("fade", true, 999999);
    swiper.slideTo(slideIndex, 0);
  }
});

/* CAROUSEL */

var caption = document.querySelector(".swiper-caption");
const effect = "fade";
const type = true;
var myDelay = 1200;
let swiper = initSwiper(effect, type, myDelay);

function initSwiper(effect, type, myDelay) {
  return new Swiper(".swiper", {
    // Disable preloading of all images
    preloadImages: false,
    observer: true,
    // Enable lazy loading
    lazy: true,
    effect: effect,
    fadeEffect: {
      crossFade: true
    },
    loop: type,
    autoplay: {
      delay: myDelay,
      disableOnInteraction: false,
      pauseOnMouseEnter: true
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
    },
    pagination: {
      el: ".swiper-pagination",
      type: "fraction"
    },
    on: {
      init: function () {
        updateCaptionText(this);
      },
      activeIndexChange: function () {
        updateCaptionText(this);
      }
    }
  });
}

function updateCaptionText(slider) {
  caption.textContent = slider.slides[slider.activeIndex].dataset.caption;
}

swiper.autoplay.stop();

window.addEventListener("DOMContentLoaded", () => {
  document.body.className = "visible";
  setTimeout(() => swiper.autoplay.start(), 640); // 1000 means 1s, it's in ms here.
});

/* CUSTOM CURSOR */

var cursor = document.querySelector(".cursor");
var cursorTrail = document.querySelector(".cursor-trail");
var a = document.querySelectorAll("a");
var timeout;

window.addEventListener(
  "mousemove",
  function (e) {
    var x = e.clientX;
    var y = e.clientY;
    if (!timeout) {
      timeout = setTimeout(function () {
        timeout = null;
        cursor.style.transform = `translate(${x - 2}px, ${y - 2}px)`;
        timeout = null;
        cursorTrail.style.transform = `translate(${x - 16}px, ${y - 16}px)`;
      }, 16);
    }
  },
  false
);

/* Add/Remove Classes */

document.addEventListener("mousedown", function () {
  cursor.classList.add("cursor--click");
});

document.addEventListener("mouseup", function () {
  cursor.classList.remove("cursor--click");
});

a.forEach((item) => {
  item.addEventListener("mouseover", () => {
    cursorTrail.classList.add("cursor-trail--hover");
  });
  item.addEventListener("mouseleave", () => {
    cursorTrail.classList.remove("cursor-trail--hover");
  });
});

a.forEach((item) => {
  const interaction = item.dataset.interaction;

  item.addEventListener("mouseover", () => {
    cursor.classList.add(interaction);
  });
  item.addEventListener("mouseleave", () => {
    cursor.classList.remove(interaction);
  });
});

Run Pen

This Pen is owned by Paul O'Brien on CodePen.

See more by @paulobrien on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.2.2/swiper-bundle.min.js