Changes made and implement swiper library
This commit is contained in:
parent
327d13742e
commit
43d2c61505
89
index.html
89
index.html
|
|
@ -3,45 +3,64 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Creating image Slider</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<title>Featured Projects</title>
|
||||
<!-- 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>
|
||||
<body>
|
||||
<body>
|
||||
<h1>Featured Projects</h1>
|
||||
<p>Learn how we are delivering cutting-edge solutions and transforming businesses.</p>
|
||||
<div class="featured-projects">
|
||||
<div class="project-description">
|
||||
<h1 id="project-title">EarthLink Fiber Internet</h1>
|
||||
<p id="project-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.
|
||||
</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 class="featured-projects">
|
||||
|
||||
<div class="description-container">
|
||||
|
||||
<div class="project-description active" id="description-0">
|
||||
<h1>EarthLink Fiber Internet </h1>
|
||||
<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>
|
||||
<div class="project-cards">
|
||||
<img id="image-1" class="active" src="images/elink.webp" alt="EarthLink Project" onclick="nextProject()">
|
||||
<img id="image-2" src="images/evil.webp" alt="Involvvely Project" onclick="nextProject()">
|
||||
<img id="image-3" src="images/involv.webp" alt="Evil Genius Project" onclick="nextProject()">
|
||||
<div class="project-description" id="description-1">
|
||||
<h1>Evil Genius Games</h1>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<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" />
|
||||
|
||||
<!-- Image Section -->
|
||||
<div class="swiper">
|
||||
<div class="swiper-slide" data-index="0">
|
||||
<img src="images/elink.webp" alt="EarthLink Project">
|
||||
</div>
|
||||
</footer>
|
||||
<script src="scripts.js"></script>
|
||||
<div class="swiper-slide" data-index="1">
|
||||
<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>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
81
scripts.js
81
scripts.js
|
|
@ -1,53 +1,48 @@
|
|||
var copy = document.querySelector(".logos-slide").cloneNode(true);
|
||||
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() {
|
||||
const titleElement = document.getElementById("project-title");
|
||||
const textElement = document.getElementById("project-text");
|
||||
let currentIndex = 0; // Start with the first slide
|
||||
|
||||
// Update title and text
|
||||
titleElement.textContent = projects[currentProjectIndex].title;
|
||||
textElement.textContent = projects[currentProjectIndex].text;
|
||||
// Function to update the displayed content based on the current index
|
||||
function updateContent(index) {
|
||||
// Hide all descriptions
|
||||
descriptions.forEach((desc) => {
|
||||
desc.classList.remove("active");
|
||||
});
|
||||
|
||||
// Update active image
|
||||
document.querySelectorAll(".project-cards img").forEach((img, index) => {
|
||||
img.classList.toggle("active", index === currentProjectIndex);
|
||||
});
|
||||
// Show the current description
|
||||
const selectedDescription = document.getElementById(`description-${index}`);
|
||||
if (selectedDescription) {
|
||||
selectedDescription.classList.add("active");
|
||||
}
|
||||
|
||||
// Update indicators
|
||||
document.querySelectorAll(".indicators span").forEach((indicator, index) => {
|
||||
indicator.classList.toggle("active", index === currentProjectIndex);
|
||||
});
|
||||
}
|
||||
// Update pagination active class
|
||||
paginationButtons.forEach((button) => {
|
||||
button.classList.remove("active");
|
||||
});
|
||||
paginationButtons[index].classList.add("active");
|
||||
}
|
||||
|
||||
function nextProject() {
|
||||
currentProjectIndex = (currentProjectIndex + 1) % projects.length;
|
||||
updateProjectDisplay();
|
||||
}
|
||||
// Event listeners for image clicks
|
||||
images.forEach((image, index) => {
|
||||
image.addEventListener("click", () => {
|
||||
currentIndex = index;
|
||||
updateContent(currentIndex);
|
||||
});
|
||||
});
|
||||
|
||||
function goToProject(index) {
|
||||
currentProjectIndex = index;
|
||||
updateProjectDisplay();
|
||||
}
|
||||
// Event listeners for pagination buttons
|
||||
paginationButtons.forEach((button, index) => {
|
||||
button.addEventListener("click", () => {
|
||||
currentIndex = index;
|
||||
updateContent(currentIndex);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize display
|
||||
updateProjectDisplay();
|
||||
// Initialize the content (first image and description are visible)
|
||||
updateContent(currentIndex);
|
||||
|
|
|
|||
287
styles.css
287
styles.css
|
|
@ -1,204 +1,173 @@
|
|||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
* {
|
||||
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;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f2f2f2;
|
||||
display: flex;
|
||||
flex-direction: column; /* Stack elements vertically */
|
||||
justify-content: flex-start; /* Align items at the top */
|
||||
align-items: center;
|
||||
min-height: 100vh; /* Use min-height for scrolling */
|
||||
background-color: #f4f4f4;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.featured-projects {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background-color: white;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
width: 80%;
|
||||
max-width: 1200px;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
margin: 20px auto;
|
||||
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;
|
||||
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 {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
margin-right: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.project-description h1 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
.project-description.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.project-description p {
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.indicators {
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.indicators span {
|
||||
.pagination-button {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0 5px;
|
||||
background-color: #ccc;
|
||||
border-radius: 50%;
|
||||
background-color: #888;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.indicators span.active {
|
||||
background-color: #007bff;
|
||||
.pagination-button.active {
|
||||
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) {
|
||||
.featured-projects {
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.project-description {
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.project-description h1 {
|
||||
font-size: 20px;
|
||||
.description-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.project-description p {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.project-cards {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.project-cards img {
|
||||
width: 150px;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
.logos-slide img {
|
||||
height: 40px;
|
||||
margin: 0 10px;
|
||||
.swiper-slide img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.project-description h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.project-description p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.project-cards img {
|
||||
width: 120px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.logos-slide img {
|
||||
height: 30px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue