bambam_dml/sliding-page
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

Delete index.html

Browse source
This commit is contained in:
bambam_dml 2024-12-30 09:47:50 +00:00
parent e220efe174
commit c4e2461c5b
1 changed files with 0 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
index.html
View file

@ -1,113 +0,0 @@
<!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>