Creating card slider in Vue JS

Question

I am trying to create a card slider using Vue JS, I looked at various npm packages Vue Carousel 3D, Vue Slick and never found a suitable slider for my example, my card slider looks like this

As you can see, there are 3 images in the picture, the first in front, the second and the third behind, when you press the button, the first picture should go backward, and the back one should come forward.

I have been looking for a suitable example on the Internet for a long time, even using pure JavaScript, but I never found it, I will be very grateful if you can help me with something.

index.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>

style.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;
  }

4Fingers · Accepted Answer · 2021-04-05 01:34:58Z

Using the styling you already made you could just cycle through yourself. I'm pretty sure below example is ugly and there is a way cleaner and better way todo this, but as an example:

<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>

Collectives™ on Stack Overflow

Creating card slider in Vue JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related