veerjot_dml/swipe_slider
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: veerjot_dml:61995aa06c1aa1956f8600f0cb95e109499ae420
Branches Tags
veerjot_dml:main
veerjot_dml:dev
...
compare: veerjot_dml:cd7a811b882120cdd3edee1761b6149552a27a3e
Branches Tags
veerjot_dml:main
veerjot_dml:dev

2 commits
61995aa06c ... cd7a811b88

Author SHA1 Message Date
Sumit Kumar cd7a811b88 Merge pull request 'task 3 code' (#1) from dev into main 
Reviewed-on: #1
 2025-01-02 10:00:50 +00:00
veerjot_dm ca1a1bff4a task 3 code 2024-12-30 12:12:18 +05:30
13 changed files with 194 additions and 0 deletions
Show stats Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View file

Binary file not shown.

BIN
image/.DS_Store vendored Normal file
View file

Binary file not shown.

BIN
image/elink.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
image/evil.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
image/img1.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
image/img2.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

BIN
image/img3.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
image/img4.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
image/img5.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 MiB

BIN
image/involv.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

81
index.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Service Sliders</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="slider">
<div class="swiper" id="partners">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="image/img1.png" alt="Brand 1" />
</div>
<div class="swiper-slide">
<img src="image/img2.png" alt="Brand 2" />
</div>
<div class="swiper-slide">
<img src="image/img3.png" alt="Brand 3" />
</div>
<div class="swiper-slide">
<img src="image/img4.png" alt="Brand 4" />
</div>
<div class="swiper-slide">
<img src="image/img5.png" alt="Brand 5" />
</div>
</div>
</div>
</div>
<div class="services-container">
<div class="description">
<div class="swiper" id="services-info">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p>EarthLink Fiber Internet offers high-speed, reliable connections with speeds up to 5 Gbps. It provides a stable, secure service with no data caps or throttling</p>
</div>
<div class="swiper-slide">
<p>Evil Genius Games specializes in creating strategy and simulation games where players take on the role of a villain, building secret lairs and executing diabolical plans.</p>
</div>
<div class="swiper-slide">
<p>Involved parenting emphasizes active participation in a child's life, fostering emotional support and guidance. Resources include books, workshops.</p>
</div>
</div>
</div>
</div>
<div class="image-slider">
<div class="swiper" id="services-images">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="image/elink.webp" alt="Service 1" />
</div>
<div class="swiper-slide">
<img src="image/evil.webp" alt="Service 2" />
</div>
<div class="swiper-slide">
<img src="image/involv.webp" alt="Service 3" />
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="script.js" defer></script>
</body>
</html>

36
script.js Normal file
View file

@ -0,0 +1,36 @@
const partnersSwiper = new Swiper('#partners', {
slidesPerView: 4,
loop: true,
autoplay: {
delay: 0,
disableOnInteraction: false,
},
speed: 2000,
});
const partnersSliderElement = document.querySelector('#partners');
partnersSliderElement.addEventListener('mouseenter', () => {
partnersSwiper.autoplay.stop();
});
partnersSliderElement.addEventListener('mouseleave', () => {
partnersSwiper.autoplay.start();
});
const servicesImagesSwiper = new Swiper('#services-images', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
});
const servicesInfoSwiper = new Swiper('#services-info', {
loop: true
});
servicesImagesSwiper.controller.control = servicesInfoSwiper;
servicesInfoSwiper.controller.control = servicesImagesSwiper;

77
style.css Normal file
View file

@ -0,0 +1,77 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.slider {
width: 100%;
overflow: hidden;
background: rgba(255, 255, 255, 0.599);
padding: 20px 0;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
align-items: center;
max-width: 240px;
cursor: pointer;
}
.swiper-slide1 {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
text-align: center;
width: 100%;
padding: 20px;
background: white;
margin-left: -30px;
transition: transform 0.3s, opacity 0.3s;
opacity: 0.5;
transform: scale(0.9);
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
text-align: center;
width: 100%;
padding: 20px;
background: white;
margin-left: -30px;
}
.services-container{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.description{
width: 40%;
padding-right: 10px;
}
.image-slider{
width: 50%;
}
@media(max-width: 768px){
.services-container{
flex-direction: column;
}
.description,.image-slider{
width: 100%;
}
}