0

I am trying to use the horizontal photo scroller from here and it works when I have only one instance.

It is supposed to be that there is a stretch of images that you hit the arrow buttons to scroll left or right. I wanted to have two sets of images that scroll, and when I copy the same JS again (adjusting the id so it is performing on the correct button click) only the second one works.

I have tried to call the event listener on the div tag that the buttons are inside of, but haven't had any luck... I am not experienced in event listeners at all, so I am not sure what rule I'm missing.

Any ideas on how to get both images to scroll?

JS:

<script>
window.addEventListener("load" , function (){
    $(".previous_button1").on("click",function()
        scroll(this,false); });
    $(".next_button1").on("click",    function(){ 
        scroll(this,true); });
}, false);
    
function scroll(elem,next){
    let target  = $(elem).siblings(".data_preview_area1");
    let width   = target.outerWidth()
    if (next){
        target.animate({ scrollLeft:"+=" + String(width) } ,300);
    }
    else{
        target.animate({ scrollLeft:"-=" + String(width) } ,300);
    }
}
</script>
<script>
window.addEventListener("load" , function (){
    $(".previous_button2").on("click",function(){ 
        scroll(this,false); });
    $(".next_button2").on("click",    function(){ 
        scroll(this,true); });
}, false);
    
function scroll(elem,next){
    let target  = $(elem).siblings(".data_preview_area2");
    let width   = target.outerWidth()
    if (next){
        target.animate({ scrollLeft:"+=" + String(width) } ,300);
    }
    else{
        target.animate({ scrollLeft:"-=" + String(width) } ,300);
    }
}
    </script>
Rifky Niyas
  • 1,737
  • 10
  • 25
L Had
  • 1
  • 1
  • 1
    Please include your code in your question rather than as an image – Rifky Niyas Aug 24 '21 at 00:32
  • 2
    It seems like the problem in your code is that you are defining `scroll` function twice and calling the it in seperate places. Rename your second function to something different. Please include sample of your code here so that we can help you fix the code – Rifky Niyas Aug 24 '21 at 00:40
  • 1
    Including images of code means that anyone trying to test your code has to go through the process of rewriting it from the provided image. If you want helpful answers from this community's members it is advisable to show a little more consideration for their time. – tao Aug 24 '21 at 00:59
  • I apologize for not putting up the code. This is my first post on here, and I see now that it would be much more helpful to have the code. – L Had Aug 24 '21 at 01:24
  • @RifkyNiyas You are correct, thank you so much!! and I am so sorry for not putting up the code, it's up now for others to reference – L Had Aug 24 '21 at 01:37
  • @LHad And welcome to stack overflow. please consider taking a [tour](https://stackoverflow.com/tour). You will even receive a badge. Also , please refer on [how to ask a good question](https://stackoverflow.com/help/how-to-ask) . These might be useful in future – Rifky Niyas Aug 24 '21 at 01:52
  • @LHad I have added an answer fixing your problem. Consider upvoting if you find it useful and please accept the answer if it solves your problem – Rifky Niyas Aug 24 '21 at 06:32

1 Answers1

1

Fixing the error

The error made in your code is that you are re-defining the scroll function once again. So the event listener will call only the second function you have defined since it overrides the first one. To fix this change your second scroll function to anything else like scroll2. And rename the scroll function to the name you have changed (like scroll2 as above).

Refer the below snippet

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  window.addEventListener("load", function() {
    $(".previous_button1").on("click", function() scroll(this, false);
    }); $(".next_button1").on("click", function() {
    scroll(this, true);
  });
  }, false);

  function scroll(elem, next) {
    let target = $(elem).siblings(".data_preview_area1");
    let width = target.outerWidth()
    if (next) {
      target.animate({
        scrollLeft: "+=" + String(width)
      }, 300);
    } else {
      target.animate({
        scrollLeft: "-=" + String(width)
      }, 300);
    }
  }
</script>
<script>
  window.addEventListener("load", function() {
    $(".previous_button2").on("click", function() {
      scroll2(this, false);
    });
    $(".next_button2").on("click", function() {
      scroll2(this, true);
    });
  }, false);

  function scroll2(elem, next) {
    let target = $(elem).siblings(".data_preview_area2");
    let width = target.outerWidth()
    if (next) {
      target.animate({
        scrollLeft: "+=" + String(width)
      }, 300);
    } else {
      target.animate({
        scrollLeft: "-=" + String(width)
      }, 300);
    }
  }
</script>

However, it is not preferable to solve your problem in the above manner.

Most preferable solution

I wanted to have two sets of images that scroll, and when I copy the same JS again (adjusting the id so it is performing on the correct button click) only the second one works.

Duplicating the code is not a preferable solution to any problem. You don't have to repeat the code in this situation anyways. Instead try as below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<script>
  window.addEventListener("load", function() {
    $(".previous_button1").on("click", function()
        scroll(this, false, ".data_preview_area1");
    }); 
    $(".next_button1").on("click", function() {
        scroll(this, true, ".data_preview_area1");
    })
    $(".previous_button2").on("click", function() {
      scroll(this, false, ".data_preview_area2");
    });
    $(".next_button2").on("click", function() {
      scroll(this, true, ".data_preview_area2");
    });
  });
  }, false);

  function scroll(elem, isNext, area) {
    let target = $(elem).siblings(area);
    let width = target.outerWidth()
    if (isNext) {
      target.animate({
        scrollLeft: "+=" + String(width)
      }, 300);
    } else {
      target.animate({
        scrollLeft: "-=" + String(width)
      }, 300);
    }
  }

You can simply have one load event listener for window. Then accept another parameter in scroll function as area and pass the distinct value from the event listener on buttons. Also, I changed the next variable to isNext to better understand it as a boolean value (improve readablity).

Rifky Niyas
  • 1,737
  • 10
  • 25