I am facing challenges in creating a content slider and encountering issues with its functionality. Specifically, when testing locally, I noticed that the current-slide fades out and back in upon clicking the arrows left or right, but the slide content is not switching to the next block of content.
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<p>FIRST SLIDE CONTENT</p>
</div>
<div class="slide slide-feature">
<h1>Slide 2</h1>
<p>Slide 2 stuff.</p>
</div>
<div class="slide">
<h1>Slide 3</h1>
<p>Slide 3 content</p>
</div>
<div class="slide">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"></a>
<ul class="slider-dots"></ul>
<a href="#" class="arrow-next"></a>
</div>Here is my JavaScript code:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
};
$(document).ready(main);Here is my CSS:
.slider {
position: relative;
width: 50%;
height: 470px;
}
.slide {
display: none;
position: absolute;
}
.active-slide {
display: block;
}Note: This is a condensed version of the necessary HTML, JS, and CSS code for this issue. Placeholders are used for text and images. The correct content replaces these placeholders on my local machine.