
  <!-- Demo styles -->
    .swiper {
      display: block;
      _max-width: 100%;
      _height: auto;
      _width: 100%;
      _height: 150px;
      _overflow: visible;
      _aspect-ratio: 19 / 6;
      _margin-left: auto;
      _margin-right: auto;
    }

    .mySwiper {
      aspect-ratio: 19 / 6;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      _background: #444;
      _display: flex;
      justify-content: center;
      align-items: center;

    }

    .swiper-slide img {
      display: block;
      border-style: none;
      _width: 100%;
      _flex-shrink: 0;
      _max-height: 100%;
      height: 100%;
      _object-fit: cover;
      _aspect-ratio: 19 / 6;
      margin-left: auto;
      margin-right: auto;
    }

    ._swiper-wrapper {
	max-height: 100%;
	height: 100%;
	display: flex;
    }


.img-num {
  float: left;
  position: absolute;
  right: 15px;
  bottom: 5px;
  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
  font-size: 0.8em;
  color: white;
}

.img-wrapper {
  _border-style: solid;
  border-width: thin;
  height: 100%;
  object-fit: contain;
  min-width: 0;
}

    .autoplay-progress {
      position: absolute;
      right: 16px;
      bottom: 16px;
      z-index: 10;
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: var(--swiper-theme-color);
    }

    .autoplay-progress svg {
      --progress: 0;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 10;
      width: 100%;
      height: 100%;
      stroke-width: 4px;
      stroke: var(--swiper-theme-color);
      fill: none;
      stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
      stroke-dasharray: 125.6;
      transform: rotate(-90deg);
    }