The slider is experiencing a transition error

Question

The slider is experiencing a transition error

I am having issues with the CSS slider that I created. It works fine on auto play, but when I try to manually navigate using the dots, the transition does not work smoothly. I believe it should take only 5 minutes to solve this issue for someone who is experienced in this area. Any help would be greatly appreciated!

If you have an alternative method to create a beautiful slider, please share your knowledge.

Below are the code snippets provided, please take a look and run them to see the error in the transition:

// Javascript code
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}
// More JavaScript functions...


/* CSS Styles */
*{
    margin: 0;
    padding: 0;
}
.psr_slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
 /* More CSS Styles... */


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- HTML code goes here -->
</head>
<body>
   <!-- Body content here -->
</body>
</html>

javascript html css slider

Answer 1

Answer №1

After some investigation, it turns out I found the solution to my question on my own. I identified where I went wrong and made necessary adjustments. Instead of relying on the width property for transitions, I now utilize the transform property. This change required only minor modifications in both the CSS and JS code without affecting the HTML structure. Hopefully, this insight proves helpful to you as well.

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("psr_slides");
  var dots = document.getElementsByClassName("psr_slider_dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    var j = 100*i-(slideIndex-1)*100+"%";
    slides[i].style.transform = "translateX("+j+")";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  dots[slideIndex - 1].className += " active";
}

function autoInce(){
    for (let i = 1; i <= 10000; i++) {
        setTimeout(function(){ 
            plusSlides(1);
         }, i*5000);    
    }
}
autoInce();

*{
    margin: 0;
    padding: 0;
}
.psr_slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 40vw;
}
.psr_slide{
    display: flex;
    flex-direction: column-reverse;
}
.psr_slide_1,.psr_slide_2,.psr_slide_3,.psr_slide_4{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 40vw;
    /* overflow: hidden; */
    transition: all 1s;
}
.psr_slide_1{
    background: red;
}
.psr_slide_2{
    background: pink;
}
.psr_slide_3{
    background: yellow;
}
.psr_slide_4{
    background: green;
}
.psr_slider_right{
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}
.psr_slider_right svg{
    height: 64px;
}
.psr_slider_left{
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 100;
}

.psr_slider_dots{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.psr_slider_dot{
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #bbb;
    display: inline-block;
    opacity: 0.5;
    transition: 1s;
}
.active{
    opacity: 1 !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="psr_slider">
        <div class="psr_slide">
        <div class="psr_slides psr_slide_1"></div>
        <div class="psr_slides psr_slide_2"></div>
        <div class="psr_slides psr_slide_3"></div>
        <div class="psr_slides psr_slide_4"></div>
    </div>
        <div class="psr_slider_right" onclick="plusSlides(1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
              </svg>
        </div>
        <div class="psr_slider_left" onclick="plusSlides(-1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
              </svg>
        </div>
        <div class="psr_slider_dots">
            <div class="psr_slider_dot" onclick="currentSlide(1)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(2)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(3)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(4)"></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Answer 2

After some investigation, it turns out I found the solution to my question on my own. I identified where I went wrong and made necessary adjustments. Instead of relying on the width property for transitions, I now utilize the transform property. This change required only minor modifications in both the CSS and JS code without affecting the HTML structure. Hopefully, this insight proves helpful to you as well.

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("psr_slides");
  var dots = document.getElementsByClassName("psr_slider_dot");
  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    var j = 100*i-(slideIndex-1)*100+"%";
    slides[i].style.transform = "translateX("+j+")";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  dots[slideIndex - 1].className += " active";
}

function autoInce(){
    for (let i = 1; i <= 10000; i++) {
        setTimeout(function(){ 
            plusSlides(1);
         }, i*5000);    
    }
}
autoInce();

*{
    margin: 0;
    padding: 0;
}
.psr_slider{
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100vw;
    height: 40vw;
}
.psr_slide{
    display: flex;
    flex-direction: column-reverse;
}
.psr_slide_1,.psr_slide_2,.psr_slide_3,.psr_slide_4{
    position: absolute;
    top: 0;
    width: 100vw;
    height: 40vw;
    /* overflow: hidden; */
    transition: all 1s;
}
.psr_slide_1{
    background: red;
}
.psr_slide_2{
    background: pink;
}
.psr_slide_3{
    background: yellow;
}
.psr_slide_4{
    background: green;
}
.psr_slider_right{
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
}
.psr_slider_right svg{
    height: 64px;
}
.psr_slider_left{
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    z-index: 100;
}

.psr_slider_dots{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.psr_slider_dot{
    height: 16px;
    width: 16px;
    border-radius: 8px;
    background: #bbb;
    display: inline-block;
    opacity: 0.5;
    transition: 1s;
}
.active{
    opacity: 1 !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="psr_slider">
        <div class="psr_slide">
        <div class="psr_slides psr_slide_1"></div>
        <div class="psr_slides psr_slide_2"></div>
        <div class="psr_slides psr_slide_3"></div>
        <div class="psr_slides psr_slide_4"></div>
    </div>
        <div class="psr_slider_right" onclick="plusSlides(1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-right" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
              </svg>
        </div>
        <div class="psr_slider_left" onclick="plusSlides(-1)">
            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#fff" class="bi bi-chevron-left" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
              </svg>
        </div>
        <div class="psr_slider_dots">
            <div class="psr_slider_dot" onclick="currentSlide(1)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(2)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(3)"></div>
            <div class="psr_slider_dot" onclick="currentSlide(4)"></div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

The slider is experiencing a transition error

Answer №1

Similar questions

Keeping an Rxjs observable alive despite encountering errors by simply ignoring them

Unable to achieve desired result when trying to combine styled components props with next adjacent selector

The ng-repeat directive fails to acknowledge changes in the model

How come the action doesn't trigger in my React/Redux application?

Implement Next.js deployment on NGINX server with a 403 forbidden error

Creating intentional blank space before the <Span> element using CSS in HTML

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Bootstraps paves the way for the destruction of a dropdown element

Tips for saving checkbox values in an array in the sequence they are selected

Pressing the button will allow you to select and copy the text within the

What is the best way to adjust CSS vw and vh values after resizing your website?

Alert: An invalid value of `false` was received for the non-boolean attribute `className`. To properly write this to the DOM, please provide a string instead: className="false" or use a different

Using MDBootstrap for reactjs, incorporating a modal into a table for enhanced functionality

When hosted, OpenCart encounters a JavaScript error stating that the property "document" cannot be read because it is null

Performing a series of synchronous JavaScript calls in Node.js by executing GET requests within a for loop

Refreshing AJAX content with a dynamically adjusting time interval

Is it possible to dynamically import a Vue.js component based on a prop value?

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

Hide all elements in jQuery that do not have a class assigned

event handler in JavaScript that triggers upon a click