title: swiper slider in javascript slide all layers in the background
body: <p>i have a swiper slider which has 4 layers, the first layer is static which is the whole background, i want the second (bg1 and bg2) to autoplay/slide, now only the 4th layer is autoplaying/moving,my code is like below:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var swiper = new Swiper('.product-slider', {
              spaceBetween: 30,
              effect: 'fade',
              // initialSlide: 2,
              loop: false,
              navigation: {
                  nextEl: '.next',
                  prevEl: '.prev'
              },
  
                      autoplay: {
           delay: 5000,
       },
              // mousewheel: {
              //     // invert: false
              // },
              on: {
                  init: function(){
                      var index = this.activeIndex;
  
                      var target = $('.product-slider__item').eq(index).data('target');
  
                      console.log(target);
  
                      $('.product-img__item').removeClass('active');
                      $('.product-img__item#'+ target).addClass('active');
                  }
              }
  
          });
  
          swiper.on('slideChange', function () {
              var index = this.activeIndex;
  
              var target = $('.product-slider__item').eq(index).data('target');
  
              console.log(target);
  
              $('.product-img__item').removeClass('active');
              $('.product-img__item#'+ target).addClass('active');
  
              if(swiper.isEnd) {
                  $('.prev').removeClass('disabled');
                  $('.next').addClass('disabled');
              } else {
                  $('.next').removeClass('disabled');
              }
  
              if(swiper.isBeginning) {
                  $('.prev').addClass('disabled');
              } else {
                  $('.prev').removeClass('disabled');
              }
          });
  
  
  
  
  
          $(".js-fav").on("click", function() {
              $(this).find('.heart').toggleClass("is-active");
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper" id="nino" style="margin-top:3%"&gt;
  
        &lt;div class="content"&gt;
  
              &lt;div class="loja"&gt;
          &lt;div class="bg-shape" id="bg1"&gt;
            &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405214/starwars/logo.webp" alt=""&gt;
          &lt;/div&gt;
          &lt;div class="bg-shape" id="bg2"&gt;
            &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405214/starwars/logo.webp" alt=""&gt;
          &lt;/div&gt;
        
  &lt;/div&gt;
  
  
          &lt;div class="product-img"&gt;
  
            &lt;div class="product-img__item" id="img1"&gt;
              &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-1.webp" alt="star wars" class="product-img__img"&gt;
            &lt;/div&gt;
  
            &lt;div class="product-img__item" id="img2"&gt;
              &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-2.webp" alt="star wars" class="product-img__img"&gt;
            &lt;/div&gt;
  
            &lt;div class="product-img__item" id="img3"&gt;
              &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405218/starwars/item-3.webp" alt="star wars" class="product-img__img"&gt;
            &lt;/div&gt;
  
            &lt;div class="product-img__item" id="img4"&gt;
              &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405215/starwars/item-4.webp" alt="star wars" class="product-img__img"&gt;
            &lt;/div&gt;
  
  
          &lt;/div&gt;
  
  
  
          &lt;div class="product-slider"&gt;
            &lt;button class="prev disabled"&gt;
              &lt;span class="icon"&gt;
                &lt;svg class="icon icon-arrow-right" style="margin-top:-20px"&gt;&lt;use xlink:href="#icon-arrow-left"&gt;&lt;/use&gt;&lt;/svg&gt;
              &lt;/span&gt;
            &lt;/button&gt;
            &lt;button class="next"&gt;
              &lt;span class="icon"&gt;
                &lt;svg class="icon icon-arrow-right" style="margin-top:-20px"&gt;&lt;use xlink:href="#icon-arrow-right"&gt;&lt;/use&gt;&lt;/svg&gt;
              &lt;/span&gt;
            &lt;/button&gt;
  
            &lt;div class="product-slider__wrp swiper-wrapper"&gt;
              &lt;div class="product-slider__item swiper-slide" data-target="img4"&gt;
                &lt;div class="product-slider__card"&gt;
                  &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405223/starwars/item-4-bg.webp" alt="star wars" class="product-slider__cover"&gt;
                  &lt;div class="product-slider__content"&gt;
                    &lt;h1 class="product-slider__title" style="color:white"&gt;
                      STORMTROPER &lt;br&gt;
                      HELMET
                    &lt;/h1&gt;
                    &lt;span class="product-slider__price"&gt;$1.299,&lt;sup&gt;99&lt;/sup&gt;&lt;/span&gt;
  
  
  
  
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
                      &lt;div class="product-slider__item swiper-slide" data-target="img1"&gt;
                          &lt;div class="product-slider__card"&gt;
                              &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405223/starwars/item-4-bg.webp" alt="star wars" class="product-slider__cover"&gt;
                              &lt;div class="product-slider__content"&gt;
                                  &lt;h1 class="product-slider__title" style="color:white"&gt;
                                      STORMTROPER &lt;br&gt;
                                      HELMET
                                  &lt;/h1&gt;
                                  &lt;span class="product-slider__price"&gt;$1.299,&lt;sup&gt;99&lt;/sup&gt;&lt;/span&gt;
  
  
  
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="product-slider__item swiper-slide" data-target="img2"&gt;
                          &lt;div class="product-slider__card"&gt;
                              &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405223/starwars/item-4-bg.webp" alt="star wars" class="product-slider__cover"&gt;
                              &lt;div class="product-slider__content"&gt;
                                  &lt;h1 class="product-slider__title" style="color:white"&gt;
                                      STORMTROPER &lt;br&gt;
                                      HELMET
                                  &lt;/h1&gt;
                                  &lt;span class="product-slider__price"&gt;$1.299,&lt;sup&gt;99&lt;/sup&gt;&lt;/span&gt;
  
  
  
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="product-slider__item swiper-slide" data-target="img3"&gt;
                          &lt;div class="product-slider__card"&gt;
                              &lt;img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405223/starwars/item-4-bg.webp" alt="star wars" class="product-slider__cover"&gt;
                              &lt;div class="product-slider__content"&gt;
                                  &lt;h1 class="product-slider__title" style="color:white"&gt;
                                      STORMTROPER &lt;br&gt;
                                      HELMET
                                  &lt;/h1&gt;
                                  &lt;span class="product-slider__price"&gt;$1.299,&lt;sup&gt;99&lt;/sup&gt;&lt;/span&gt;
  
  
  
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
  
            &lt;/div&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
  
  
  
      &lt;/div&gt;
      
  
      &lt;script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>actually i am new to swiper and javascript sliders,can anyone please help me, thanks in advance</p>