113 lines
4.4 KiB
HTML
113 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Our Partners & Services</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Our Partners</h1>
|
|
<section class="partner-slider">
|
|
<div class="swiper mySwiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="lamborghini.svg" alt="Brand 1"></div>
|
|
<div class="swiper-slide"><img src="bosch-service-1.svg" alt="Brand 2"></div>
|
|
<div class="swiper-slide"><img src="globus-1.svg" alt="Brand 3"></div>
|
|
<div class="swiper-slide"><img src="icloud.svg" alt="Brand 4"></div>
|
|
<div class="swiper-slide"><img src="apple-14.svg" alt="Brand 5"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<h1>Our Services</h1>
|
|
<div class="container">
|
|
<section class="slider-container">
|
|
<div class="swiper infoSlider">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide service-description">
|
|
<h2>Service 1</h2>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis rem cumque et aut eaque
|
|
mollitia aperiam consequuntur delectus qui eligendi? Modi, error nisi adipisci reprehenderit
|
|
quas voluptatem libero quidem temporibus.</p>
|
|
</div>
|
|
<div class="swiper-slide service-description">
|
|
<h2>Service 2</h2>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis rem cumque et aut eaque
|
|
mollitia aperiam consequuntur delectus qui eligendi? Modi, error nisi adipisci reprehenderit
|
|
quas voluptatem libero quidem temporibus.</p>
|
|
</div>
|
|
<div class="swiper-slide service-description">
|
|
<h2>Service 3</h2>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis rem cumque et aut eaque
|
|
mollitia aperiam consequuntur delectus qui eligendi? Modi, error nisi adipisci reprehenderit
|
|
quas voluptatem libero quidem temporibus.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="slider-container">
|
|
<div class="swiper squareSlider">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="a.webp" alt="Service 1"></div>
|
|
<div class="swiper-slide"><img src="b.webp" alt="Service 2"></div>
|
|
<div class="swiper-slide"><img src="c.webp" alt="Service 3"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
|
|
<script>
|
|
const swiper = new Swiper(".mySwiper", {
|
|
slidesPerView: 4,
|
|
spaceBetween: 30,
|
|
loop: true,
|
|
autoplay: {
|
|
delay: 2000,
|
|
disableOnInteraction: false,
|
|
},
|
|
breakpoints: {
|
|
320: { slidesPerView: 1 },
|
|
768: { slidesPerView: 2 },
|
|
1024: { slidesPerView: 4 },
|
|
},
|
|
});
|
|
|
|
const slider = document.querySelector('.swiper');
|
|
|
|
slider.addEventListener('mouseenter', () => {
|
|
swiper.autoplay.stop();
|
|
});
|
|
|
|
slider.addEventListener('mouseleave', () => {
|
|
swiper.autoplay.start();
|
|
});
|
|
|
|
const squareSlider = new Swiper(".squareSlider", {
|
|
slidesPerView: 1,
|
|
spaceBetween: 30,
|
|
loop: true,
|
|
// autoplay: {
|
|
// delay: 2500,
|
|
// disableOnInteraction: false,
|
|
// },
|
|
});
|
|
|
|
const infoSlider = new Swiper(".infoSlider", {
|
|
slidesPerView: 1,
|
|
loop: true,
|
|
// autoplay: {
|
|
// delay: 2500,
|
|
// disableOnInteraction: false,
|
|
// },
|
|
});
|
|
|
|
squareSlider.controller.control = infoSlider;
|
|
infoSlider.controller.control = squareSlider;
|
|
</script>
|
|
</body>
|
|
|
|
</html> |