1

I can't change the HTML code, and it looks like this:

<div class="slider">
            <div class="slider-control">
                <button id="prev">Previous</button>
                <button class="foll">Next</button>
            </div>
            <div class="slider-image">
                <img src="html.png" alt="Html" />
                <img src="css.png" alt="Css" />
                <img src="jquery.png" alt="jQuery" />
            </div>
        </div>

When the program starts I need to show the first image. If I click on "Previous" I want to show the previous img (if the currently img showed is the first one, I want to show the last one), if I click on "Next" then I want to show the next img. I need it to be a generic solution case I need to use it also with more images. I tried with:

function showImage(){
    $(".slider-image img").not(":eq(n)").hide();
}

$(document).ready(function(){
    n = 0;
    showImage(n);
    $(".slider-control button").click(function(){

        if($(this).is("div.slider-control.prev")){
            n -= 1;
            showImage(n);
        }
        else if($(this).is("div.slider-control.foll")){
            n += 1;
            showImage(n);
        }   
    });
});

But it doesn't show anything

ButchMonkey
  • 1,873
  • 18
  • 30
Sara Briccoli
  • 141
  • 3
  • 11

1 Answers1

2

There was a few issues that I've fixed for you, but this should now work okay for you

showImage was not taking n as a paramater, but you were passing it that when you were calling it

function showImage() {... // Not taking the param you're passing
function showImage(n) {... // Now we are, and assigning it the name 'n'

You weren't using .show() on the element you wanted to show - you were only ever using .hide()

There was also an issue with how spamming the next or previous buttons would change the n higher / lower than your element count, and so you would end up selecting elements that didn't exist. To keep your n within the range of your elements, you can do this to loop back around an array's indexes

n = n % $('.slider-image img').length;

Finally, you weren't passing n to the :not(:eq(n)) - I've just used template literals to insert the variable cleanly

In the HTML, I set your buttons to both use IDs, because I felt this made more sense and helps readabilit

In the $(document).ready(..., you also had an error with your .is() - You were alredy working from the <button> element, so you're okay to check just on the ID of the buttons

function showImage(n){
    n = n % $(".slider-image img").length;
    $(".slider-image img").not(`:eq(${n})`).hide();
    $(".slider-image img").eq(n).show();
}

$(document).ready(function(){
    n = 0;
    showImage(n);
    
    $(".slider-control button").click(function(){
        if($(this).is("#prev")){
            n -= 1;
            showImage(n);
        }
        else if($(this).is("#foll")){
            n += 1;
            showImage(n);
        }   
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slider">
  <div class="slider-control">
    <button id="prev">Previous</button>
    <button id="foll">Next</button>
  </div>
  <div class="slider-image">
    <img src="https://via.placeholder.com/150" alt="Html" />
    <img src="https://via.placeholder.com/200" alt="Css" />
    <img src="https://via.placeholder.com/250" alt="jQuery" />
  </div>
</div>
Shiny
  • 4,945
  • 3
  • 17
  • 33