Building a card carousel component in Vue JS

Question

Building a card carousel component in Vue JS

Struggling with creating a unique card slider using Vue JS? After exploring npm packages like Vue Carousel 3D and Vue Slick, I haven't found the ideal slider for my project. My specific card slider setup is showcased below:

https://i.sstatic.net/GiNcn.png

In this design, there are three images displayed - one in front and two behind. The functionality I aim to achieve involves pushing the front image backward upon button press, while bringing the back image forward.

https://i.sstatic.net/kHjKO.png

I've scoured the web extensively, even delving into pure JavaScript options, yet have failed to find a suitable example. Any assistance you can provide would be greatly appreciated.

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

javascript css vue.js slider

Answer 1

Answer №1

Utilizing the existing styling, you have the option to manually cycle through it yourself. While the following example may not be the most aesthetically pleasing and there is likely a cleaner alternative to achieve this, here's an illustration:

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

Answer 2

Utilizing the existing styling, you have the option to manually cycle through it yourself. While the following example may not be the most aesthetically pleasing and there is likely a cleaner alternative to achieve this, here's an illustration:

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

Building a card carousel component in Vue JS

Answer №1

Similar questions

JWT authentication for restricted routes

Using PHP and JQuery to disable a button after the letter "U" is typed

The D3.extent() function is raising a TypeError because it is unable to iterate over the

Adding Font Awesome to your Vue and Nuxt.js project: A step-by-step guide

How do you utilize the beforeMount lifecycle method in Vue.js?

Dynamic options can now be accessed and modified using newly computed getters and setters

Count the number of distinct values in an array of objects

Elegant Decline of Javascript Functionality - Imported Web Assets

Guide on how to gather values into a variable from the DOM using jQuery

Intrigued by the connection between background and calc()?

Ways to simulate the route object in Vue 3 composition functions?

Is there a problem with addEventListener returning false?

What is the method to effectively conduct a testing procedure for JavaScript files that have been exported using

Tips for modifying the hue of the hint attribute within vue.js?

What is the reason for the failure of the jQuery code to disable the submit button in the following snippet?

Curious about the power of jQuery methods?

The React material-table only updates and rerenders the table when the data is updated twice

Choose a numeric value and then adjust it to display with exactly two decimal places

Angular HttpClient does not support cross-domain POST requests, unlike jQuery which does

Dealing with undefined or null values when using ReactJS with Formik