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

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

代码语言：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, .........完整代码请登录后点击上方下载按钮下载查看