Changes made and implement swiper library
This commit is contained in:
parent
327d13742e
commit
43d2c61505
59
index.html
59
index.html
|
|
@ -3,30 +3,47 @@
|
|||
<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 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-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>
|
||||
<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()">
|
||||
|
||||
<!-- Image Section -->
|
||||
<div class="swiper">
|
||||
<div class="swiper-slide" data-index="0">
|
||||
<img src="images/elink.webp" alt="EarthLink Project">
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
|
@ -42,6 +59,8 @@
|
|||
<img src="./logos/mrbeast.svg" alt="MrBeast Logo" />
|
||||
</div>
|
||||
</footer>
|
||||
<script src="scripts.js"></script>
|
||||
|
||||
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
|
||||
<script src="scripts.js"></script> <!-- Link to external JavaScript -->
|
||||
</body>
|
||||
</html>
|
||||
79
scripts.js
79
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;
|
||||
|
||||
// Update active image
|
||||
document.querySelectorAll(".project-cards img").forEach((img, index) => {
|
||||
img.classList.toggle("active", index === currentProjectIndex);
|
||||
// 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 indicators
|
||||
document.querySelectorAll(".indicators span").forEach((indicator, index) => {
|
||||
indicator.classList.toggle("active", index === currentProjectIndex);
|
||||
// Show the current description
|
||||
const selectedDescription = document.getElementById(`description-${index}`);
|
||||
if (selectedDescription) {
|
||||
selectedDescription.classList.add("active");
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
|
|
|||
297
styles.css
297
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;
|
||||
.swiper {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.description-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.project-description h1 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
margin-top: 20px;
|
||||
}
|
||||
Loading…
Reference in a new issue