Мобильная версия, мой HTML-код
и мой 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;
}
}
"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!"
Aiden Clarke
Product Manager, NovaTech Labs"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."
Emily Zhao
Operations Director, SyncEdge Technologies"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."
Daniel Reed
Product Manager, NovaTech Labs"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."
Maya Hassan
Creative Strategist, PixelShift Studio"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."
Oliver Grant
Senior Developer, CoreLink Software"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."
Michael Carter
Founder, BrightPath Solutions“The attention to detail is incredible. Clean code, responsive
layout, and lightning-fast performance.”
Sophia Martinez
Senior Software Engineer, CloudSphere“Our team was amazed at how polished and user-friendly
the website is. It elevated our brand instantly.”
Noah Williams
Creative Director, FrameWorks Agency“I’ve tried many systems, but this one stands out.
Simple, organized, and extremely professional.”
Isabella Chen
Business Analyst, DataCore“The UI design shows real expertise. Every interaction
feels smooth, natural, and intentional.”
Benjamin Harris
E-Commerce Manager, UrbanMarket“This website helped us build trust with our investors.
Clean structure, bold visuals, and a great experience.”
Harper Lewis
IT Consultant, TechAxis“Very easy to navigate and perfectly structured. It
communicates professionalism from the first glance.”
Emma Johnson
Marketing Director, Visionary Media
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()
})
Подробнее здесь: https://stackoverflow.com/questions/798 ... een-slides
