Slider - jquery - małe błędy, których nie moge wyłapać.

Question

https://codepen.io/uszk/pen/zYZEWRB

Kod postarałem się uprościć do minimum, żeby przedstawiał pomysł o który mi chodzi.

1) Problem, pojawia się gdy przy ostatnim slidze, trzeba nacisnac przycisk (prawy) dwa razy, zeby przeszlo do pierwszego - probowalem kombinowac z .length - 1, ale efekt nie byl taki jaki chciałem.

2) Nie mam pojęcia czemu, między slidemi jest odstęp, im dalej sie idzie tym bardziej go widać.

3) Bardzo bym się cieszył jakby ktoś mnie nakierował na jakiej zasadzie ma działać lewy przycisk. Może ktoś poleci jakieś metody, których jeszcze nie udało mi się poznać.

Z góry, dziękuje. Dopiero zaczynam przygode z JS'em i myślę, że ten projekt dużo mnie nauczy. Pozdrawiam.

p.s. Ważne jest dla mnie to, żeby slider był uniwersalny, bo odpowiedzią do 1) mogłoby być ,że i=0, kiedy i=4. Idąc tym szlakiem może jest jakiś sposób, żeby złapać ostatni element tablicy i go wykorzystac.

Comments

@Wiciorny , @VBService - Bardzo wam dziękuje za pomoc, z tym white-spacem już sam sobie poradze :D.

Wszystkiego dobrego Panowie i jeszcze raz dziękuje :).

Answer 1

Zgubiłes w warunku osatnim, przy zerowaniu transofrmacje 
 

let slide = document.getElementsByClassName('s');
let xz = $('.s').width();
let i = 0;

$('.btn-right').click(function (){
    i++;
    console.log(i)
    if (i < (slide.length)){
    $(slide).css('transform', 'translate(' +(i * - xz )+ 'px)');
    }
    else{
      i=-1;
      $(slide).css('transform', 'translate(0px)');
      // tego nie ma - tu powinno ^ być translate to 0px
    }
});

Bo przy ostatniej iteracji powinno wrócić, natomiast u ciebie zeruje ity element i nie przesuwa widoku :), dopiero kiedy klikniesz po raz kolejny, wejdzie znowu do pierwszego warunku 

 

Nie miałem więcej czasu na razie działa to na zasadzie takiej że lewy przycisk także działa ale w ten sposób że rozpoczyna się od przewinięcia do pkt. niebieskiego, niestety jest późno więc jeszcze nie obliczyłem tego tak żeby uwzględniało transform w lewo, jednak nie wiem czy ukłąd przycisków na to pozwala 
dla lewej strony 

let j= (slide.length);
$('.btn-left').click(function (){
 
    j--;
    console.log(j)
    if (j > 0)
    {
      console.log((-j * + xz ))
    $(slide).css('transform', 'translate(' +(-j * + xz )+ 'px)');
    }
    else{
       j=4;
       $(slide).css('transform', 'translate(0px)');
    }    
});

 

Answer 2

Propozycja poprawek

const xz = $('.s').width();
let i = 0;

$('.btn-right').click(function () {  
  if (i < $('.s').length - 1)
  {
    i++;
    $('.slide').css('transform', `translatex(-${(i * xz)}px)`);   
  } else {
    i = 0;
    $('.slide').css('transform', 'translatex(0px)');
  }
});
$('.btn-left').click(function () {  
  if (i > 0)
  {    
    i--;
    $('.slide').css('transform', `translatex(-${(i * xz)}px)`);   
  } else {
    i = $('.s').length - 1;
    $('.slide').css('transform', `translatex(-${(i * xz)}px)`);
  }
});

wersja 1 DRY

const xz = $('.s').width();
let i = 0;

$('.btn-right').click(function () {  
  move_slide('forward');
});
$('.btn-left').click(function () { 
  move_slide('backward');
});

function move_slide(cmd) {
  if (cmd == 'forward') {
    if (i < $('.s').length - 1) {
      i++;
    } else {
      i = 0;
    }
  } else { // backward
    if (i > 0) {    
      i--;   
    } else {
      i = $('.s').length - 1;
    }
  }

  $('.slide').css('transform', `translatex(-${(i * xz)}px)`);
}

wersja 2 DRY

const xz = $('.s').width();
let i = 0;

$('.btn-right').click(function () {  
  move_slide(); // move_slide(1); // forward
});
$('.btn-left').click(function (){ 
  move_slide(-1); // backward
});

function move_slide(step = 1) {
    i += step;
    if (i > $('.s').length - 1) {
      i = 0;
    } else if (i < 0) {    
      i = $('.s').length - 1;
    }

  $('.slide').css('transform', `translatex(-${(i * xz)}px)`);
}

wersja 2.1 DRY

const xz = $('.s').width();
const FORWARD = 1, BACKWARD = -1;
let i = 0;
 
$('.btn-right').click(function () {  
  move_slide(FORWARD);
});
$('.btn-left').click(function () { 
  move_slide(BACKWARD);
});
 
function move_slide(step) {
    i += step;
    if (i > $('.s').length - 1) {
      i = 0;
    } else if (i < 0) {    
      i = $('.s').length - 1;
    }
 
  $('.slide').css('transform', `translatex(-${(i * xz)}px)`);
}

 

Tak jak @Wiciorny napisał zapomniałeś

Zgubiłeś w warunku ostatnim, przy zerowaniu, transform 

 

$(slide).css('transform', 'translate(0px)');

Polecenie

$('.s').width(),  //  Zwraca szerokość pojedynczego elementu o klasie s
$('.s').length);  // Zwraca ilość elementów o klasie s

console.log($('.s').width(), $('.s').length);

 

Comments

Moim zdaniem, ale mogę się mylić, bo jeszcze tego nie sprawdzałem, za ten odstęp, który się pojawia między elementami <img> odpowiedzialne jest użycie do wszystkich elementów slide-ra jednostek vw.

---

Próbowałem też z pixelami, same shit. Jak naprawie to zedytuje z rozwiązaniem.

---

Moja wersja to jest nocna wersja ANTI DRY,KISS Pattern, :D