swift-slider.css

/* Swift Slider
 * A modern way to make slideshows
 * Author: matou.io
 * License: MPL-2.0
 */

 :root {
  --swiftSliderViewHeight: auto;
  --swiftSliderVerticalHeight: 800px;
  --swiftSliderButtonBackground: var(--bodyFontColor);
  --swiftSliderButtonColor: var(--bodyBG);
  --swiftSliderTransitionDuration: 0.15s;
  --swiftSliderHoverBrightness: 0.7;
  --swiftSliderGap: 1rem;
  --swiftSliderSlideWidth: 100%;
  --swiftSlideSelectedBorder: rgba(255, 255, 255, 0.5);
}

swift-slider {
  display: block;
  position: relative;

  .swift-slide {
    position: relative;
    width: 100%;
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;

    @media only screen and (max-width: 768px) {
      min-width: 100% !important; /* Ensure the slide takes the full width */
      width: 100% !important; /* Ensure the slide takes the full width */
    }

    img,
    svg {
      width: 100%;
      height: 100%;
    }
  }

  &[data-slider-force-height="true"] {

    .swift-slide {
      height: var(--swiftSliderViewHeight);
    }

    .swift-slide img {
      height: 100%;
      object-fit: cover;
    }
  }

  &[data-slider-style="preview"]:not([data-slider-direction="vertical"]) {
    .swift-slide {
      min-width: 66.6666%;
      max-width: 66.6666%;
      scroll-snap-align: center;
    }

    .swift-slide:last-child {
      margin-right: 33.3333%;
    }

    .swift-slide:first-child {
      margin-left: 33.3333%;
    }
  }
}

.swift-slider__view {
  display: grid;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  width: 100%;
  height: var(--swiftSliderViewHeight);
  scrollbar-width: none;
  grid-gap: var(--swiftSliderGap);
  grid-auto-flow: column;
  grid-auto-rows: 100%;
  grid-auto-columns: var(--swiftSliderSlideWidth);

  &::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }
}

.swift-slide--selected {
  border: 5px solid var(--swiftSlideSelectedBorder);
}

/* Controls styling
========================*/

.swift-slider__buttons {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.swift-slider__button {
  background-color: var(--swiftSliderButtonBackground);
  color: var(--swiftSliderButtonColor);
  border-radius: 50%;
  border: none;
  font-size: var(--spacing-xl);
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: filter var(--swiftSliderTransitionDuration) ease-in-out;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.swift-slider__button:hover,
.swift-slider__button:focus,
.swift-slider__dot:hover,
.swift-slider__dot:focus {
  filter: var(--swiftSliderHoverBrightness);
}

.swift-slider__button[data-button-prev] {
  left: -3.5rem;

  @media only screen and (max-width: 1080px) {
    left: 1rem;
  }
}

.swift-slider__button[data-button-next] {
  right: -3.5rem;

  @media only screen and (max-width: 1080px) {
    right: 1rem;
  }
}

.swift-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;

  @media only screen and (max-width: 768px) {
    display: none;
  }
}

.swift-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--swiftSliderButtonBackground);
  margin: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: var(--swiftSliderHoverBrightness);
}

.swift-slider__dot--active {
  opacity: 1;
}

/* Vertical styling
========================*/

[data-slider-direction="vertical"] .swift-slider__view {
  scroll-snap-type: y mandatory;
  flex-direction: column;
  overflow-y: scroll;
  overflow-x: hidden;
  width: initial;
  height: var(--swiftSliderVerticalHeight);
}

@media only screen and (max-width: 768px) {
  [data-slider-direction="vertical"]  .swift-slider__view {
    height: calc(var(--swiftSliderVerticalHeight) / 2);
  }
}

[data-slider-direction="vertical"] .swift-slide {
  min-width: initial;
  min-height: 100%;
  width: 100%;
}

[data-slider-direction="vertical"] .swift-slider__buttons {
  height: 100%;
}

[data-slider-direction="vertical"] .swift-slider__button {
  left: 50%;
  transform: translateX(-50%);
  transform: translateX(-50%) rotate(90deg);
}

[data-slider-direction="vertical"] .swift-slider__button[data-button-prev] {
  top: 10px;
}

[data-slider-direction="vertical"] .swift-slider__button[data-button-next] {
  bottom: 10px;
  top: initial;
}

[data-slider-direction="vertical"] .swift-slider__dots {
  flex-direction: column;
  left: 10px;
  align-items: flex-start;
  width: auto;
  top: 50%;
  transform: translateY(-50%);
}