In my Vue project, I am creating a dynamic card display that scrolls horizontally on mobile screens. This section functions as a testimonial carousel where users can swipe left or right to view different testimonials.
While I have successfully applied a left margin to the cards, I am facing an issue with adding a right margin to the final card so that it aligns at the center of the screen when scrolled.
You can preview the code sandbox here: . Please note that this layout is optimized for mobile but you may also notice the problem in desktop view.
The current problem occurs when scrolling all the way to the right, causing the white background of the last card to extend beyond the edge which is not the intended behavior.
<template>
<div class="homePageTwo">
<div class="cardHolder">
<div class="cardSpace" v-for="card in cards" :key="card.index">
<SlidingCard :title="card.title" :content="card.content" :icon="card.icon"/>
</div>
</div>
</div>
</template>
<script>
import SlidingCard from "./SlidingCard.vue";
export default {
name: "App",
components: {
SlidingCard
},
data() {
return {
cards: [
{
title: "Food Services",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
title: "Assisted Living",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
title: "Retail",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
},
{
title: "Education",
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
}
]
};
}
};
</script>
<style>
.homePageTwo {
height: 100vh;
background-color: #f7f8fc;
padding-top: 3rem;
}
.cardHolder {
display: flex;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: mandatory;
scroll-snap-type: x mandatory;
}
.cardSpace {
padding: 2.5rem;
background-color: #ffffff;
margin-left: 1rem;
margin-right: 1rem;
}
</style>
<template>
<div class="slidingCard">
<div class="photoHolder">
<img class="homePageOneImg" :alt="alt" :src="icon">
</div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: "SlidingCard",
data() {
return {};
},
props: ["title", "content", "icon", "alt"]
};
</script>
<style scoped>
.slidingCard {
background-color: #ffffff !important;
width: 60vw;
display: inline-flex;
flex-direction: column;
position: relative;
scroll-snap-align: center;
}
.photoHolder {
height: 10rem;
line-height: 10rem;
border-radius: 90px;
background-color: #f7f8fc;
width: 8rem;
margin: auto;
}
img {
vertical-align: middle;
height: 75px;
width: 75px;
}
h1 {
font-size: 18px;
font-weight: bold;
}
p {
font-size: 1rem;
white-space: normal !important;
}
</style>