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

Applied swiper for infinite move pause on hover

Browse source
This commit is contained in:
shivam 2024-12-30 10:43:38 +05:30
commit edded4a267
11 changed files with 195 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5502
}

BIN
a.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 22 KiB

1
apple-14.svg Normal file
View file

@ -0,0 +1 @@
<svg height="2500" width="2158" xmlns="http://www.w3.org/2000/svg" viewBox="0 -3.552713678800501e-15 820 950"><path d="M404.345 229.846c52.467 0 98.494-20.488 138.08-61.465s59.38-88.626 59.38-142.947c0-5.966-.472-14.444-1.414-25.434-6.912.942-12.096 1.727-15.552 2.355-48.383 6.908-90.954 30.615-127.713 71.12-36.758 40.506-55.137 83.838-55.137 129.996 0 5.337.785 14.13 2.356 26.375zM592.379 950c37.387 0 78.701-25.59 123.943-76.772S796.122 761.915 820 692.836c-88.912-45.844-133.368-111.626-133.368-197.348 0-71.591 35.973-132.82 107.92-183.688-49.954-62.486-115.931-93.729-197.931-93.729-34.56 0-66.134 5.181-94.724 15.543l-17.908 6.594-24.035 9.42c-15.709 5.966-30.004 8.95-42.885 8.95-10.054 0-23.25-3.455-39.586-10.363l-18.38-7.536-17.436-7.065c-25.449-10.676-52.782-16.014-82-16.014-78.23 0-141.065 26.376-188.506 79.128C23.72 349.479 0 419.03 0 505.379c0 121.517 38.015 233.772 114.046 336.763C166.828 914.047 215.054 950 258.724 950c18.537 0 36.916-3.611 55.138-10.833l23.092-9.42 18.38-6.594c25.762-9.106 49.482-13.659 71.16-13.659 22.935 0 49.326 5.81 79.173 17.427l14.609 5.652C550.75 944.191 574.786 950 592.379 950z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
b.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

1
bosch-service-1.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
c.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

1
globus-1.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5.9 KiB

1
icloud.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2432" viewBox="85.04 232.402 412.912 401.703"><path d="M391.631 424.861l-4.477-1.119v-4.477c0-40.281-32.449-72.73-71.611-72.73-29.094 0-55.947 17.904-67.138 44.758l-3.355 7.834-5.595-5.596c-5.597-5.594-13.429-8.951-21.262-8.951a30.086 30.086 0 0 0-30.211 30.211l1.118 6.715-4.476 1.117c-21.26 6.715-35.807 25.736-35.807 46.996 0 26.854 22.38 49.234 49.234 49.234h185.745c25.734 0 48.113-21.262 48.113-48.115-1.114-22.379-16.78-41.401-40.278-45.877z" fill="#333"/><path d="M394.989 232.402H189.102c-58.185 0-104.062 46.996-104.062 104.062v193.578c0 58.186 46.995 104.062 104.062 104.062H393.87c58.187 0 104.062-46.996 104.062-104.062V337.583c1.118-58.185-45.877-105.181-102.943-105.181zm-11.19 298.76H198.054c-33.568 0-60.424-26.855-60.424-60.424 0-25.734 15.666-46.996 39.164-55.947 1.118-22.379 19.021-40.281 41.4-40.281 7.833 0 15.666 2.238 22.379 6.713 14.547-27.973 42.521-44.758 73.852-44.758 44.758 0 81.684 35.809 82.802 79.447 25.736 6.713 44.759 30.211 44.759 57.066-.001 31.328-25.737 58.184-58.187 58.184z" fill="#333"/><path d="M398.345 414.791c-2.237-44.758-38.044-79.445-82.802-79.445-31.33 0-60.424 17.904-73.852 44.76-6.714-4.477-14.546-6.715-22.379-6.715-22.379 0-40.282 17.902-41.401 40.281-23.498 8.951-39.163 31.33-39.163 55.947 0 33.568 26.855 60.424 60.424 60.424h185.746c32.448 0 59.304-26.854 59.304-59.305-2.237-25.737-20.14-49.233-45.877-55.947zm-14.546 105.181H198.054c-26.854 0-49.233-22.379-49.233-49.232 0-22.379 14.546-40.283 35.806-46.996l4.476-1.119-1.118-6.713c0-16.785 13.427-30.213 30.211-30.213 7.833 0 15.666 3.357 21.262 8.953l5.595 5.594 3.355-7.832c11.189-26.855 36.925-44.758 67.138-44.758 40.281 0 71.611 32.449 71.611 72.73v4.477l4.477 1.119c23.498 3.355 39.164 23.498 39.164 46.996-.003 25.734-21.264 46.994-46.999 46.994z" fill="#e4e4e4"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.8 KiB

113
index.html Normal file
View file

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

1
lamborghini.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 78 KiB

74
style.css Normal file
View file

@ -0,0 +1,74 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0;
flex-direction: column;
gap: 50px;
}
.partner-slider {
width: 50%;
max-width: 1200px;
overflow: hidden;
background-color: #862b2b;
border-radius: 20px;
box-shadow: 0 3px 10px 10px rgba(15, 12, 20, 0.1);
}
.swiper-slide img {
width: 10px;
height: auto;
border-radius: 15px;
transition: transform 0.3s;
}
.swiper-slide:hover img {
transform: scale(1.1);
}
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
.slider-container {
width: 28%;
height: 35vh;
max-width: 1200px;
background-color: #fff;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.swiper-slide img {
width: 220px;
height: 300px;
margin-top: 15px;
margin-left: 30%;
border-radius: 20px;
}
.service-description {
text-align: center;
font-size: 18px;
padding: 20px 0;
}
.service-description h2 {
font-size: 24px;
font-weight: 600;
color: #333;
margin-bottom: 40px;
}