swiper实现大气图文轮播幻灯片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：swiper实现大气图文轮播幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper-bundle.11.0.4.css">
  
<style>


@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,600;1,400&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Reset figure default spacing */
figure {
  margin: 0;
}

/* Ensure swiper takes full height of aspect wrapper */
.ohfSwiper,
.swiper-wrapper,
.swiper-slide {
  height: 100%;
}

.ohfSwiper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ============================================
   Aspect Ratio Utilities for Swiper Containers
   --------------------------------------------
   These utility classes maintain consistent aspect ratios
   using the classic CSS `padding-top` technique instead of
   the newer `aspect-ratio` property.

   Why use padding-top?
   - Better browser support (especially in older WebKit)
   - Works more reliably with absolutely positioned children
   - Avoids issues inside nested containers or flex layouts

   The top padding creates vertical space proportional to
   the container's width, ensuring each Swiper holds its
   shape responsively across screen sizes.
   ============================================ */


/* 1:1 Square – Good for thumbnails, Instagram-style media */
.swiper-1x1 {
  --aspect-ratio: 1 / 1;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}

/* 16:9 Widescreen – Best for modern video, YouTube embeds */
.swiper-16x9 {
  --aspect-ratio: 16 / 9;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}

/* 4:3 Classic TV or archival photos and slides */
.swiper-4x3 {
  --aspect-ratio: 4 / 3;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}

/* 3:2 – Common for 35mm photography and DSLR shots */
.swiper-3x2 {
  --aspect-ratio: 3 / 2;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}

/* 2:3 – Vertical orientation (great for phone photos) */
.swiper-2x3 {
  --aspect-ratio: 2 / 3;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}

/* 9:16 – Tall vertical video (TikTok, Instagram Reels) */
.swiper-9x16 {
  --aspect-ratio: 9 / 16;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}

/* 3:4 – Vertical slideshow or portrait-style content */
.swiper-3x4 {
  --aspect-ratio: 3 / 4;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}



/* Maintain image fit inside each slide */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* -----------------------------------------------
   Caption Styling for One Human Family Swiper
   ----------------------------------------------- */

/* Caption fade effect */
.caption-text {
  display: inline-block;
  transition: opacity 0.6s ease, transform 0.6s ease;
  opacity: 1;
  transform: translateY(0);
  will-change: opacity, transform;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Triggered when caption is updating */
.caption-text.is-updating {
  opacity: 0;
  transform: translateY(5px);
}

/* Caption container with space for the count badge */
.caption {
  position: relative;
  padding: 1.5rem 3.25rem 1rem 1rem; /* top, right (extra), bottom, left */
  color: white;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing:1px;
}

.caption-count {
  position: absolute;
  top: 1.25rem; /* nudged up slightly */
  right: 1.25rem;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 1rem;
  font-weight: bold;
  color: white;
  pointer-events: none;
}


/* -----------------------------------------------
   Responsive Tweak: Adjust on Mobile
   ----------------------------------------------- */
@media (max-width: 900px) {
  
  .swiper-1x1 {
  --aspect-ratio: 3 / 4;
  position: relative;
  width: 100%;
  padding-top: calc(100% / (var(--aspect-ratio)));
  overflow: hidden;
}


  .caption {
    padding: 1rem 2.5rem 0.75rem 1rem;
    font-size: 14px;
  }

  .caption-count {
    top: 1.25rem;
    right: 1rem;
    font-size: 13px;
    padding: 0.2rem 0.55rem;
  }

  figure figcaption {
    font-size: 14px;
    padding: 1rem;
  }
}

/* Specific background color variants for caption */
.caption-red    { background-color: rgba(177, 14, 19, 0.9); }
.caption-orange { background-color: rgba(233, 87, 8, 0.98); }
.caption-yellow {
  background-color: rgba(216, 168, 70, 1);
  color: #301934; /* Darkest Purple */
  text-shadow: none;
}
.caption-green    { background-color: rgba(23, 115, 57, 0.9); }
.caption-turquoise{ background-color: rgba(68, 125, 221, 0.9); }
.caption-blue     { background-color: rgba(10, 49, 169, 0.9); }
.caption-purple   { background-color: rgba(97, 19, 110, 0.9); }
.caption-pink     { background-color: rgba(213, 70, 109, 0.9); }

/* Faint darkening under figcaption */
figcaption {
  filter: brightness(0.9);
}

/* Swiper Cursor*/
.ohfSwiper:hover,
.swiper-cursor:hover {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAZlBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+Vn2moAAAAInRSTlMAmXaIPiMyCDUdElI4jJCJbUhDBJR+YVxNGnIOg2ZWLRcoBr06qQAAAUlJREFUSMflztmSgjAQheFzACXEIMq+uL7/Sw5RKIhCMX05Nd9NKqn+q4OXkjU27fNCY3Qi+cRcGFRlFWTO05FM9KzgDjOdT+sSYpLF7JtupUDLt5Oz5kIy1mPhPYO0dz436D04sgPR7Xaw1GvS71DScbRDO44iIIzp8FDQtftMNF0+9u/zkh97OUt8JkiPid9LvIKWAhR7BRBaGb6SiTcUQ3PFZCW5DoVl2Gu2koY9g4EiveUtjfsvNd0iEy4nt256DU0Eh5tMirrBJps44qsKhYl1CrQwsapMnDDW4oStPGEER5ZtJwpzKfNyt5UEmFG04oP+fXLgwEtDYWLVgSSZbCd7eYJanuAuT/DwhYnVyhPU8gRGnuARixNkrTCxKnkCI08QxeIE2qj9N2U0/h6TeEv8O1aduSz4H4lZSe5YV+WJ/ynJD7B+AB2wESSel3HpAAAAAElFTkSuQmCC")
      25 25,
    auto; /* Center the 50px by 50px cursor */
  /* Customize the cursor by changing the data URI */
}



/* ============================================================================
   One Human Family Slider — Page & Grid Styles
   ----------------------------------------------------------------------------
   The following styles are not required for.........完整代码请登录后点击上方下载按钮下载查看