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