task 3 code
This commit is contained in:
parent
61995aa06c
commit
ca1a1bff4a
BIN
image/.DS_Store
vendored
Normal file
BIN
image/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
image/elink.webp
Normal file
BIN
image/elink.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
image/evil.webp
Normal file
BIN
image/evil.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
BIN
image/img1.png
Normal file
BIN
image/img1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
image/img2.png
Normal file
BIN
image/img2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5 KiB |
BIN
image/img3.png
Normal file
BIN
image/img3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
image/img4.png
Normal file
BIN
image/img4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
BIN
image/img5.png
Normal file
BIN
image/img5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 MiB |
BIN
image/involv.webp
Normal file
BIN
image/involv.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
81
index.html
Normal file
81
index.html
Normal 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
36
script.js
Normal 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
77
style.css
Normal 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%;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in a new issue