How to make the slider not catch the last element?

Asked

Viewed 51 times

0

I would like to know how to solve the following case.

I have a structure like this:

<section class="portfolio slide" id="portfolio">
    <h2>portfólio.</h2>
    <div id="foto">
        <img src="images/img-1.jpeg" alt="imagem 1" />
    </div>
    <div id="foto">
        <img src="images/pexels-photo.jpg" alt="imagem 2" />
    </div>
    <div id="foto">
        <img src="images/img-1.jpeg" alt="imagem 3" />
    </div>
    <div class="botao">
        <a href="#" class="botao-portfolio">
            <i  class="far fa-eye"></i>
            veja mais.
        </a>
    </div>
</section>

I want to make a slider that alters the photos in <div> with the id="foto", but my code is "catching" the <div> with the class="botao". I wonder if it is possible not to "catch" last <div>. Thank you!

Follow the jQuery code:

function slider(sliderName) {
    var sliderClass = '.' + sliderName,
        activeClass = 'active';

    $('.slide > #foto:first').addClass('active');

    function rotateSlide() {
        var activeSlide = $(sliderClass + ' > .' + activeClass),
            nextSlide = activeSlide.next();

        if(nextSlide.length == 0) {
            nextSlide = $(sliderClass + ' > :first');
        }
        activeSlide.removeClass(activeClass);
        nextSlide.addClass(activeClass);
    }
}

slider('portfolio');
jquery
  • 1

    Matheus, paste as code into the question, then mark with the mouse and press the button { } (or press control K). Or, add four spaces at the beginning of each line of code.

1 answer

2


Just use nextSlide = activeSlide.next('#foto'); so instead of returning the next element, your query will only return the next element with id equal to photo.

Just one note: Don’t give the same id to two elements of your DOM, ids should be unique, this can cause various types of errors. Instead of having multiple elements with the photo id, have multiple elements with the photo class, and make queries using ". photo" instead of "#photo".

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.