JavaScript slider not working properly

Question

I am trying to make a slider, but i have run in to a problem: slideWidth variable (which is the width of the slide) is always the same, so when it gets to the second slide it doesn't want to go further, similar with the previous slide it slides to the empty space because of the fixed variable value. + It doesn't want to animate. How to fix this?

Please check out the code:

// Slider
const slider_wrapp = document.querySelector('.tract-slider');
const slider = document.querySelector('.tract-slider-wrapp');
var slide = document.getElementsByClassName('tract-slide');

const leftBtn = document.querySelector('.slide-left');
const rightBtn = document.querySelector('.slide-right');

let swWidth = slider_wrapp.clientWidth;
let sliderWidth = swWidth * slide.length;
let slideWidth = swWidth;

slider.style.width = sliderWidth + "px";

for (var i = 0; i < slide.length; i++) {
  slide.item(i).style.width = " " + swWidth + "px";
}

function moveRight() {
  slider.style.transform = "translateX(" + (-slideWidth) + "px)";
}

function moveLeft() {
  slider.style.transform = "translateX(" + (slideWidth) + "px)";
}

rightBtn.addEventListener("click", function() {
  moveRight()
});

leftBtn.addEventListener("click", function() {
  moveLeft();
});

.tract-slider {
  width: 100%;
  height: 75vh;
  position: relative;
  overflow: hidden;
}

.tract-slider-wrapp {
  height: 100%;
  position: relative;
  -webkit-transition: translate 350ms cubic-bezier(.08, .13, 0, .81);
  -o-transition: translate 350ms cubic-bezier(.08, .13, 0, .81);
  transition: translate 350ms cubic-bezier(.08, .13, 0, .81);
}

.tract-slide {
  height: 100%;
  float: left;
  position: relative;
  display: block;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
}

.tract-slide:nth-child(1) {
  background-image: url("https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg");
}

.tract-slide:nth-child(2) {
  background-image: url("https://static.pexels.com/photos/29017/pexels-photo-29017.jpg");
}

.tract-slide:nth-child(3) {
  background-image: url("https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg");
}

.tract-slider-control {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #ffffff;
  padding: 1em;
}

.tract-slider-btn {
  display: inline-block;
  cursor: pointer;
  margin-left: 1em;
}

.tract-slider-btn:nth-child(1) {
  margin-left: 0;
}

<div class="tract-slider">
  <div class="tract-slider-wrapp">
    <div class="tract-slide"></div>
    <div class="tract-slide"></div>
    <div class="tract-slide"></div>
  </div>
  <div class="tract-slider-control">
    <div class="tract-slider-btn slide-left">Prev</div>
    <div class="tract-slider-btn slide-right">Next</div>
  </div>
</div>

P.S. If you know the solution please write it in JavaScript not JQuery

Answer 1

Your problem is that you missed to calculate the translateX position of your slideWrapper : (the slideWidth var )

to fix it you have to check and assign a new calculated value instead of setting it always to the slider width .

Note that I've added calculation in both moveRight() and moveLeft()

See below working snippet : (using only js)

// Slider
const slider_wrapp = document.querySelector('.tract-slider');
const slider = document.querySelector('.tract-slider-wrapp');
var slide = document.getElementsByClassName('tract-slide');

const leftBtn = document.querySelector('.slide-left');
const rightBtn = document.querySelector('.slide-right');

let swWidth = slider_wrapp.clientWidth;
let sliderWidth = swWidth * slide.length;
let slideWidth = 0;

slider.style.width = sliderWidth + "px";

for (var i = 0; i < slide.length; i++) {
  slide.item(i).style.width = " " + swWidth + "px";
}

function moveRight() {
  slideWidth === sliderWidth - swWidth ? slideWidth = 0 : slideWidth += swWidth;
  slider.style.transform = "translateX(" + (-slideWidth) + "px)";
}

function moveLeft() {  
  slideWidth === 0 ? slideWidth = sliderWidth-swWidth :  slideWidth -= swWidth;
  slider.style.transform = "translateX(" + (-slideWidth) + "px)";
}

rightBtn.addEventListener("click", function() {
  moveRight()
});

leftBtn.addEventListener("click", function() {
  moveLeft();
});

.tract-slider {
  width: 100%;
  height: 75vh;
  position: relative;
  overflow: hidden;
}

.tract-slider-wrapp {
  height: 100%;
  position: relative;
  -webkit-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  -o-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  transition: all 350ms cubic-bezier(.08, .13, 0, .81);
}

.tract-slide {
  height: 100%;
  float: left;
  position: relative;
  display: block;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
}

.tract-slide:nth-child(1) {
  background-image: url("https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg");
}

.tract-slide:nth-child(2) {
  background-image: url("https://static.pexels.com/photos/29017/pexels-photo-29017.jpg");
}

.tract-slide:nth-child(3) {
  background-image: url("https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg");
}

.tract-slider-control {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #ffffff;
  padding: 1em;
}

.tract-slider-btn {
  display: inline-block;
  cursor: pointer;
  margin-left: 1em;
}

.tract-slider-btn:nth-child(1) {
  margin-left: 0;
}

<div class="tract-slider">
  <div class="tract-slider-wrapp">
    <div class="tract-slide"></div>
    <div class="tract-slide"></div>
    <div class="tract-slide"></div>
  </div>
  <div class="tract-slider-control">
    <div class="tract-slider-btn slide-left">Prev</div>
    <div class="tract-slider-btn slide-right">Next</div>
  </div>
</div>