0

I want to make a video slider. The problem is that the loop works only one for each button, but the console.log keep working on click. The videos are generated in php with the vimeo api in a For loop.

When I first click on the right button, it works one time, and if I retry, it's dead. If I click on the left button after clicking on the right button, It will work one time but it skip one video and goes 2 video on the left.

The HTML in the web page after clicking on the right button then on the left one:

HTML ON THE WEB PAGE DIRECTLY

Here is my php code :

$CLIENT_IDENTIFIER = "{CLIENT_IDENTIFIER}";
$CLIENT_SECRET = "{CLIENT_SECRET}";
$ACCESS_TOKEN = "{ACCESS_TOKEN}";
$CLIENT_ID = "{CLIENT_ID}";
require 'vendor/autoload.php';
use Vimeo\Vimeo;
$client = new Vimeo($CLIENT_IDENTIFIER, $CLIENT_SECRET, $ACCESS_TOKEN);
 
$response = $client->request('/users/{CHANNEL}/videos?sort=date&direction=desc', array(), 'GET');
for ($i=0; $i < 7; $i++) {
  $lien = $response["body"]["data"][$i]["uri"];
  $video_id = substr($lien, 8);
  echo '<div class="videos video-'.$i.'">
  <iframe title="vimeo-player" src="https://player.vimeo.com/video/'.$video_id.'?" width="720" height="480" frameborder="0"       allowfullscreen></iframe>
  </div>';
}

Here is my JS code :

var videos = document.querySelectorAll(".videos");

next.addEventListener("click", function() {
    for (let i=0; i<7; i++) {
        videos[i].classList.remove("video"+[i]);
        videos[i].classList.add("video"+[i-1]);
        console.log(videos[i])
    }
});

prev.addEventListener("click", function() {
    for (let i=0; i<7; i++) {
        videos[i].classList.remove("video"+[i]);
        videos[i].classList.add("video"+[i+1]);
        console.log(videos[i])
    }
});

I don't know why it doesn't work, I hope you'll have a solution!

Maxime Kupke
  • 11
  • 3
  • 1
    What have you tried to resolve the problem? Where are you stuck? Is this even related to PHP or CSS after all? – Nico Haase Aug 11 '21 at 08:00
  • This looks like you haven't attached the listeners to the new elements – Nico Haase Aug 11 '21 at 08:01
  • 2
    Where are `next` and `prev` defined and initialized? – secan Aug 11 '21 at 08:01
  • Does https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements help? – Nico Haase Aug 11 '21 at 08:01
  • Or this? https://stackoverflow.com/questions/30000326/click-fails-after-dom-change – Nico Haase Aug 11 '21 at 08:02
  • Or this? https://stackoverflow.com/questions/16598213/how-to-bind-events-on-ajax-loaded-content – Nico Haase Aug 11 '21 at 08:02
  • 1
    The code pretty much makes no sense. Every time you click one of those buttons it loops through _all_ the videos each time and adds/removes the classes. It doesn't make any attempt to store which video is currently being displayed and then move to the next one. I expect that in the console you see 7 new lines of logs every time you click – ADyson Aug 11 '21 at 08:03
  • It's probably JavaScript but I gave the other codes to let you understand the link between the 4 language because In javascript I use "ClassList.add" to let you know what the class does in CSS. I'm stuck with the loop, as I said, it work one time, but not all the time. The goal is to navigate into the slider by clicking on the right or left button. It's related to Php because it's where the vidéo Iframe is. – Maxime Kupke Aug 11 '21 at 08:05
  • `Next` and `Prev` are initialized on the top of the JS code with `let prev = document.querySelector(".group1-Prev");` `let next = document.querySelector(".group1-Next");` – Maxime Kupke Aug 11 '21 at 08:06
  • No, PHP does not know anything about videos or iframes. If this is a problem that happens after generating the code and sending it to the browser for rendering, PHP is no longer involved (unless you perform AJAX requests or similar stuff) – Nico Haase Aug 11 '21 at 08:06
  • You need to store the current video ID in a variable (outside the next and previous functions) and then increase/decrease that number each time the buttons are pressed, and set the class appropriately based on that. No need for loops – ADyson Aug 11 '21 at 08:09
  • There is no AJAX request, the request is in php here `$response = $client->request('/users/{CHANNEL}/videos?sort=date&direction=desc', array(), 'GET');`; @NicoHaase – Maxime Kupke Aug 11 '21 at 08:10
  • @ADyson Yes, but if I click a second time, will the next video class be replace by the prev video class too ? – Maxime Kupke Aug 11 '21 at 08:12
  • I think the reason why it works only the first time is because the `videos` element collection is not updated after each click so, let's say `video[0]` has the class `.video-0`: with the first click you you remove the class `.video-0` and add the class `.video-1`; with the second click you try again to remove the class `.video-0` but now `videos[0]` has the class `.video-1`, not `.video-0`, and you try to add the class `.video-1`, which is already set. If you want your code to work you have to change the positions of the videos in the array too; it is not enough to change the CSS class. – secan Aug 11 '21 at 08:13
  • @secan Ok, I thought it was a good idea because I tried to take exemple to the logic of that code [https://codepen.io/dobladov/pen/kXAXJx] – Maxime Kupke Aug 11 '21 at 08:15
  • 1
    If there are no more PHP requests after the initial rendering, please share the **generated markup**, along with your attempts to resolve the problem. Also, please add **all** details to the question by editing, for example the stuff around `prev` and `next` – Nico Haase Aug 11 '21 at 08:16
  • 1
    @MaximeKupke ok, but you mirrored only the second part of the function (adding and removing classes), which deals with the presentation, and left out the entire first half (setting current, previous and next items) that is what makes that carousel work. – secan Aug 11 '21 at 08:19
  • @NicoHaase There is nothing generated after the initial rendering. I've sent you all the codes I use for the slider – Maxime Kupke Aug 11 '21 at 08:22
  • Then please **reduce** the content of your question to the relevant parts, **add** the pieces you've scattered in the comment section to the question, and show your attempts to resolve the problem – Nico Haase Aug 11 '21 at 08:24
  • @secan Ok, I'll try to do my best, thank you! – Maxime Kupke Aug 11 '21 at 08:25
  • `Yes, but if I click a second time, will the next video class be replace by the prev video class too`...if you do it correctly, then yes. – ADyson Aug 11 '21 at 08:28
  • @ADyson I'll try this way too, thx! – Maxime Kupke Aug 11 '21 at 08:34

1 Answers1

0

Ok, that's a little bit long, but it works.

The JS code I use :

let prev = document.querySelector(".group1-Prev");
let next = document.querySelector(".group1-Next");
let slider = document.querySelector("#slider");

var videos = document.querySelectorAll(".videos");

let video0 = document.querySelector(".video0");
let video1 = document.querySelector(".video1");
let video2 = document.querySelector(".video2");
let video3 = document.querySelector(".video3");
let video4 = document.querySelector(".video4");
let video5 = document.querySelector(".video5");
let video6 = document.querySelector(".video6");

let id0 = 0;
let id1 = 1;
let id2 = 2;
let id3 = 3;
let id4 = 4;
let id5 = 5;
let id6 = 6;

next.addEventListener("click", function() {

    video0.classList.remove("video"+id0);
    video0.classList.add("video"+Number(id0-1));

    video1.classList.remove("video"+id1);
    video1.classList.add("video"+Number(id1-1));

    video2.classList.remove("video"+id2);
    video2.classList.add("video"+Number(id2-1));

    video3.classList.remove("video"+id3);
    video3.classList.add("video"+Number(id3-1));

    video4.classList.remove("video"+id4);
    video4.classList.add("video"+Number(id4-1));

    video5.classList.remove("video"+id5);
    video5.classList.add("video"+Number(id5+-1));

    video6.classList.remove("video"+id6);
    video6.classList.add("video"+Number(id6-1));

    id0 = Number(id0-1);
    id1 = Number(id1-1);
    id2 = Number(id2-1);
    id3 = Number(id3-1);
    id4 = Number(id4-1);
    id5 = Number(id5-1);
    id6 = Number(id6-1);

});

prev.addEventListener("click", function() {

    video0.classList.remove("video"+id0);
    video0.classList.add("video"+Number(id0+1));

    video1.classList.remove("video"+id1);
    video1.classList.add("video"+Number(id1+1));

    video2.classList.remove("video"+id2);
    video2.classList.add("video"+Number(id2+1));

    video3.classList.remove("video"+id3);
    video3.classList.add("video"+Number(id3+1));

    video4.classList.remove("video"+id4);
    video4.classList.add("video"+Number(id4+1));

    video5.classList.remove("video"+id5);
    video5.classList.add("video"+Number(id5+1));

    video6.classList.remove("video"+id6);
    video6.classList.add("video"+Number(id6+1));

    id0 = Number(id0+1);
    id1 = Number(id1+1);
    id2 = Number(id2+1);
    id3 = Number(id3+1);
    id4 = Number(id4+1);
    id5 = Number(id5+1);
    id6 = Number(id6+1);

});

Thank you for your help!

Maxime Kupke
  • 11
  • 3