<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Slider — made-in-china style (demo)</title>
<!-- Swiper CSS (CDN) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<style>
/* Basic page layout */
body{font-family: Arial, Helvetica, sans-serif; margin:0; background:#f6f7f9}
.container{max-width:720px;margin:24px auto;padding:0 16px}
/* Banner area */
.banner-total{position:relative}
.banner-box{position:relative;overflow:hidden;border-radius:8px}
.banner-wrap{display:block; height:400px; background-size:cover; background-position:center; color:#fff; text-decoration:none}
/* Content inside each slide */
.banner-item-content{
position:absolute;
left:32px;
top:32px;
right:32px;
bottom:32px;
display:flex;
flex-direction:column;
/*justify-content:flex-end;*/
justify-content: space-around;
pointer-events:none
}
.banner-item-title{
/*font-size:28px;*/
font-size:42px;
font-weight:700;
margin-bottom:12px;
text-shadow:0 3px 14px rgba(0,0,0,0.35)
}
.banner-item-prod{
/*background:rgba(0,0,0,0.25);
backdrop-filter: blur(4px);*/
padding:10px;
border-radius:6px;
pointer-events:auto
}
.banner-item-prod-list{display:flex;gap:8px;align-items:center;justify-content: center;}
.banner-item-prod-img{
width:120px;
height:120px;
object-fit:cover;
border-radius:4px;
border:2px solid rgba(255,255,255,0.14)
}
/* Navigation arrows custom */
.swiper-button-next, .swiper-button-prev{color:#fff;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.35)}
.swiper-button-next:after, .swiper-button-prev:after{font-size:18px}
/* Pagination bullets */
.swiper-pagination-bullet{background:rgba(255,255,255,0.6)}
.swiper-pagination-bullet-active{background:#fff}
/* Responsive */
@media (max-width:900px){
.banner-item-title{font-size:20px}
.banner-item-prod-img{width:64px;height:44px}
.banner-wrap{height:300px}
}
@media (max-width:480px){
.banner-wrap{height:220px}
.banner-item-content{left:12px;right:12px;bottom:12px}
.banner-item-title{font-size:16px}
.banner-item-prod-list{gap:6px}
}
</style>
</head>
<body>
<div class="container">
<h2 style="margin:8px 0 16px">Demo slider — giống style made-in-china.com</h2>
<!-- Slider main container -->
<div class="banner-total">
<div class="swiper banner-box" id="homeSlider">
<div class="swiper-wrapper">
<!-- Slide 1 -->
<div class="swiper-slide banner-wrap" style="background-image:url('https://www.micstatic.com/mic-search/img/home-2019/banner/pc_1440_red.jpg?_v=1764909545533')">
<div class="banner-item-content">
<div class="banner-item-title">Keep sourcing infrared therapy device</div>
<div class="banner-item-prod">
<div class="banner-item-prod-list">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00OGDklKvtharn/Wireless-Control-41600LEDs-Adjustable-Pulse-LED-Infrared-Red-Light-Therapy-Bed-Device.jpg" alt="prod1">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00mopcUJVqLQbO/Warm-Jade-Massage-Equipment-Medical-Device-Infrared-Energy-Therapy.jpg" alt="prod2">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00ZchkOGsPwCqy/Full-Body-Physiotherapy-Blue-Light-Therapie-Machine-Photodynamic-Infrared-Light-Therapy-Device.jpg" alt="prod3">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00AeahnyWgEpRM/Full-Body-Fat-Loss-Skin-Rejuvenation-Red-Light-Therapy-Bed-LED-Infrared-Light-Therapy-Device-for-Beauty-Equipment.jpg" alt="prod4">
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="swiper-slide banner-wrap" style="background-image:url('https://www.micstatic.com/mic-search/img/home-2019/banner/pc_1440_blue.jpg?_v=1764909545533')">
<div class="banner-item-content">
<div class="banner-item-title">Keep sourcing Output Device</div>
<div class="banner-item-prod">
<div class="banner-item-prod-list">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00zWCkOEMlCUpn/Acrel-Multi-Circuit-Intelligent-Power-Collection-and-Monitoring-Device-Amc200L-8e3-2-Way-Switch-Output-with-LCD-Display.jpg" alt="o1">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00JNKowPrLlYgq/500L-H-Integrated-Ultrapure-Water-Device-with-Stable-Ultrapure-Water-Output.jpg" alt="o2">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00PMmvBHsWSIbo/900W-Red-Light-Therapy-Device-with-180-LEDs-and-298W-Output.jpg" alt="o3">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00qfWUYygGVDcP/Sonoscape-S2-Portable-Color-Doppler-Echo-Machine-Echocardiography.jpg" alt="e2">
</div>
</div>
</div>
</div>
<!-- Slide 3 -->
<div class="swiper-slide banner-wrap" style="background-image:url('https://www.micstatic.com/mic-search/img/home-2019/banner/pc_1440_purple.jpg?_v=1764909545533')">
<div class="banner-item-content">
<div class="banner-item-title">Keep sourcing echocardiography</div>
<div class="banner-item-prod">
<div class="banner-item-prod-list">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00ecfiCbIqLwGy/High-End-Echocardiography-with-Four-Fully-Active-Probe-Interfaces.jpg" alt="e1">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00qfWUYygGVDcP/Sonoscape-S2-Portable-Color-Doppler-Echo-Machine-Echocardiography.jpg" alt="e2">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00wZBTsuczAUpF/Hot-Selling-Cardiac-Echocardiography-with-Best-Performance.jpg" alt="e3">
<img class="banner-item-prod-img" src="https://image.made-in-china.com/43f34j00qfWUYygGVDcP/Sonoscape-S2-Portable-Color-Doppler-Echo-Machine-Echocardiography.jpg" alt="e2">
</div>
</div>
</div>
</div>
</div>
<!-- Navigation -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
</div>
<!-- Swiper JS (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('#homeSlider', {
loop: true,
slidesPerView: 1,
spaceBetween: 0,
speed: 900,
autoplay: {
delay: 4500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// emulate the "centered" look from made-in-china by enabling watchOverflow
watchOverflow: true,
});
// Optional: pause autoplay on hover
const sliderEl = document.getElementById('homeSlider');
sliderEl.addEventListener('mouseenter', () => swiper.autoplay.stop());
sliderEl.addEventListener('mouseleave', () => swiper.autoplay.start());
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét