I’m trying to put together a simple full width carousel that endlessly loops through the cards. The issue is, I’m not sure how to get it endlessly looping the cards. Currently, I’ve only been able to get as far as scrolling back to the original card after hitting the last one instead of being able to scroll backward and forward to the first card/last card again infinitely.
Can anyone provide any insight?
HTML:
<div class="carousel-container">
<div class="carousel-wrapper">
<div class="carousel">
<div class="carousel-card">Card 1</div>
<div class="carousel-card">Card 2</div>
<div class="carousel-card">Card 3</div>
<div class="carousel-card">Card 4</div>
<div class="carousel-card">Card 5</div>
<div class="carousel-card">Card 6</div>
</div>
</div>
<div class="carousel-controls">
<button id="prev">Back</button>
<button id="next">Forward</button>
</div>
</div>
CSS:
.carousel-container {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.carousel-wrapper {
overflow: hidden;
width: 100%;
}
.carousel {
display: flex;
transition: transform 0.5s ease-in-out;
will-change: transform;
gap: 60px;
}
.carousel-card {
flex: 0 0 25%;
background: #ff6b6b;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
color: white;
text-align: center;
min-height: 200px;
box-sizing: border-box;
padding: 10px;
}
.carousel-controls {
text-align: center;
margin-top: 20px;
}
.carousel-controls button {
padding: 10px 20px;
font-size: 1rem;
border: none;
background: #4ecdc4;
color: white;
border-radius: 5px;
cursor: pointer;
margin: 0 10px;
transition: background 0.3s ease;
}
.carousel-controls button:hover {
background: #358f89;
}
jQuery:
jQuery(document).ready(function () {
const $carousel = jQuery('.carousel');
const $carouselWrapper = jQuery('.carousel-wrapper');
const $carouselCards = jQuery('.carousel-card');
const cardCount = $carouselCards.length; // Number of original cards
let currentIndex = 0; // Track current visible card index
const cardWidth = $carouselCards.outerWidth(true); // Width including margins
const totalCardCount = cardCount; // Only the original set of cards (no cloning)
// Function to center the active card in the middle of the container
function centerActiveCard() {
const wrapperWidth = $carouselWrapper.innerWidth();
const visibleWidth = wrapperWidth / 2;
const offset = -(cardWidth + 60) * currentIndex + visibleWidth - cardWidth / 2;
$carousel.css('transform', `translateX(${offset}px)`);
}
centerActiveCard();
// Function to scroll left (Previous button)
function scrollLeft() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = cardCount - 1; // Loop back to the last card of the set
}
centerActiveCard();
}
// Function to scroll right (Next button)
function scrollRight() {
currentIndex++;
if (currentIndex >= cardCount) {
currentIndex = 0; // Loop back to the first card of the set
}
centerActiveCard();
}
// Event listeners for navigation buttons
jQuery('#next').on('click', scrollRight);
jQuery('#prev').on('click', scrollLeft);
// Responsive adjustments
jQuery(window).on('resize', function () {
centerActiveCard();
});
});
Here’s a CodePen so you can see what I’ve got so far:
https://codepen.io/Paul-Moignard/pen/xbKzBNe
Thanks in advance for your help!
2
Answers
Summary of Problems and Fixes
Issue
Problem in Original Code
Card Cloning
No clones were created, causing breaks in scrolling. Added clones using clone() and adjusted starting positions accordingly.
Transition Reset
No logic to reset position after reaching clones. Used transitionend to reset positions when scrolling past the cloned cards.
Card Centering Offset calculation did not account for clones. Adjusted centerActiveCard() to use the width of the cloned cards for positioning.
Responsive Behavior No recalculation on window resize. Added resize event listener to recalculate offsets dynamically when the screen size changes.
Here is an updated jquery code
The issue you’re experiencing likely stems from how the width of the carousel is calculated and how the cloned cards are being appended. Specifically, the cards may not be respecting their original flex: 0 0 25% CSS rule because the parent carousel container’s width or gap handling is not correctly aligning with the expected layout. I’ll adjust the CSS and jQuery to fix the positioning and alignment issues.
Here’s the updated CSS with adjustments for consistent card widths and proper alignment:
and this is adjusted Jquery