Skip to content

Commit

Permalink
Merge pull request #101 from yasirakhlaque/Slider-fix
Browse files Browse the repository at this point in the history 
Issue Fixed
  • Loading branch information
@Ojas-Arora
Ojas-Arora authored Jan 12, 2025
2 parents feb9fe4 + e3aad42 commit 189260e
Showing 1 changed file with 105 additions and 119 deletions.
224 changes: 105 additions & 119 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,32 +39,68 @@
}

.slideshow-container {
position: relative;

margin: auto;
overflow: hidden;
color: #ffd465;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.mySlides {
display: none;
position: relative;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
position: relative;
max-width: 100%;
margin: auto;
overflow: hidden;
}

.mySlides {
display: none;
}

.banner-image {
width: 100%;
height: auto;
}

.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
user-select: none;
}

.prev {
left: 10px;
}

.next {
right: 10px;
}

.prev:hover, .next:hover {
background: rgba(0, 0, 0, 0.8);
}

.dot-container {
text-align: center;
margin-top: 10px;
}

.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.dot.active {
background-color: #717171;
}

.text {
color: #fff;
Expand All @@ -77,60 +113,6 @@
background-color: rgba(0, 0, 0, 0.5);
}

.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

.banner-image {
width: 100%;
height: 300px;
object-fit: cover;
}

.prev {
left: 0;
border-radius: 3px 0 0 3px;
}

.next {
right: 0;
border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: var(--heading-color);
color: #ffd465;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active,
.dot:hover {
background-color: #717171;
}

.options-section {
text-align: center;
padding: 40px 20px;
Expand Down Expand Up @@ -809,37 +791,29 @@ <h2>Ajivika</h2>
<!-- Banner -->
<h1 style="color: var(--heading-color)">Welcome to Ajivika</h1>
<p style="color: var(--para-color);">Your one-stop destination for career growth and learning.</p>
<div class="slideshow-container" style="width: 1190px; margin-left: 0px;">
<div class="slideshow-container">
<!-- Slide 1 -->
<div class="mySlides fade">
<div class="mySlides">
<img src="./upskill-banner.jpg" alt="Upskill" class="banner-image" />
</div>

<!-- Slide 2 -->
<div class="mySlides fade">
<img
src="./apply-jobs-banner.jpg"
alt="Apply for the best jobs"
class="banner-image"
/>
<div class="mySlides">
<img src="./apply-jobs-banner.jpg" alt="Apply for the best jobs" class="banner-image" />
</div>

<!-- Slide 3 -->
<div class="mySlides fade">
<img
src="./resume-banner.jpg"
alt="Get your resume made"
class="banner-image"
/>
<div class="mySlides">
<img src="./resume-banner.jpg" alt="Get your resume made" class="banner-image" />
</div>

<!-- Navigation buttons -->
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br />

<!-- Dots -->
<div style="text-align: center">
<div class="dot-container">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
Expand Down Expand Up @@ -1152,26 +1126,38 @@ <h3>Subscribe to Our Newsletter</h3>
<script src="index.js"></script>

<script>
let slideIndex = 0;
showSlides();

function showSlides() {
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
const slides = document.getElementsByClassName("mySlides");
const dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}

// Auto-play functionality
setInterval(() => {
plusSlides(1);
}, 3000); // Change image every 3 seconds
</script>

<script>
Expand Down

0 comments on commit 189260e

Please sign in to comment.