Я хочу сделать слайдер с поменять местами вместо перемещения с JQuery

Question

В этом ползунке я хочу, чтобы изображения перемещались вместо перемещения, я имею в виду, что первое изображение исчезает со своего места, а второе исчезает при замене первого - на месте первого изображения - и второй исчезает со своего места, а третий заменяет второй - вместо второго изображения -

<div class="side-imgs">
                      <div class="eac-img" style="background-image: url(images/Egypt_header_sm.jpg)" > </div>
                      <div class="eac-img" style="background-image: url(images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg)"> </div>
                      <div class="eac-img" style="background-image: url(images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg)"> </div>
                      <div class="eac-img" style="background-image: url(images/cairo2013-700x.jpg)"> </div>
                      <div class="eac-img" style="background-image: url(images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg)" ></div> 
                      <div class="eac-img" style="background-image: url(images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg)" > </div>
                      <div class="eac-img" style="background-image: url(images/Egypt_header_sm.jpg)" > </div>
                      <div class="eac-img" style="background-image: url(images/luxorfuntours.png)" > </div>
                      <div class="eac-img"  style="background-image: url(images/unnamed.jpg)"> </div>
                        <div class="eac-img" style="background-image: url(images/Egypt_header_sm.jpg)" > </div>     
                      <div class="eac-img"  style="background-image: url(images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg)" > </div>

                  </div>

Я пытался использовать этот код, но он не работает

 var i;
    var theimg = $('.side-imgs .eac-img'); 

        for (i = 0; i < theimg.length; i++) {

           theimg.eq(i).delay(3000).fadeOut(1000).next().fadeIn(1000).delay(3000);
        }

Я также попробовал этот, но он тоже не работает

(function autoSlider() { 

        $('.side-imgs .eac-img').each(function () {
                        $(this).delay(4000).fadeOut(100).next().fadeIn(200);

        });
                autoSlider();  


    }());

Я преобразовал div в изображения, чтобы изменить sr c

<div class="side-imgs">
                      <div class="side-overlay"></div>
                      <img class="eac-img " src="images/Egypt_header_sm.jpg" >
                      <img class="eac-img " src="images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg" >
                      <img class="eac-img " src="images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg" >
                      <img class="eac-img " src="images/cairo2013-700x.jpg" >
                      <img class="eac-img " src="images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg" >
                      <img class="eac-img " src="images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg" >
                      <img class="eac-img " src="images/Egypt_header_sm.jpg" >
                      <img class="eac-img " src="images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg" >
                      <img class="eac-img " src="images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg" >
                      <img class="eac-img " src="images/cairo2013-700x.jpg" >
                      <img class="eac-img " src="images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg)" >
                      <img class="eac-img" src="images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg" >
                      <img class="eac-img" src="images/luxorfuntours.png" >




                  </div>

, и я использовал это JS код, но все еще не работает

function slidingImages()
{
    images = ['images/Egypt_header_sm.jpg', 'images/28273351-chilling-out-sitting-rim-cliff-in-the-mountain.jpg','images/180933-1-Blue_Lagoon,_Dahab,_Egypt.jpg','images/cairo2013-700x.jpg','images/cairo_giza_gizeh_egypt_pyramid_camels_camel_donkey-327500.jpg_d_str7yz.jpg','images/egypt-tourism-authority-launches-first-new-global-marketing-campaign-in-more-than-four-years-seeking-to-double-number-of-visitors-by-2020.jpg'];

   var random = images[Math.floor(Math.random()*images.length)];
   document.querySelectorAll('.side-imgs .eac-img').src= random;

    setTimeout(slidingImages, 2000);
}


slidingImages();

Answer 1

Вы также можете просто манипулировать этим путем вставки / удаления стилей:

const img = document.querySelectorAll('.eac-img');
currentindex = 0;
const nextImg = () => {

  img[currentIndex].classList.remove('active');
  currentIndex++;

  if (currentIndex === imageSlide.length) {
      currentIndex = 0;
  }

  imageSlide[currentIndex].classList.add('active');

}

Просто убедитесь, что вы сделаете класс 'активным' {display: block} и другие {disbplay: none}. Таким образом, когда «активный» удаляется, изображение исчезает, и появляется следующее изображение, потому что у него будет класс «активный»;

Answer 2

Для начала ваш родительский класс - "show-img", а в коде Javascript, который вы показали, родительский класс - "side-imgs", подумайте над тем, чтобы взглянуть на свой код, прежде чем обращаться за помощью, вы можете узнать больше, сделав это.

Эта тема была рассмотрена ранее здесь

Но я привел пример того, как вы можете достичь этого, найдите его здесь: https://jsfiddle.net/edonrexhepi/t9dph1gm/

Приведенный выше код будет повторяться во всех узлах с className images--each и для каждого из них будет изменен индекс переменных 'currentSlide' и 'prevSlide', добавит 'visible' className к индексу, который собирается и удалит его из того, что уходит.

---

ОБНОВЛЕНИЕ: На основании комментария ниже

Пожалуйста, проверьте этот ответ: https://jsfiddle.net/edonrexhepi/9vmpjh67/

Я смешал jQuery и Ваниль, пожалуйста, дай мне знать, если это то, что ты хотел сделать, я исправлю код немного подробнее.

Кстати, почему ты не используешь что-то вроде Swiper или Flickity?