SwiperCard.vue

<script setup lang="ts">
import { onMounted } from 'vue';
import Swiper from 'swiper/bundle';

onMounted(() => {
  // init Swiper:
  new Swiper('.mySwiper', {
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    coverflowEffect: {
      rotate: 0,
      stretch: 0,
      depth: 100,
      modifier: 2,
      slideShadows: true,
    },
    loop: false,
  });
});
</script>
<template>
  <div class="content fit center">
    <div class="section">
      <!-- Slider main container -->
      <div class="swiper mySwiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <div class="mycard">
              <div class="item">
                <p>
                  远游越山川，山川修且广。 <br />
                  振策陟崇丘，案辔遵平莽。<br />
                  夕息抱影寐，朝徂衔思往。 <br />
                  顿辔倚嵩岩，侧听悲风响。<br />
                  清露坠素辉，明月一何朗。 <br />
                  抚枕不能寐，振衣独长想。
                </p>
                <div class="details">
                  <h3>
                    <span>晋⋅ 陆机</span><br />
                    赴洛道中作二首 · 其二
                  </h3>
                </div>
              </div>
            </div>
          </div>

          <div class="swiper-slide">
            <div class="mycard">
              <div class="item">
                <p>
                  韶华争肯偎人住？已是滔滔去。 <br />
                  西风无赖过江来，<br />
                  历尽千山万水几时回？ <br />
                  秋声带叶萧萧落，莫响城头角！<br />
                  浮云遮月不分明， <br />
                  谁挽长江一洗放天青？
                </p>
                <div class="details">
                  <h3>
                    <span>清⋅ 董士锡</span><br />
                    虞美人 · 韶华争肯偎人住
                  </h3>
                </div>
              </div>
            </div>
          </div>

          <div class="swiper-slide">
            <div class="mycard">
              <div class="item">
                <p>
                  秦孝公据崤函之固，拥雍州之地， <br />
                  君臣固守以窥周室，<br />
                  有席卷天下，包举宇内， <br />
                  囊括四海之意，并吞八荒之心。<br />
                  当是时也，商君佐之，<br />
                  内立法度，务耕织，<br />
                  修守战之具；<br />
                  外连衡而斗诸侯。<br />
                  于是秦人拱手而取西河之外。<br />
                </p>
                <div class="details">
                  <h3>
                    <span>汉⋅ 贾谊</span><br />
                    过秦论
                  </h3>
                </div>
              </div>
            </div>
          </div>

          <div class="swiper-slide">
            <div class="mycard">
              <div class="item">
                <p>
                  秦孝公据崤函之固，拥雍州之地， <br />
                  君臣固守以窥周室，<br />
                  有席卷天下，包举宇内， <br />
                  囊括四海之意，并吞八荒之心。<br />
                  当是时也，商君佐之，<br />
                  内立法度，务耕织，<br />
                  修守战之具；<br />
                  外连衡而斗诸侯。<br />
                  于是秦人拱手而取西河之外。<br />
                </p>
                <div class="details">
                  <h3>
                    <span>汉⋅ 贾谊</span><br />
                    过秦论
                  </h3>
                </div>
              </div>
            </div>
          </div>

          <div class="swiper-slide">
            <div class="mycard">
              <div class="item">
                <p>
                  有一美人兮，见之不忘。 <br />
                  一日不见兮，思之如狂。<br />
                  凤飞翱翔兮，四海求凰。 <br />
                  无奈佳人兮，不在东墙。<br />
                  将琴代语兮，聊写衷肠。<br />
                  何日见许兮，慰我彷徨。<br />
                  愿言配德兮，携手相将。<br />
                  不得於飞兮，使我沦亡。<br />
                </p>
                <div class="details">
                  <h3>
                    <span>汉⋅ 司马相如</span><br />
                    凤求凰
                  </h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  // :deep(.swiper-3d .swiper-slide-shadow-left) {
  //   background-image: none;
  // }
  // :deep(.swiper-3d .swiper-slide-shadow-right) {
  //   background-image: none;
  // }
  :deep(.swiper-slide-active) {
    // filter: blur(0);
    background-color: #fff;
  }
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #9f6b65;
}
.swiper {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 280px;
  height: 370px;
  overflow: hidden;
  background-color: #d1ebff;
  border-radius: 10px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  // filter: blur(4px);
}
.mycard {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: #999;

  display: grid;
  align-items: center;

  .details {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;

    h3 {
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 1px;
      color: #9f6b65;
      line-height: 1.1em;
      text-align: right;
      margin-bottom: 0px;
      span {
        font-size: 12px;
        color: #666;
      }
    }
  }
}
</style>