Почему проблема с переменной в карусели?

Question

[Nikita_Migushev]

Есть слайдер, который должен перелистывать картинки.

В общем и целом, он работает.

Пытаюсь завернуть его в функцию.

При попытке объявить переменную и использовать ее в слайдере, он перестает работать.

А именно переменная slide.

Не понимаю, в чем проблема.

JQUERY

var slider = $(".sliderProductLine1")
var slide = $(".slideProductLine1");

    // Slider of product lines

    $('button.productNext').click(function () {
        slider.animate({ // Animate slider box
            marginLeft: '-=33.1%' // Move slider move 100% to the left
        }, 300, function () {
            // Set up speed and when done this run the function
            slide.first().appendTo($(this)) // Move the first element to the end of the slider
            $(this).css("margin-left", 0); // Set the slider box to the margin-left 0 as if it hasn't moved. So that we have two slides ahead. The last one is the first one. And this process repeats again and again
        });
    });

HTML

<section class="productCard productLine1">
        <div class="slideshowProduct">
          <div class="sliderProduct sliderProductLine1">
            <button class="productPrev"><i class="fas fa-chevron-left"></i></button>
            <button class="productNext"><i class="fas fa-chevron-right"></i></button>
            <div class="slideProduct slideProductLine1 flexitem active">
              <img src="images/Bike_1.svg" alt="">
              <div class="productDescription">
                <h2>1. Canondale Comfort Men's Bike</h2>
                <div class="flexcontainer price">
                  <p>$178.99</p>
                  <p><span>$212.99</span></p>
                </div>
              </div>
            </div>
            <div class="slideProduct slideProductLine1 flexitem">
              <img src="images/Bike_1-2.svg" alt="">
              <div class="productDescription">
                <h2>2. Canondale Comfort Men's Bike</h2>
                <div class="flexcontainer price">
                  <p>$178.99</p>
                  <p><span>$212.99</span></p>
                </div>
              </div>
            </div>
            <div class="slideProduct slideProductLine1 flexitem">
              <img src="images/Bike_1-3.svg" alt="">
              <div class="productDescription">
                <h2>3. Canondale Comfort Men's Bike</h2>
                <div class="flexcontainer price">
                  <p>$178.99</p>
                  <p><span>$212.99</span></p>
                </div>
              </div>
            </div>
            <div class="slideProduct slideProductLine1 flexitem">
              <img src="images/Bike1-4.svg" alt="">
              <div class="productDescription">
                <h2>4. Canondale Comfort Men's Bike</h2>
                <div class="flexcontainer price">
                  <p>$178.99</p>
                  <p><span>$212.99</span></p>
                </div>
              </div>
            </div>
            <div class="slideProduct slideProductLine1 flexitem">
              <img src="images/Bike1-5.svg" alt="">
              <div class="productDescription">
                <h2>5. Canondale Comfort Men's Bike</h2>
                <div class="flexcontainer price">
                  <p>$178.99</p>
                  <p><span>$212.99</span></p>
                </div>
              </div>
            </div>
            <div class="slideProduct slideProductLine1 flexitem">
              <img src="images/Bike1-6.svg" alt="">
              <div class="productDescription">
                <h2>6. Canondale Comfort Men's Bike</h2>
                <div class="flexcontainer price">
                  <p>$178.99</p>
                  <p><span>$212.99</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

Answer 1

[WhiteBearDev]

В переменную slide Вы записываете все найденные по селектору DOM-элементы. Но в манипуляциях с DOM, внутри обработчика click, на переменную slide изменения не отражаются никак. Соответственно переменная slide хранит в себе тот же самый список с теми же индексами элементов как и при инициализации. Как решение, рекомендую Вам в переменную slide записывать селектор элемента, и для перемещения элементов использовать поиск на месте. Вот так:

var slide = ".slideProductLine1";

и

$(slide).first().appendTo($(this))

Comments

[Nikita_Migushev]

Есть! Все работает. Спасибо за пояснения!