javascript 我需要两张幻灯片一起移动

epfja78i  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(126)

我尝试在滑动手指时使2行同时移动,即使在辅助幻灯片上滑动手指也能正常工作,如果我尝试仅在主幻灯片上滑动手指,也能正常工作。我尝试了我知道的一些资源,但仍然不起作用,如果有人能帮助我,我会很高兴的

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<div class="carousel">
  <div class="swiper-container main-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="product">
          <!-- conteúdo do produto -->
            1          
          
          
        </div>
      </div>
      <div class="swiper-slide">
        <div class="product">
         2
        </div>
      </div>
      
      
      <div class="swiper-slide">
        <div class="product">
          3
        </div>
   
      </div>
      
      </div>
    <div class="swiper-container secondary-slider">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="product">
         4
        </div>
      </div>
        
        
        <div class="swiper-slide">
        <div class="product">
         5
        </div>
      </div>
        
        
        <div class="swiper-slide">
        <div class="product">
          6
        </div>
      </div>
      
      
      <!-- Adicione mais slides aqui -->

    
   
  </div>

</div>
    
    
    
    

  

    

  
  
  
  






<style>
  

  
    .swiper-wrapper {
      height: 230px; /* defina a altura do slide aqui */
    }
  

  
  
  
  .carousel-row {
  display: flex;
  width: 120%;
  height: 240 /*altura entre os produtos*/
}
  
  .carousel {
  position: relative;
  width: auto;  
  scroll-snap-type: x mandatory;
}

.carousel-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none; /* para Internet Explorer e Edge */
  scrollbar-width: none; /* para Firefox */
  -webkit-scrollbar: none; /* para Chrome, Safari e Opera */
}
  
.carousel-wrapper::-webkit-scrollbar {
  display: none;
}
  
  

  .carousel-slide {
    flex: 0 20 100%;
    height: 320px;
    scroll-snap-align: center;
    text-align: center;
    font-size: 24px;
    background-color: #ffffff;
    margin: 0px
      
  }

  .carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border: none;
  }
 
  .carousel-indicator {
  width: 6;
  height: 6;
  margin: 20 1px;
  border-radius: 10%;
  border: none;
  background-color: #ccc6;
}
  .carousel-indicator.active {
  background-color: #aaa;
}
  
.carousel-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1px;
}

.carousel-pagination button {
  border: none;
  background-color: transparent;
  width: auto;
  height: auto;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}

.carousel-pagination button.active {
  background-color: #333;
}
  
  
  
  .product {
    
  width: calc(25% - 5px);
  margin: 50 50px50px 5;
      
    flex: 0 0 300px;
margin-top: 20px;
  display: inline-block;
   margin-right: 5px;/*define o espaçamento entre os produtos*/
  justify-content: space-between;
  align-items: center;
  width: 220px; /*define a largura da filha box*/
  height: 195px; /*define a altura da filha box*/
  padding: 10px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.rating-heart {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.rating {
  font-size: 20px;
  color: #FAB517;
  margin-bottom: 1px;
}
  
  .qtd {
    margin-right: 180px; /*ajusta o gap entre os elementos right,left,top,bottom*/
    font-size: 15px;
    color: #6E6F71;
    font-family: sans-serif;
    padding-left: 0px;
  }  

.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;/*define a largura do conteúdo das caixas*/
  height: 130; /*define a altura do conteúdo das caixas*/
  margin-bottom: -10px;
}

img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  margin-bottom: 20px;
}

.description {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  gap: 5px; /* gap entre preço e descrição */
  margin-bottom: 70px;
  position: relative;
 
  
}

  .description, .description h2, .description p, .price {
  padding-left: 5px;
}
  
  
.description h2 {
  font-family: sans-serif;
  color: #373B4D;
  text-align: left;
  font-size: 11px;
  font-weight: bold;
  height: 65px;
  padding-top: 15px;
  margin-top: 20px;
  margin-bottom:-1
  
}

.description p {
  font-family: sans-serif;
  color: #373B4D;
  font-size: 10px;
  margin-bottom: 3px;
  margin-top: 3px;
  left:10 
  position: fixed;
}

.price {
  font-family: sans-serif;
  color: #7339C9;
  font-size: 18px;
  font-weight: bolder;
  margin-bottom: 1px;
  position: absolute;
  top: 120;
   
   

}

.carrinho {
   text-decoration: none;
  width: 15px;
  height: 15px;
  background-image: url('https://uploaddeimagens.com.br/images/004/354/391/original/carrinho-de-compras_%281%29.png?1676444933');
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 10px;
  margin-bottom: 2px;
  gap: 10px; /* adição da propriedade gap com valor 5px */
}
  
.buy-button {
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  font-family: sans-serif;
  background-color: #7339C9; 
  
   
  color: white;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s;
  
}
  

.buy-button:hover {
   text-decoration: none;
  background-color: #7B1FA2;
}

.buy-button i {
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  margin-right: 15px;/*distância entre icone e "comprar"*/
  
}
</style>   

<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<script>
 var mainSwiper = new Swiper('.main-slider', {
    loop: true,
    slidesPerView: 'auto',
    spaceBetween: 250,
    navigation: {
        nextEl: '.main-slider .swiper-button-next',
        prevEl: '.main-slider .swiper-button-prev',
    },
    controller: {
        control: secondarySwiper,
        by: 'container'
    }
});
  

var secondarySwiper = new Swiper('.secondary-slider', {
    loop: true,
    slidesPerView: 'auto',
    spaceBetween: 250,
    navigation: {
        nextEl: '.secondary-slider .swiper-button-next',
        prevEl: '.secondary-slider .swiper-button-prev',
    },
    controller: {
        control: mainSwiper,
        by: 'container'
    }
});

mainSwiper.init();
secondarySwiper.init();
</script>
jm81lzqq

jm81lzqq1#

要使手指在主转盘上滑动时两个转盘同时移动,需要将touchEventsTarget选项添加到mainSwiper示例并将其设置为.“secondary-slider”。这将在手指在主转盘上滑动时启用辅助转盘上的触摸事件,两个转盘将一起移动。
下面是一个基于您的代码的示例:

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />

<div class="carousel">
  <div class="swiper-container main-slider">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="product">
          <!-- conteúdo do produto -->
          1
        </div>
      </div>
      <div class="swiper-slide">
        <div class="product">
          2
        </div>
      </div>
      <div class="swiper-slide">
        <div class="product">
          3
        </div>
      </div>
    </div>
    <div class="swiper-container secondary-slider">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="product">
            4
          </div>
        </div>
        <div class="swiper-slide">
          <div class="product">
            5
          </div>
        </div>
        <div class="swiper-slide">
          <div class="product">
            6
          </div>
        </div>
        <!-- Adicione mais slides aqui -->
      </div>
    </div>
  </div>
</div>

<style>
  .swiper-wrapper {
    height: 230px; /* defina a altura do slide aqui */
  }

  .carousel-row {
    display: flex;
    width: 120%;
    height: 240 /*altura entre os produtos*/
  }

  .carousel {
    position: relative;
    width: auto;
    scroll-snap-type: x mandatory;
  }

  .carousel-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none; /* para Internet Explorer e Edge */
    scrollbar-width: none; /* para Firefox */
    -webkit-scrollbar: none; /* para Chrome, Safari e Opera */
  }

  .carousel-wrapper::-webkit-scrollbar {
    display: none;
  }

  .carousel-slide {
    flex: 0 20 100%;
    height: 320px;
    scroll-snap-align: center;
    text-align: center;
    font-size: 24px;
    background-color: #ffffff;
    margin: 0px
  }

  .carousel-indicators {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border: none;
  }

  .carousel-indicator {
    width: 6;
    height: 6;
    margin: 20 1px;
    border-radius: 10%;
    border: none;
    background-color: #ccc6;
  }

  .carousel-indicator.active {
    background-color: #aaa;
  }

  .carousel-pagination {
    display: flex

相关问题