多脚本

Question

在js脚本方面，我遇到了麻烦，我仍然在学习js，并且正在尝试在一个html中执行多个脚本，但是我没有得到很好的输出。我试着把刷卡换成-1和-2，但是什么都没发生。提前谢谢。

​

/*Image Slider css*/
.slidecontainer {
    margin: 0;
    width: 100%;
    height: 500px;
    background: ghostwhite;
}
.swiper {
    width: 100%;
    height: fit-content;
}
.swiper-slide img {
    width: 100%;
}
.swiper .swiper-button-next,.swiper .swiper-button-prev{
    color: #1C3879;
}
.swiper .swiper-button-next:hover,.swiper .swiper-button-prev:hover{
    color: #fff;
}
.swiper .swiper-pagination-bullet-active{
    background: #fff;
}

/*New arrivals css*/

.newarrivalscontainer{
    width: 100%;
    height: 100vh;
    background: #b8ae98;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .swiper{
    width: 80%;
    height: fit-content;
    }
    .swiper-slide img{
    width: 100%;
    }
    .swiper .swiper-button-prev-1,­ .swiper .swiper-button-next-1{
    color: #1C3879;
    }
    .swiper .swiper-pagination-1-b­ullet-active{
    background: #1C3879;
    }

​

同时，这是我的html代码，用于图像滑块1 div和图像滑块2 div (带有swiperjs)。

​

<!--Image Slider start-->
    <div class="slidecontainer">
         <!-- Slider main container -->
     <div class="swiper-1">
        <!-- Additional required wrapper -->
       <div class="swiper-wrapper">
         <!-- Slides -->
        <div class="swiper-slide"><img src="slideshow/slidesimg.png" alt=""></div>
        <div class="swiper-slide"><img src="slideshow/slidesimg.png" alt=""></div>
        <div class="swiper-slide"><img src="slideshow/slidesimg.png" alt=""></div>
        <div class="swiper-slide"><img src="slideshow/slidesimg.png" alt=""></div>
        <div class="swiper-slide"><img src="slideshow/slidesimg.png" alt=""></div>
       </div>
         <!-- If we need pagination -->
         <div class="swiper-pagination"></div>
  
           <!-- If we need navigation buttons -->
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
  
      </div>
      </div>

      <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js">

          const swiper1 = new Swiper('.swiper-1', {
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        loop: true,
      
        pagination: {
          el: '.swiper-pagination',
        },
      
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
      </script>
<!--Image Slider end-->

<!--New Arrivals start--->
<div class="newarrivalscontainer">
  <div class="swiper-2">
  <!-- Additional required wrapper -->
  <div class="swiper-wrappe­r">
  <!-- Slides -->
  <div class="swiper-slide"­><img src="images/­newarrival1.jpg"></­div>
  <div class="swiper-slide"­><img src="images/­newarrival2.jpg"></­div>
  <div class="swiper-slide"­><img src="images/­newarrival3.jpg"></­div>
  
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagina­tion-1"></div>
  
  <!-- If we need navigation buttons -->
  <div class="swiper-button­-prev-1"></div>
  <div class="swiper-button­-next-1"></div>
  
  </div>
  </div>

  <script>
    const swiper2 = new Swiper('.swiper-2', {
    autoplay: {
    delay: 3000,
    disableOnInteraction­: false,
    },
    loop: true,
    
    // If we need pagination
    pagination: {
    el: '.swiper-pagination-1'­,
    clickable: true,
    },
    
    // Navigation arrows
    navigation: {
    nextEl: '.swiper-button-next-1­',
    prevEl: '.swiper-button-prev-1­',
    },
    
    });
    </script>

​

Answer 1

带有src属性的脚本标记中的任何代码都是完全忽略的(除非src无法加载，在这种情况下，脚本标记中的代码充当后盾)。这意味着您需要使用javascript代码在下面创建一个新的 script标记，如下所示。

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script>

          const swiper1 = new Swiper('.swiper-1', {
        autoplay: {
          delay: 4000,
          disableOnInteraction: false,
        },
        loop: true,
      
        pagination: {
          el: '.swiper-pagination',
        },
      
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
</script>