Changes made and implement swiper library
This commit is contained in:
parent
327d13742e
commit
43d2c61505
85
index.html
85
index.html
|
|
@ -3,45 +3,64 @@
|
||||||
<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>Creating image Slider</title>
|
<title>Featured Projects</title>
|
||||||
<link rel="stylesheet" href="styles.css">
|
<!-- Include Swiper CSS -->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
|
||||||
|
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS -->
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<body>
|
<div class="featured-projects">
|
||||||
<h1>Featured Projects</h1>
|
|
||||||
<p>Learn how we are delivering cutting-edge solutions and transforming businesses.</p>
|
<div class="description-container">
|
||||||
<div class="featured-projects">
|
|
||||||
<div class="project-description">
|
<div class="project-description active" id="description-0">
|
||||||
<h1 id="project-title">EarthLink Fiber Internet</h1>
|
<h1>EarthLink Fiber Internet </h1>
|
||||||
<p id="project-text">
|
<p>Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance.</p>
|
||||||
Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance.
|
|
||||||
</p>
|
|
||||||
<div class="indicators">
|
|
||||||
<span id="indicator-0" onclick="goToProject(0)" class="active"></span>
|
|
||||||
<span id="indicator-1" onclick="goToProject(1)"></span>
|
|
||||||
<span id="indicator-2" onclick="goToProject(2)"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="project-cards">
|
<div class="project-description" id="description-1">
|
||||||
<img id="image-1" class="active" src="images/elink.webp" alt="EarthLink Project" onclick="nextProject()">
|
<h1>Evil Genius Games</h1>
|
||||||
<img id="image-2" src="images/evil.webp" alt="Involvvely Project" onclick="nextProject()">
|
<p>Evil Genius Games redefines immersive gaming experiences with their innovative tabletop RPGs. Our collaboration focused on creating a seamless digital platform to support their creative storytelling and gaming mechanics.</p>
|
||||||
<img id="image-3" src="images/involv.webp" alt="Evil Genius Project" onclick="nextProject()">
|
</div>
|
||||||
|
<div class="project-description" id="description-2">
|
||||||
|
<h1>Involvvely </h1>
|
||||||
|
<p>Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication. We developed a platform that empowers teams to work smarter and achieve their goals efficiently.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination-container">
|
||||||
|
<div class="pagination-button active" data-index="0"></div>
|
||||||
|
<div class="pagination-button" data-index="1"></div>
|
||||||
|
<div class="pagination-button" data-index="2"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="logos">
|
<!-- Image Section -->
|
||||||
<div class="logos-slide">
|
<div class="swiper">
|
||||||
<img src="./logos/3m.svg" alt="3M Logo" />
|
<div class="swiper-slide" data-index="0">
|
||||||
<img src="./logos/barstool-store.svg" alt="Barstool Store Logo" />
|
<img src="images/elink.webp" alt="EarthLink Project">
|
||||||
<img src="./logos/budweiser.svg" alt="Budweiser Logo" />
|
|
||||||
<img src="./logos/buzzfeed.svg" alt="Buzzfeed Logo" />
|
|
||||||
<img src="./logos/forbes.svg" alt="Forbes Logo" />
|
|
||||||
<img src="./logos/macys.svg" alt="Macy's Logo" />
|
|
||||||
<img src="./logos/menshealth.svg" alt="Men's Health Logo" />
|
|
||||||
<img src="./logos/mrbeast.svg" alt="MrBeast Logo" />
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
<div class="swiper-slide" data-index="1">
|
||||||
<script src="scripts.js"></script>
|
<img src="images/evil.webp" alt="Evil Genius Project">
|
||||||
|
</div>
|
||||||
|
<div class="swiper-slide" data-index="2">
|
||||||
|
<img src="images/involv.webp" alt="Involvvely Project">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="logos">
|
||||||
|
<div class="logos-slide">
|
||||||
|
<img src="./logos/3m.svg" alt="3M Logo" />
|
||||||
|
<img src="./logos/barstool-store.svg" alt="Barstool Store Logo" />
|
||||||
|
<img src="./logos/budweiser.svg" alt="Budweiser Logo" />
|
||||||
|
<img src="./logos/buzzfeed.svg" alt="Buzzfeed Logo" />
|
||||||
|
<img src="./logos/forbes.svg" alt="Forbes Logo" />
|
||||||
|
<img src="./logos/macys.svg" alt="Macy's Logo" />
|
||||||
|
<img src="./logos/menshealth.svg" alt="Men's Health Logo" />
|
||||||
|
<img src="./logos/mrbeast.svg" alt="MrBeast Logo" />
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||||
|
<script src="scripts.js"></script> <!-- Link to external JavaScript -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
81
scripts.js
81
scripts.js
|
|
@ -1,53 +1,48 @@
|
||||||
var copy = document.querySelector(".logos-slide").cloneNode(true);
|
var copy = document.querySelector(".logos-slide").cloneNode(true);
|
||||||
document.querySelector(".logos").appendChild(copy);
|
document.querySelector(".logos").appendChild(copy);
|
||||||
const projects = [
|
|
||||||
{
|
|
||||||
title: "EarthLink Fiber Internet",
|
|
||||||
text: "Earthlink epitomizes leadership in digital innovation, seamlessly blending advanced technology with unbeatable connectivity. Our team led the development and design efforts for their digital infrastructure, ensuring seamless integration and optimal performance.",
|
|
||||||
imageId: "image-1"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Evil Genius Games",
|
|
||||||
text: "Evil Genius Games redefines immersive gaming experiences with their innovative tabletop RPGs. Our collaboration focused on creating a seamless digital platform to support their creative storytelling and gaming mechanics.",
|
|
||||||
imageId: "image-2"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Involvvely",
|
|
||||||
text: "Involvvely simplifies team collaboration with innovative tools designed to enhance productivity and communication. We developed a platform that empowers teams to work smarter and achieve their goals efficiently.",
|
|
||||||
imageId: "image-3"
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
let currentProjectIndex = 0;
|
// Get all images, descriptions, pagination buttons
|
||||||
|
const images = document.querySelectorAll(".swiper-slide");
|
||||||
|
const descriptions = document.querySelectorAll(".project-description");
|
||||||
|
const paginationButtons = document.querySelectorAll(".pagination-button");
|
||||||
|
|
||||||
function updateProjectDisplay() {
|
let currentIndex = 0; // Start with the first slide
|
||||||
const titleElement = document.getElementById("project-title");
|
|
||||||
const textElement = document.getElementById("project-text");
|
|
||||||
|
|
||||||
// Update title and text
|
// Function to update the displayed content based on the current index
|
||||||
titleElement.textContent = projects[currentProjectIndex].title;
|
function updateContent(index) {
|
||||||
textElement.textContent = projects[currentProjectIndex].text;
|
// Hide all descriptions
|
||||||
|
descriptions.forEach((desc) => {
|
||||||
|
desc.classList.remove("active");
|
||||||
|
});
|
||||||
|
|
||||||
// Update active image
|
// Show the current description
|
||||||
document.querySelectorAll(".project-cards img").forEach((img, index) => {
|
const selectedDescription = document.getElementById(`description-${index}`);
|
||||||
img.classList.toggle("active", index === currentProjectIndex);
|
if (selectedDescription) {
|
||||||
});
|
selectedDescription.classList.add("active");
|
||||||
|
}
|
||||||
|
|
||||||
// Update indicators
|
// Update pagination active class
|
||||||
document.querySelectorAll(".indicators span").forEach((indicator, index) => {
|
paginationButtons.forEach((button) => {
|
||||||
indicator.classList.toggle("active", index === currentProjectIndex);
|
button.classList.remove("active");
|
||||||
});
|
});
|
||||||
}
|
paginationButtons[index].classList.add("active");
|
||||||
|
}
|
||||||
|
|
||||||
function nextProject() {
|
// Event listeners for image clicks
|
||||||
currentProjectIndex = (currentProjectIndex + 1) % projects.length;
|
images.forEach((image, index) => {
|
||||||
updateProjectDisplay();
|
image.addEventListener("click", () => {
|
||||||
}
|
currentIndex = index;
|
||||||
|
updateContent(currentIndex);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
function goToProject(index) {
|
// Event listeners for pagination buttons
|
||||||
currentProjectIndex = index;
|
paginationButtons.forEach((button, index) => {
|
||||||
updateProjectDisplay();
|
button.addEventListener("click", () => {
|
||||||
}
|
currentIndex = index;
|
||||||
|
updateContent(currentIndex);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// Initialize display
|
// Initialize the content (first image and description are visible)
|
||||||
updateProjectDisplay();
|
updateContent(currentIndex);
|
||||||
|
|
|
||||||
285
styles.css
285
styles.css
|
|
@ -1,204 +1,173 @@
|
||||||
body {
|
* {
|
||||||
font-family: Arial, sans-serif;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(-100%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logos {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 60px 0;
|
||||||
|
background: white;
|
||||||
|
white-space: nowrap;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logos:before,
|
||||||
|
.logos:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 250px;
|
||||||
|
height: 100%;
|
||||||
|
content: "";
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logos:before {
|
||||||
|
left: 0;
|
||||||
|
background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logos:after {
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logos:hover .logos-slide {
|
||||||
|
animation-play-state: paused;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logos-slide {
|
||||||
|
display: inline-block;
|
||||||
|
animation: 35s slide infinite linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logos-slide img {
|
||||||
|
height: 50px;
|
||||||
|
margin: 0 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #f2f2f2;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column; /* Stack elements vertically */
|
flex-direction: column;
|
||||||
justify-content: flex-start; /* Align items at the top */
|
min-height: 100vh;
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh; /* Use min-height for scrolling */
|
|
||||||
background-color: #f4f4f4;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.featured-projects {
|
.featured-projects {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
justify-content: space-between;
|
||||||
align-items: center;
|
padding: 20px;
|
||||||
|
background-color: white;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
background: white;
|
margin: 20px auto;
|
||||||
padding: 20px;
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-width: 250px;
|
||||||
|
height: 300px;
|
||||||
|
object-fit: cover;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
transition: transform 0.5s, box-shadow 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide img:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.description-container {
|
||||||
|
width: 35%;
|
||||||
|
padding-left: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-description {
|
.project-description {
|
||||||
flex: 1;
|
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-right: 20px;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-description h1 {
|
.project-description.active {
|
||||||
font-size: 24px;
|
display: block;
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-description p {
|
.pagination-container {
|
||||||
font-size: 16px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.indicators {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicators span {
|
.pagination-button {
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
background-color: #ccc;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
background-color: #888;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.indicators span.active {
|
.pagination-button.active {
|
||||||
background-color: #007bff;
|
background-color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-cards {
|
|
||||||
display: flex;
|
|
||||||
flex: 1;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
gap: 20px; /* Adds space between images */
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-cards img {
|
|
||||||
width: 200px;
|
|
||||||
height: 300px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 10px;
|
|
||||||
transition: transform 0.5s, box-shadow 0.5s; /* Adds smooth transition effects */
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-cards img:hover {
|
|
||||||
transform: scale(1.05); /* Slightly enlarges the image on hover */
|
|
||||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Adds shadow effect on hover */
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-cards img.active {
|
|
||||||
transform: scale(1.1);
|
|
||||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4); /* Stronger shadow for active image */
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background: #f2f2f2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide {
|
|
||||||
from {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos {
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 60px 0;
|
|
||||||
background: white;
|
|
||||||
white-space: nowrap;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos:before,
|
|
||||||
.logos:after {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 250px;
|
|
||||||
height: 100%;
|
|
||||||
content: "";
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos:before {
|
|
||||||
left: 0;
|
|
||||||
background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos:after {
|
|
||||||
right: 0;
|
|
||||||
background: linear-gradient(to right, rgba(255, 255, 255, 0), white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos:hover .logos-slide {
|
|
||||||
animation-play-state: paused;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos-slide {
|
|
||||||
display: inline-block;
|
|
||||||
animation: 35s slide infinite linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos-slide img {
|
|
||||||
height: 50px;
|
|
||||||
margin: 0 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Responsive Design */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.featured-projects {
|
.featured-projects {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-description {
|
.swiper {
|
||||||
margin-right: 0;
|
width: 100%;
|
||||||
text-align: center;
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-description h1 {
|
.description-container {
|
||||||
font-size: 20px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-description p {
|
.swiper-slide img {
|
||||||
font-size: 14px;
|
width: 100%;
|
||||||
}
|
|
||||||
|
|
||||||
.project-cards {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-cards img {
|
|
||||||
width: 150px;
|
|
||||||
height: 225px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos-slide img {
|
|
||||||
height: 40px;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 480px) {
|
footer {
|
||||||
.project-description h1 {
|
background-color: #fff;
|
||||||
font-size: 18px;
|
padding: 20px;
|
||||||
}
|
text-align: center;
|
||||||
|
margin-top: 20px;
|
||||||
.project-description p {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.project-cards img {
|
|
||||||
width: 120px;
|
|
||||||
height: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logos-slide img {
|
|
||||||
height: 30px;
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue