swiper实现全屏卡片堆叠可拖拽视觉差异幻灯片切换效果代码-html代码-BFW代码库

代码语言：html
所属分类：幻灯片
代码描述：swiper实现全屏卡片堆叠可拖拽视觉差异幻灯片切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Nabla:EHLT@24&display=swap" rel="stylesheet">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper-bundle.11.0.4.css">
  
<style>
*:not(style, head),
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #222;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 110%;
  font-weight: 400;
  line-height: 150%;
}

body article {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sectionWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.swiper {
  width: 100%;
  height: 100%;
  padding: 50px 20px;
  overflow: visible;
}

.swiper .parallax-bg {
  position: absolute;
  right: -5%;
  top: -50%;
  width: 200%;
  height: 200%;
  background-image: url("https://rb.gy/wk4c6n");
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.swiper .swiper-wrapper {
  align-items: center;
}

.swiper .swiper-slide {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: rgba(102, 102, 102, 0.8);
  border-radius: 7px;
  padding: 10px;
  margin: 0;
  cursor: grab;
  user-select: none;
  text-wrap: pretty;
}

.swiper .swiper-slide::before {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 80px;
  border-bottom: 1px dashed white;
  border-right: 1px solid white;
  border-radius: 0 0 7px 0;
  content: "";
  transition: all 0.3s ease;
}

.swiper .swiper-slide::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 80px;
  border-top: 1px solid white;
  border-left: 1px dashed white;
  border-radius: 7px 0 0 0;
  content: "";
  transition: all 0.3s ease;
}

.swiper .swiper-slide:hover {
  background: linear-gradient(
    135deg,
    #ff1e9c99,
    #ff1ea499,
    #ff1fbc99,
    #ff1fde99,
    #f620ff99,
    #c721ff99,
    #9723ff99,
    #6a24ff99,
    #4125ff99,
    #252aff99,
    #2641ff99,
    #2649ff99
  );
}

.swiper .swiper-slide:hover::before,
.swiper .swiper-slide:hover::after {
  width: 170px;
  height: 170px;
  transition: all 0.3s ease;
}

.swiper .swiper-slide .cardPopout {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 7px;
  padding: 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.swiper .swiper-slide img {
  width: 100%;
  height: auto;
  margin-bottom: 25px;
  border-radius: 5px;
}

.swiper .swiper-slide h2 {
  font-size: 200%;
  line-height: 110%;
  margin: 0 0 7px 0;
  color: white;
  font-family: "Nabla", system-ui;
  font-variation-settings: "EDPT" 100, "EHLT" 24;
  background-color: #111;
  border-radius: 100%;
}

.swiper .swiper-slide h4 {
  font-size: 110%;
  line-height: 120%;
  font-weight: 700;
  margin: 0 0 13px 0;
  color: #bbb;
  font-style: italic;
}

.swiper .swiper-slide figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0 0 20px 0;
  padding-left: 20px;
  border-left: 1px solid white;
}

.swiper .swiper-slide figcaption p {
  color: #999;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swiper .swiper-slide a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border-radius: 3px;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  transition: all 0.6s ease !important;
}

.swiper .swiper-slide a:hover {
  color: black;
  transition: all 0.6s ease;
}

.swiper .swiper-slide a::after {
  position: absolute;
  right: 100%;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #2649ff;
  content: "";
  z-index: -1;
  transition: all 0.6s ease;
}

.swiper .swiper-slide a:hover::after {
  right: 0;
  transition: all 0.6s ease;
}

.swiper .swiper-slide a svg {
  width: 23px;
  height: auto;
  fill: white;
  margin-left: 5px;
  transition: all 0.6s ease;
}

.swiper .swiper-slide a:hover svg {
  margin-left: 10px;
  fill: black;
  transition: all 0.6s ease;
}

.swiper .swiper-scrollbar {
  --swiper-scrollbar-bottom: 0px;
  --swiper-scrollbar-size: 10px;
}

@media (max-height: 550px) {
  .swiper .swiper-slide figcaption p {
    -webkit-line-clamp: 2;
  }
}

@media (max-height: 490px) {
  .swiper .swiper-slide figcaption p {
    -webkit-line-clamp: 1;
  }
}

@media (max-height: 460px) {
  .swiper .swiper-slide figcaption p {
    display: none;
  }
  .swiper .swiper-slide h4 {
    margin: 0;
  }
}

@media (max-height: 430px) {
  .swiper .swiper-wrapper {
    position: relative;
    bottom: 6px;
  }
}

@media (max-width: 750px) {
  .swiper .parallax-bg {
    width: 320%;
  }
}
</style>


  
  
</head>

<body>
  <article>

  <section class="sectionWrapper">

    <section class="swiper">

      <div class="parallax-bg" data-swiper-parallax="600" data-swiper-parallax-scale="0.85"></div>

      <div class="swiper-wrapper">

        <figure class="swiper-slide">

          <div class="cardPopout" data-swiper-parallax="30" data-swiper-parallax-scale="0.9" data-swiper-parallax-opacity="0.8" data-swiper-parallax-duration="1000">

            <img src="//repo.bfw.wiki/bfwrepo/image/5e3240c626ad7.png" alt="jellyfish" width="800" height="400" data-swiper-parallax="80" data-swiper-parallax-duration="2000">

            <h2 class="title" data-swiper-parallax="80" data-swiper-parallax-duration="1000">
              Jellyfish
            </h2>

            <h4 class="subtitle" data-swiper-parallax="80" data-swiper-parallax-duration="1500">
              Not Made of Jelly
            </h4>

            <figcaption data-swiper-parallax="80" data-swiper-parallax-duration="1250">

              <p>
                Jellyfish are fascinating marine creatures known for their graceful and mesmerizing movements in the water. Belonging to the phylum Cnidaria, these gelatinous animals come in various shapes, sizes, and colors. One distinctive feature of jellyfish is their umbrella-shaped bell, which pulsates to propel them through the ocean.
              </p>

            </figcaption>

            <a href="javascript:void(0);" title="Continue Reading" data-swiper-parallax="80" data-swiper-parallax-opacity="0.2" data-swiper-parallax-duration="1750">
              Continue Reading
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" />
              </svg>
            </a>

          </div>

        </figure>

        <figure class="swiper-slide">

          <div class="cardPopout" data-swiper-parallax="30" data-swiper-parallax-scale="0.9" data-swiper-parallax-opacity="0.8" data-swiper-parallax-duration="1000">

            <img src="//repo.bfw.wiki/bfwrepo/image/5e3240ab7f831.png" alt="clownfish" width="800" height="400" data-swiper-parallax="80" data-swiper-parallax-duration="2000">

            <h2 class="title" data-swiper-parallax="80" data-swiper-parallax-duration="1000">
              Clownfish
            </h2>

            <h4 class="subtitle" data-swiper-parallax="80" data-swiper-parallax-duration="1500">
              Clowning Around
            </h4>

            <figcaption data-swiper-parallax="80" data-swiper-parallax-duration="1250">

              <p>
                Clownfish, renowned for their vibrant colors and distinctive markings, are small saltwater fish belonging to the family Pomacentridae. Found in warm oceanic waters, particularly in the Indo-Pacific region, these fish have become widely recognized and popularized, in part, thanks to the animated film "Finding Nemo."
              </p>

            </figcaption>

            <a href="javascript:void(0);" title="Continue Reading" data-swiper-parallax="80" data-swiper-parallax-opacity="0.2" data-swiper-parallax-duration="1750">
              Continue Reading
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" />
              </svg>
            </a>

          </div>

        </figure>

        <figure class="swiper-slide">

          <div class="cardPopout" data-swiper-parallax="30" data-swiper-parallax-scale="0.9" data-swiper-parallax-opacity="0.8" data-swiper-parallax-duration="1000">

            <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" alt="blue tang" width="800" height="400" data-swiper-parallax="80" data-swiper-parallax-duration="2000">

            <h2 class="title" data-swiper-parallax="80" data-swiper-parallax-duration="1000">
              Blue Tang
            </h2>

            <h4 class="subtitle" data-swiper-parallax="80" data-swiper-parallax-duration="1500">
              42 Wallaby Way, Sydney
            </h4>

            <figcaption data-swiper-parallax="80" data-swiper-parallax-duration="1250">

              <p>
                The blue tang, scientifically known as Paracanthurus hepatus, is a striking marine fish celebrated for its vivid blue coloration and unique body shape. Native to the Indo-Pacific region, blue tangs are commonly found in coral reefs, lagoons, and tropical coastal waters.
              </p>

            </figcaption>

            <a href="javascript:void(0);" title="Continue Reading" data-swiper-parallax="80" data-swiper-parallax-opacity="0.2" data-swiper-parallax-duration="1750">
              Continue Reading
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8" />
              </svg>
            </a>

          </div>

        </figure>

        <figure class="swiper-slide">

          <div class="cardPopout" data-swiper-parallax="30" data-swiper-parallax-scale="0.9" data-swiper-parallax-opacity="0.8" data-swiper-parallax-duration="1000">

            <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" alt="Queen Angelfish" width="800" height="400" data-swiper-parallax="80" data-swiper-parallax-duration="2000">

            <h2 class="title" data-swiper-parallax="80" data-swiper-parallax-duration="1000">
              Queen Angelfish
            </h2>

            <h4 class="subtitle" data-swiper-parallax="80" data-swiper-parallax-duration="1500">
              So Angelic!
            </h4>

            <figcaption data-swiper-parallax="80" data-swiper-parallax-duration="1250">

              <p>
                The queen angelfish (Holacanthus ciliaris) is a dazzling and vibrant species of angelfish that inhabits the warm coral reefs of the Western Atlantic, particularly in the Caribbean Sea and the Gulf of Mexico. Renowned for its striking and intricate coloration, the queen angelfish is a favorite among divers and underwater enthusiasts.
              </p>

            </figcaption>

            <a href="javascript:void(0);" title="Continue Reading" data-swiper-parallax="80" data-swiper-parallax-opacity="0.2" data-swiper-parallax-duration="1750">
              Continue Reading
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right-short" viewBox="0 0 16 16">
        .........完整代码请登录后点击上方下载按钮下载查看