latest changes
This commit is contained in:
parent
6152f3ed4a
commit
f61de0c0d6
126
index.html
126
index.html
|
|
@ -1,75 +1,75 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Swiper Slider</title>
|
<title>Swiper Slider</title>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
|
||||||
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
|
||||||
<link rel="stylesheet" href="style/index.css">
|
<link rel="stylesheet" href="style/index.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="slider-one-heading">
|
<div class="slider-one-heading">
|
||||||
<p>Our Partners</p>
|
<p>Our Partners</p>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-container partners-slider">
|
|
||||||
<div class="swiper">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="./assets/img1.jpg" alt="Image 1">
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="./assets/img2.jpg" alt="Image 2">
|
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="./assets/img3.png" alt="Image 3">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
<div class="swiper-container partners-slider">
|
||||||
<div class="featured-projects-section">
|
<div class="swiper">
|
||||||
<h2 class="project-title">Featured Projects</h2>
|
|
||||||
|
|
||||||
<div class="project-container">
|
|
||||||
<div class="swiper info-slider">
|
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<h3>EarthLink Fiber Internet</h3>
|
<img src="./assets/img1.jpg" alt="Image 1">
|
||||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<h3>Evil Genius Games</h3>
|
|
||||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<h3>Involvvely Parenting Resource</h3>
|
<img src="./assets/img2.jpg" alt="Image 2">
|
||||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="swiper-pagination"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="swiper image-slider">
|
|
||||||
<div class="swiper-wrapper">
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/involv.jpg" alt="Involvvely">
|
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<img src="assets/elink.jpg" alt="EarthLink">
|
<img src="./assets/img3.png" alt="Image 3">
|
||||||
</div>
|
|
||||||
<div class="swiper-slide">
|
|
||||||
<img src="assets/evil.jpg" alt="Evil">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
<div class="featured-projects-section">
|
||||||
<script src="js/script.js"></script>
|
<h2 class="project-title">Featured Projects</h2>
|
||||||
</body>
|
|
||||||
</html>
|
<div class="project-container">
|
||||||
|
<div class="swiper info-slider">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<h3>EarthLink Fiber Internet</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<h3>Evil Genius Games</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!</p>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<h3>Involvvely Parenting Resource</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit animi, officia optio neque temporibus excepturi doloremque libero deleniti molestiae possimus cumque similique autem rerum eaque! Dolores quidem provident officiis ea!</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="swiper-pagination"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="swiper image-slider">
|
||||||
|
<div class="swiper-wrapper">
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="assets/involv.jpg" alt="Involvvely">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="assets/elink.jpg" alt="EarthLink">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide">
|
||||||
|
<img src="assets/evil.jpg" alt="Evil">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
|
||||||
|
<script src="js/script.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
80
js/script.js
80
js/script.js
|
|
@ -1,44 +1,44 @@
|
||||||
const partnersSlider = new Swiper('.partners-slider .swiper', {
|
const partnersSlider = new Swiper('.partners-slider .swiper', {
|
||||||
direction: 'horizontal',
|
direction: 'horizontal',
|
||||||
loop: true,
|
loop: true,
|
||||||
autoplay: {
|
autoplay: {
|
||||||
delay: 800,
|
delay: 800,
|
||||||
disableOnInteraction: false,
|
disableOnInteraction: false,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const partnersSliderElement = document.querySelector('.partners-slider .swiper');
|
const partnersSliderElement = document.querySelector('.partners-slider .swiper');
|
||||||
if (partnersSliderElement) {
|
if (partnersSliderElement) {
|
||||||
partnersSliderElement.addEventListener('mouseenter', () => partnersSlider.autoplay.stop());
|
partnersSliderElement.addEventListener('mouseenter', () => partnersSlider.autoplay.stop());
|
||||||
partnersSliderElement.addEventListener('mouseleave', () => partnersSlider.autoplay.start());
|
partnersSliderElement.addEventListener('mouseleave', () => partnersSlider.autoplay.start());
|
||||||
}
|
}
|
||||||
|
|
||||||
const imageSlider = new Swiper(".image-slider", {
|
const imageSlider = new Swiper(".image-slider", {
|
||||||
loop: true,
|
loop: true,
|
||||||
slidesPerView: 3,
|
slidesPerView: 3,
|
||||||
centeredSlides: true,
|
centeredSlides: true,
|
||||||
effect: "coverflow",
|
effect: "coverflow",
|
||||||
coverflowEffect: {
|
coverflowEffect: {
|
||||||
rotate: 0,
|
rotate: 0,
|
||||||
depth: 200,
|
depth: 200,
|
||||||
stretch: 30,
|
stretch: 30,
|
||||||
modifier: 1,
|
modifier: 1,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
slideShadows: false,
|
slideShadows: false,
|
||||||
},
|
},
|
||||||
grabCursor: true,
|
grabCursor: true,
|
||||||
allowTouchMove: true,
|
allowTouchMove: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
const infoSlider = new Swiper(".info-slider", {
|
const infoSlider = new Swiper(".info-slider", {
|
||||||
loop: true,
|
loop: true,
|
||||||
grabCursor: true,
|
grabCursor: true,
|
||||||
allowTouchMove: true,
|
allowTouchMove: true,
|
||||||
pagination: {
|
pagination: {
|
||||||
el: '.swiper-pagination',
|
el: '.swiper-pagination',
|
||||||
clickable: true,
|
clickable: true,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
imageSlider.controller.control = infoSlider;
|
imageSlider.controller.control = infoSlider;
|
||||||
infoSlider.controller.control = imageSlider;
|
infoSlider.controller.control = imageSlider;
|
||||||
190
style/index.css
190
style/index.css
|
|
@ -1,112 +1,112 @@
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-one-heading {
|
.slider-one-heading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slider-one-heading p {
|
.slider-one-heading p {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-container {
|
.swiper-container {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: auto;
|
height: auto;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 300px;
|
height: 300px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide {
|
.swiper-slide {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.swiper-slide img {
|
.swiper-slide img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 50px;
|
padding: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featured-projects-section {
|
.featured-projects-section {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-title {
|
.project-title {
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-container {
|
.project-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-slider .swiper-slide img {
|
.image-slider .swiper-slide img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-slider .swiper-slide {
|
.info-slider .swiper-slide {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
/* opacity: 0.8; */
|
/* opacity: 0.8; */
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-slider .swiper-slide h3 {
|
.info-slider .swiper-slide h3 {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
/* opacity: 0.8; */
|
/* opacity: 0.8; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-slider .swiper-slide p {
|
.info-slider .swiper-slide p {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #555;
|
color: #555;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-container .swiper {
|
.project-container .swiper {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 500px;
|
height: 500px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue