时间戳

首页 > 解决方案 > 在 Vue JS 中创建卡片滑块

javascript - 在 Vue JS 中创建卡片滑块

问题描述

我正在尝试使用 Vue JS 创建一个卡片滑块，我查看了各种 npm 包 Vue Carousel 3D、Vue Slick，但从未找到适合我的示例的滑块，我的卡片滑块看起来像这样

在此处输入图像描述

可以看到，图片中有3张图片，第一张在前面，第二张在后面，当你按下按钮时，第一张图片应该向后，后面的应该向前。

在此处输入图像描述

我在网上找了一个合适的例子很长时间了，甚至使用纯JavaScript，但我一直没有找到，如果你能帮我做点什么，我将不胜感激。

索引.html

<div class="first_block">
    <h2>FEATURED SHOWS</h2>
    <div class="girls_gard_container">
      <img class="card_1" src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="Girl">
      <img class="card_2" src="https://images.unsplash.com/photo-1527455505333-9d3ac7adf523?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OXx8Zml2ZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80" alt="Girl">
      <img class="card_3" src="https://images.unsplash.com/photo-1597976618063-810eb50c84fb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8dGFtfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80" alt="Girl">
    </div>
</div>

样式.css

.first_block {
    padding: 0px 23px 0px 23px;
    margin: 5px;
  }
  
  .circle-wrap {
    margin: 0px 5px 0px 5px;
  }
  
  .third_block div h2 {
    font-size: 20px;
    font-family: Montserrat-Medium;
  }
  
  .first_block {
    width: 30%;
  }
  
  .first_block h2, .second_block h2 {
    font-family: Montserrat-Medium;
    margin-bottom: 0.3rem;
  }
  
  .first_block h2 {
    text-align: center;
    font-size: 20px;
  }

  .girls_gard_container {
    position: relative;
    bottom: 15px;
  }

  .card_1 {
    position: absolute;
    max-width: 100%;
    top: 70px;
    width: 100px;
    height: 238px;
  }
  
  .card_2 {
    position: absolute;
    max-width: 100%;
    top: 44px;
    left: 15px;
    width: 126.24px;
    height: 287px;
  }
  
  .card_3 {
    position: absolute;
    max-width: 100%;
    top: 20px;
    left: 25px;
    width: 240px;
    height: 331px;
  }

标签： javascriptcssvue.jsslider

解决方案

使用您已经制作的样式，您可以自己循环。我很确定下面的示例很丑陋，并且有一种更清洁、更好的方法可以做到这一点，但作为一个例子：

<template>
  <div>
    <div class="first_block">
      <button v-on:click="moveToNextCard()">Next</button>

      <h2>FEATURED SHOWS</h2>
      <div class="girls_gard_container">
        <img
          class="card_1"
          :src="cards[index % cards.length].img_url"
          alt="Girl"
        />
        <img
          class="card_2"
          :src="cards[(index + 1) % cards.length].img_url"
          alt="Girl"
        />
        <img
          class="card_3"
          :src="cards[(index + 2) % cards.length].img_url"
          alt="Girl"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    msg: String,
  },
  data() {
    return {
      index: 0,
      cards: [
        {
          id: 1,
          img_url:
            "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80",
        },
        {
          id: 2,
          img_url:
            "https://images.unsplash.com/photo-1527455505333-9d3ac7adf523?ixid=MXwxMjA3fDB8MHxzZWFyY2h8OXx8Zml2ZXxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80",
        },
        {
          id: 3,
          img_url:
            "https://images.unsplash.com/photo-1597976618063-810eb50c84fb?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8dGFtfGVufDB8fDB8&ixlib=rb-1.2.1&w=1000&q=80",
        },
      ],
    };
  },
  methods: {
    moveToNextCard() {
      this.index = (this.index + 1) % this.cards.length;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.first_block {
  padding: 0px 23px 0px 23px;
  margin: 5px;
}

.circle-wrap {
  margin: 0px 5px 0px 5px;
}

.third_block div h2 {
  font-size: 20px;
  font-family: Montserrat-Medium;
}

.first_block {
  width: 30%;
}

.first_block h2,
.second_block h2 {
  font-family: Montserrat-Medium;
  margin-bottom: 0.3rem;
}

.first_block h2 {
  text-align: center;
  font-size: 20px;
}

.girls_gard_container {
  position: relative;
  bottom: 15px;
}

.card_1 {
  position: absolute;
  max-width: 100%;
  top: 70px;
  width: 100px;
  height: 238px;
}

.card_2 {
  position: absolute;
  max-width: 100%;
  top: 44px;
  left: 15px;
  width: 126.24px;
  height: 287px;
}

.card_3 {
  position: absolute;
  max-width: 100%;
  top: 20px;
  left: 25px;
  width: 240px;
  height: 331px;
}
</style>

推荐阅读