css 禁用下一个按钮后1点击滑动器

qq24tv8q  于 2023-02-17  发布在  其他
关注(0)|答案(1)|浏览(131)

我有一个疑问,因为文档不是很清楚,我想点击右边的下一个按钮,然后用左边的按钮返回,因为在我的代码中,它可以转到下一个按钮,然后用下一个按钮返回,我想只需要点击一下就可以转到旁边,另一个按钮可以返回我的示例:
我正在使用SWIPER执行以下操作:

var swiper = new Swiper(".slide-content", {
  slidesPerView: 3,
  spaceBetween: 25,
  loop: true,
  centerSlide: 'true',
  fade: 'true',
  grabCursor: 'true',
  slidesPerGroup: 3,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
    dynamicBullets: true,
  },
  navigation: {
    nextEl: ".swiper-button-next" ,
    prevEl: ".swiper-button-prev",
  },

  breakpoints:{
      0: {
          slidesPerView: 1,
      },
      520: {
          slidesPerView: 2,
      },
      950: {
          slidesPerView: 3,
      },
  },
});
<div class="slide-container swiper">
                                            <div class="sldsss"> 

                                                <div class="imgg">
                                                <img src="/static/aaa/dr.png" alt="" class="card-img">
                                                </div>

                                                <div class="slide-content">
                                                    <div class="card-wrapper swiper-wrapper">
                                                        
                                                      
                                                      
                                                      
                                                      
                                                      <div class="card swiper-slide">

                                                  



                                                            <div class="pscc">
                                                                
                                                              
                                                              <div id="cap1" class="card-image">
                                                                    <img src="/static/aaa/cp.png" alt="" class="card-img">
                                                                </div>
                                                             </div>

                                                            <video id="vdd1" class="vdd1" src="/static/aaa/videodr.mp4" controls>
                                                              <p>Seu navegador não suporta o vídeo. aqui está um <a href="https://drive.google.com/file/d/1O6lQZFBjgJsJELhmrM-I8R_cXiJWQFWx/view?usp=sharing">link para o video</a> instantâneo.</p>
                                                            </video>

                                                            <div onclick="ply1()" id="pl1" class="pl1">
                                                                <a href="##">
                                                                    <ion-icon class="pll1"  name="play-circle-outline"></ion-icon>
                                                                </a>
                                                            </div>


                                                        </div>









                                                        <div class="card swiper-slide">
                                                            <div class="image-content">


                                                            <div id="cap2" class="card-image0">
                                                                    <img src="/static/aaa/cp2.png" alt="" class="card-img0">
                                                                    
                                                                </div>
                                                            </div>


                                                            <video id="vdd2" class="vdd2" src="/static/aaa/vd2.mp4" controls>
                                                              <p>Seu navegador não suporta o vídeo. aqui está um <a href="https://drive.google.com/file/d/1EHusRbjEWghjTMwJgdm255aLDE2Eew-H/view?usp=share_link">link para o video</a> instantâneo.</p>
                                                            </video>



                                                            <div id="pl2" onclick="ply2()" class="pl2">
                                                                <a href="##">
                                                                    <ion-icon class="pll1"  name="play-circle-outline"></ion-icon>
                                                                </a>
                                                            </div>

                                                        
                                                        </div>












                                                        <div class="card swiper-slide">
                                                            <div class="image-content">

                                                                <div id="cap3" class="card-image1">
                                                                    <img src="/static/aaa/cp3.png" alt="" class="card-img1">
                                                                </div>
                                                            </div>


                                                            <video id="vdd3" class="vdd3" src="/static/aaa/vd3.mp4" controls>
                                                              <p>Seu navegador não suporta o vídeo. aqui está um <a href="https://drive.google.com/file/d/1OdQH_-yx76pusb4A9kNKkbLZ1WMCIFl-/view?usp=share_link">link para o video</a> instantâneo.</p>
                                                            </video>





                                                            <div id="pl3" onclick="ply3()" class="pl3">
                                                                <a href="##">
                                                                    <ion-icon class="pll1"  name="play-circle-outline"></ion-icon>
                                                                </a>
                                                            </div>

                                                        


                                                        </div>




                                                        <div class="card swiper-slide">
                                                            <div class="image-content">

                                                                <div class="card-image2">
                                                                    <img src="/static/aaa/cp4.jpg" alt="" class="card-img2">
                                                                </div>
                                                            </div>

                                                        
                                                        </div>





                                                        <div class="card swiper-slide">
                                                            <div class="image-content">

                                                                <div class="card-image3">
                                                                    <img src="/static/aaa/cp5.jpg" alt="" class="card-img3">
                                                                </div>
                                                            </div>

                                                        
                                                        </div>






                                                        <div class="card swiper-slide">
                                                            <div class="image-content">

                                                                <div class="card-image4">
                                                                    <img src="/static/aaa/cp6.jpg" alt="" class="card-img4">
                                                                </div>
                                                            </div>

                                                        
                                                        </div>



                                                    </div>
                                                </div>



                                                
                                                <div class="swiper-button-next swiper-navBtn"></div>
                                                <div class="swiper-button-prev swiper-navBtn"></div>
                                                <div class="swiper-pagination"></div>




                                        </div>
                                      </div>
6jjcrrmo

6jjcrrmo1#

很简单,我的朋友,只要禁用循环,所以你的下一个将不再工作,我相信就是这样。

循环:假,

变量滑动器=新滑动器(“.slide-content”,{幻灯片每视图:3,间距:25,循环:假,中心幻灯片:“真”,淡入:'true',抓取光标:'true',每组幻灯片数:3、分页:{ el:“.swiper-pagination”,可点击:true,动态项目符号:真,},导航:{下一个El:“.滑动键-下一个”,上一个El:“.滑动键-上一个”,},
断点:{ 0:{幻灯片每视图:1、}、520:{幻灯片每视图:2、}、950:{幻灯片每视图:3、}、}、});

相关问题