.container { display: flex; gap: 10px; } .rad-card { position: relative; width: 350px; height: 300px; margin-right: 5px; margin-bottom: 30px; overflow: hidden; border: 0px solid #ddd; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: width 0.5s; } .rad-card__background-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('https://kenyago.54.152.73.194.nip.io/wp-content/uploads/sites/2/2023/03/6DD494B6-08DF-45AE-A5A3-0A67F3BAB572-scaled-e1680245703901.jpeg') no-repeat center center; background-size: cover; transition: filter 1s, transform 0.1s; } .rad-card__hover-content { position: absolute; top: 0; left: -400px; /* Start from the left outside of the card */ bottom: 0; width: 180px; display: flex; flex-direction: column; justify-content: center; padding: 20px; background-color: ; color: black; transition: left 0.3s; } .rad-card:hover .rad-card__hover-content { left: 0; opacity: 1; } .rad-card:hover .rad-card__background-content { opacity:0.3; } .rad-card__pretitle, .rad-card__title, .rad-card__description { margin: 0 0 10px; font-size: small; } .rad-button { padding: 10px 20px; border: none; background-color: rgb(0, 0, 128, 0.5); color: white; cursor: pointer; text-decoration: none; border-radius: 45% / 50%; /* Horizontal radius is 50%, vertical radius is 25% */ position: absolute; bottom: 5%; /* Adjust the bottom position as a percentage of the screen height */ left: 35%; /* Center the button horizontally */ transform: translateX(); /* transition: background-color 0.3s; } .rad-button:hover { background-color: rgb(0, 0, 128); color:white; } .rad-card__cta { text-align: right; /* Align the expand button to the right */ } /* .carousel-container { position: static; width:500px; height:400px; overflow: hidden; }*/ .carousel-container, .carousel-container2 { position: static; width: 100%; height: 350px; overflow: hidden; } .cards-wrapper, .cards-wrapper2 { display: flex; flex-wrap: nowrap; gap: 5px; height: 320px; width: 1300px; transition: transform 0.5s; } .flickity-button { background: transparent !important; margin-top: 0px; margin-right: 10px; border: none; outline: none; padding: 0px; cursor: pointer; transition: opacity 0.5s; } .flickity-button:hover { opacity: 0.8; } .flickity-button-icon { width: 20px; height: 20px; fill: rgb(0, 0, 0); /* This is the color of the arrow. Adjust if needed. */ } /* Optional: If you want to change the color on hover */ .flickity-button:hover .flickity-button-icon { fill: #555; } .rad-tile-grid__slider-container { display: none; } @media (max-width: 768px) { .carousel-container, .carousel-container2 { height: auto; width: 200vw; overflow: hidden; /* Hide overflow of cards */ .rad-tile-grid__slider-container { display: block; } } .cards-wrapper, .cards-wrapper2 { flex-wrap: nowrap; /* Prevent wrapping */ overflow-x: scroll; /* Horizontal scroll */ -webkit-overflow-scrolling: touch; /* smooth scrolling for iOS devices */ height: auto; width: 100%; overflow-y: hidden; /* No vertical scroll */ } .rad-card { flex: 0 0 45vw; /* Make card take up 90% of viewport width */ height: 300px; } .rad-card__hover-content { width: 90vw; } .rad-card:hover .rad-card__background-content { filter: none; transform: none; } .rad-card:hover .rad-card__hover-content { left: 0; opacity: 1; } .rad-tile-grid__slider-container { display: flex; justify-content: center; align-items: center; padding: 20px 0; } /* Hide arrows on mobile */ .flickity-button { display: none; } /* Styles for the range slider container */ .rad-tile-grid__slider-container { display: flex; justify-content: center; align-items: center; padding: 20px 0; } /* Styles for the range slider */ .rad__range-input-slider-for-carousel { width: 90%; height: 5px; border-radius: 5px; appearance: none; background-color: #e0e0e0; } .rad__range-input-slider-for-carousel::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background-color: #000; cursor: pointer; transition: background 0.3s; } .rad__range-input-slider-for-carousel::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background-color: #000; cursor: pointer; transition: background 0.3s; } .rad__range-input-slider-for-carousel:hover::-webkit-slider-thumb { background-color: #555; } .rad__range-input-slider-for-carousel:hover::-moz-range-thumb { background-color: #555; } document.addEventListener("DOMContentLoaded", function () { let position = 0; // track our position const cardWidth = 230; // width of card + gap (300px + 10px) const maxScroll = 7 * cardWidth - 2 * cardWidth; // 10 cards - 2 visible cards const cardsWrappers = document.querySelector(".cards-wrappers"); // Existing code for your next and previous buttons document.querySelector(".prevs").addEventListener("click", function () { position = Math.min(position + cardWidth, 0); // don't scroll beyond the first card cardsWrappers.style.transform = `translateX(${position}px)`; }); document.querySelector(".nexts").addEventListener("click", function () { if (Math.abs(position) === maxScroll) { // if at the end, jump back to start position = 0; } else { position = Math.max(position - cardWidth, -maxScroll); // don't scroll beyond the last card } cardsWrappers.style.transform = `translateX(${position}px)`; }); // Code for the range slider on mobile const rangeSliders = document.querySelector(".rad-tile-grid__sliders"); if (rangeSliders) { rangeSliders.addEventListener("input", function () { let totalScrollAmount = cardsWrappers.scrollWidth - document.querySelector(".carousel-containers").offsetWidth; let scrollPosition = totalScrollAmount * (this.value / this.max); cardsWrappers.scrollLeft = scrollPosition; }); } // Sync the range slider with actual scrolling on mobile cardsWrappers.addEventListener("scroll", function () { let totalScrollAmount = this.scrollWidth - document.querySelector(".carousel-containers").offsetWidth; let scrollRatio = this.scrollLeft / totalScrollAmount; document.querySelector(".rad-tile-grid__sliders").value = scrollRatio * document.querySelector(".rad-tile-grid__sliders").max; }); });