I've got 12 cards and and made it to show 3 cards preview each in desktop , 2 cards preview each in tablet and 1 card preview each on mobile. Now the problem is that it works fine on desktop layout but on mobile and tablet layout it skips cards and shows only 6 cards on mobile and 8 cards on tablet layout. I've reviewed the steps and width but seems like 'I can't find the solution here is my JavaScript code
and my HTML code
and my CSS
.slider {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.slider_container {
display: flex;
overflow: hidden;
scroll-behavior: smooth;
}
.slider_nav_arrow{
width: 2rem;
}
.slider_nav{
background-color: transparent;
border: none;
margin: 1rem;
cursor: pointer;
}
.slider_container_box{
background-color: wheat;
min-width: 100%;
height: 20rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 1rem;
border-radius: 1rem;
gap: 1rem;
}
.slider_container_box p{
font-size: clamp(0.25rem, -0.632rem + 7.059vw, 1rem);
}
.slider_container_box_quotes{
width: 4rem;
align-self: self-start;
}
.slider_container_box_avatar-person{
display: flex;
justify-content: center;
align-items: center;
gap: 1.5rem;
align-self: self-start;
}
.slider_container_box_avatar-person img{
width: 3rem;
}
@media (min-width:700px){
.slider_container_box {
min-width: 50%;
}
.slider_container {
gap: 1rem;
}
}
@media (min-width:1100px){
.slider_container_box {
min-width: calc(100%/3);
}
.slider_container {
gap: 1rem;
}
}
<div class="slider">
<button class="slider_nav prev">
<img class="slider_nav_arrow" src="./images/left-arrow.png">
</button>
<div class="slider_container">
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
"This website is incredibly well-structured and fast.
The animations feel smooth and professional, and the overall
UX makes our team want to redesign our own platform. Amazing work!"
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/girl-1.png" alt="girl avatar">
<div>
<h4>Aiden Clarke</h4>
<h5>Product Manager, NovaTech Labs</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
"From the hero animation to the features section, the website feels
premium. It delivers exactly what modern SaaS brands need — clarity,
motion, and impact. Brilliant execution."
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/girl-2.png" alt="girl avatar">
<div>
<h4>Emily Zhao</h4>
<h5>Operations Director, SyncEdge Technologies</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
"The smooth interactions and consistent styling show real craftsmanship.
You made a complex design look simple and enjoyable. Easily one of the
most polished templates I’ve seen."
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/girl-3.png" alt="girl avatar">
<div>
<h4>Daniel Reed</h4>
<h5>Product Manager, NovaTech Labs</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
"I’m impressed by how everything responds perfectly on every device.
The counters, transitions, and content flow make the site feel alive.
Truly world-class work."
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/girl-4.png" alt="girl avatar">
<div>
<h4>Maya Hassan</h4>
<h5>Creative Strategist, PixelShift Studio</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
"This template has the exact modern SaaS aesthetic clients want:
clean typography, strong visual hierarchy, and eye-catching animations.
You nailed the balance between beauty and usability."
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/girl-5.png" alt="girl avatar">
<div>
<h4>Oliver Grant</h4>
<h5>Senior Developer, CoreLink Software</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
"The performance and code structure are solid. Lightweight, organized,
and easy to customize. It’s rare to find a template that looks this good
without sacrificing speed."
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/man-1.png" alt="man avatar">
<div>
<h4>Michael Carter</h4>
<h5>Founder, BrightPath Solutions</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
“The attention to detail is incredible. Clean code, responsive
layout, and lightning-fast performance.”
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/man-2.png" alt="man avatar">
<div>
<h4>Sophia Martinez</h4>
<h5>Senior Software Engineer, CloudSphere</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
“Our team was amazed at how polished and user-friendly
the website is. It elevated our brand instantly.”
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/man-3.png" alt="man avatar">
<div>
<h4>Noah Williams</h4>
<h5>Creative Director, FrameWorks Agency</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
“I’ve tried many systems, but this one stands out.
Simple, organized, and extremely professional.”
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/man-4.png" alt="man avatar">
<div>
<h4>Isabella Chen</h4>
<h5>Business Analyst, DataCore</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
“The UI design shows real expertise. Every interaction
feels smooth, natural, and intentional.”
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/man-5.png" alt="man avatar">
<div>
<h4>Benjamin Harris</h4>
<h5>E-Commerce Manager, UrbanMarket</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
“This website helped us build trust with our investors.
Clean structure, bold visuals, and a great experience.”
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/man-6.png" alt="man avatar">
<div>
<h4>Harper Lewis</h4>
<h5>IT Consultant, TechAxis</h5>
</div>
</div>
</div>
<div class="slider_container_box">
<img class="slider_container_box_quotes" src="./images/quotes.png">
<p>
“Very easy to navigate and perfectly structured. It
communicates professionalism from the first glance.”
</p>
<div class="slider_container_box_avatar-person">
<img src="./images/avatar/man-7.png" alt="man avatar">
<div>
<h4>Emma Johnson</h4>
<h5>Marketing Director, Visionary Media</h5>
</div>
</div>
</div>
</div>
<button class="slider_nav next">
<img class="slider_nav_arrow" src="./images/right-arrow.png">
</button>
</div>
const track = document.querySelector('.slider_container')
const boxes = document.querySelectorAll('.slider_container_box')
const btnPrv = document.querySelector('.prev')
const btnNext = document.querySelector('.next')
let currentIndex = 0
function updateSlider(){
const cardWidth = boxes[0].getBoundingClientRect().width
const styles = window.getComputedStyle(track)
const gap = parseFloat(styles.columnGap || styles.gap)|| 0
const width = cardWidth + gap
track.scrollTo({
left: currentIndex * width,
behavior:'smooth'
})
}
function getCardsPerView(){
if(window.innerWidth >= 1100)return 3
if(window.innerWidth >= 700) return 2
return 1
}
btnNext.addEventListener('click',()=>{
const step = getCardsPerView()
const maxIndex = boxes.length - step
if(currentIndex < maxIndex){
currentIndex += step
updateSlider()
}
})
btnPrv.addEventListener('click',()=>{
const step = getCardsPerView()
if(currentIndex > 0){
currentIndex -= step
if(currentIndex < 0) currentIndex = 0
updateSlider()
}
})
window.addEventListener('resize',()=>{
updateSlider()
})
