Story Behind the Slider: I decided to create a slider for my website, so I created an additional "subpage" to simplify the process. It's currently just a prototype with basic CSS styling - when the user clicks the arrow, a slide moves in the corresponding direction (e.g., pressing the right arrow makes the slide move to the right). Although the JavaScript part seems straightforward (I even wrote code for it), I encountered a problem.
Issue at Hand: To make it work, I needed two extra classes called .slideLeft and
.slideRight</code) - one setting <code>trasnslateXI moved some code from the base
.slide class to .slideLeft, added it to the HTML as instructed, but unfortunately, it didn't work as expected.
Here lies the question - why does it function perfectly in the .slide class but causes glitches in the whole slider when separated into another class?
PROCEED WITH CAUTION :
I have included the functional code. The commented-out parts of the CSS can break the slider.
Additionally, the slider may appear choppy due to me reducing the translateX value to -50% (to ensure visibility of slides after uncommenting).
CODE SAMPLE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>slider</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="center">
<div id="slider">
<span class="sButton" onclick="NextPrevButton(-1)"> ❮</span>
<div class="slide slideLeft" id="s1" > PERFECT </div> <!-- two classes here -->
<div class="slide slideLeft" id="s2" > FLAWLESS </div> <!-- two classes here -->
<div class="slide slideLeft" id="s3" > GORGEOUS </div> <!-- two classes here -->
<div class="slide slideLeft" id="s4" > SLIDER </div> <!-- two classes here -->
<span class="sButton" onclick="NextPrevButton(1)"> ❯</span>
</div>
<div id="buttons">
<span class="sDot" onclick="chooseSlide(0)"></span>
<span class="sDot" onclick="chooseSlide(1)"></span>
<span class="sDot" onclick="chooseSlide(2)"></span>
<span class="sDot" onclick="chooseSlide(3)"></span>
</div>
</div>
</div>
</body>
</html>
.slide {
opacity: 1;
visibility: hidden;
display: none;
/* Uncommenting .slideLeft (activated in HTML) messes up the slider,
despite being identical to that class */
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(-50%); /* Translating only 50% to show the error, intended value is -100% */
}
.active{
opacity: 1;
z-index: -10;
visibility: visible;
transform: translateX(0);
}
/* .slideLeft{
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(-50%);
}
.slideRight{
transition: all 0.7s cubic-bezier(0.92, 0.05, 0.74, 0.76);
transform: translateX(50%);
} */