首页 > 其他分享 >解决swiper轮播时候点击click触发不了,且获取不到当前点击的数据问题

解决swiper轮播时候点击click触发不了,且获取不到当前点击的数据问题

时间:2024-09-05 17:18:45浏览次数:10  
标签:function 轮播 clickedSlide 点击 swiperPlat true click swiper autoplay

查阅官网,可以通过监听on,以及clickedSlide解决。

html代码如下:

<div
            class="swiperPlat"
            style="overflow: hidden; width: 1200px; position: relative"
          >
            <div class="swiper-wrapper" style="width: 100%; height: 520px">
              <div
                class="swiper-slide"
                style="background: #fff"
                v-for="(item, index) in expertList"
                v-if="item.homeShow == '1'"
                :key="item.id"
                :dataCode="item.id"
              >
                <div class="swiper-slide-content">
                  <img
                    :src="imgPublic + item.imageFilePath"
                    alt=""
                    class="list-img"
                  />
                  <div class="expert-name">
                    <div class="name-style">{{ item.name }}</div>
                    <div class="title-style">
                      {{ item.label[0] }}
                    </div>
                  </div>
                  <div class="expert-remark">{{ item.desc }}</div>
                </div>
              </div>
            </div>
          </div>

  js

 var swiperPlat = new Swiper(".swiperPlat", {
      slidesPerView: 4,
      initialSlide: 0,
      setWrapperSize: true,
      autoplay: true,
      autoplay: {
        delay: 3000,
        pauseOnMouseEnter: true,
        disableOnInteraction: false,
      },
      loop: true,
      direction: getDirection(),
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      on: {
        resize: function () {
          swiperPlat.changeDirection(getDirection());
        },
        click: function (swiper, event) { 
          if (swiperPlat.clickedSlide) {
            const code = swiperPlat.clickedSlide.attributes.dataCode.value;
            console.log(code);
            that.pathToExpertList();
          }
        },
        init: function () {
          // 添加鼠标移入和移出事件监听器
          var swiperContainer = document.querySelector(".swiperPlat");
          swiperContainer.addEventListener("mouseenter", function () {
            swiperPlat.autoplay.stop(); // 鼠标移入停止自动播放
          });
          swiperContainer.addEventListener("mouseleave", function () {
            swiperPlat.autoplay.start(); // 鼠标移出恢复自动播放
          });
        },
      },
    });

  

标签:function,轮播,clickedSlide,点击,swiperPlat,true,click,swiper,autoplay
From: https://www.cnblogs.com/sweeeper/p/18398859

相关文章

  • ProComponents——ProForm,设置初始值后,点击【重置】按钮,值已清除但页面未更新
     我的问题umi+antd,使用ProComponents的QueryFilter表单进行列表筛选,首页有个进入列表的快捷跳转,会筛选列表状态(在线1/离线0)。设置筛选状态初始值为1后,点击【重置】按钮:1.打印初始值1已清除,但页面上未更新,仍显示筛选在线状态2.点击2次【重置】按钮,页面才会更新3.点击下拉框的......
  • uniapp中@tap与@click点击事件的差异
    在uniapp的开发过程中,我们经常会遇到两种点击事件:@tap和@click。虽然它们都是点击事件,但在实际使用中却存在一些微妙的差异。首先,让我们来看看它们的触发时机。在uniapp中,@click事件是在组件被点击且手指离开屏幕后才触发的,这意味着它会有一个大约300ms的延迟。这种......
  • 记录 macos 链接 win10 wsl2 ubuntu clickhouse 记录
    遇到了许多问题顺序应该不同首先就是链接的客户端是DBeaver链接的时候要选择版本低版本的用legacy,   驱动也很重要,下不到驱动的可以用网上找的驱动来安装  有的时候会有类名的问题但是报错很离谱会报  dbeaverclickhouse链接错误code:46Unknow......
  • 高德地图,只有部分marker显示InfoWindow并可点击
    高德地图,只有部分marker显示InfoWindow并可点击   原因:加了MarkerCluster//将所有的标记点添加到markercluster//markercluster//markerLayer.setMarkers(markers);//markercluster//this.cluster=newAMap.MarkerCluster(//this.map,//地图......
  • pbootcms模板调用幻灯片轮播图标签
    在PbootCMS中,你可以使用 {pboot:slide} 标签来调用幻灯片轮播图。以下是如何在模板中使用该标签的具体方法:幻灯片轮播图标签示例1.基本用法假设你需要在一个页面上显示某个分组的幻灯片轮播图,可以按照以下方式编写模板代码:html <!--示例:幻灯片轮播图--><divclass......
  • 油猴脚本自动填写vue页面登录表单,点击登录按钮值被清空了
    直接设置input的value是不行的,因为这个时候没有触发vue里的input事件,vue里绑定变量的值没变为什么?直接修改value应该是会触发@input的才对啊?inputEl.value='xxx'解决方案是:需要手动dispathinputletev=newEvent('input');inputEl.dispatchEvent(ev)示例:(function(......
  • clickhouse组件介绍
    写在前面今天学习clickhouse部分的知识。ClickHouseOLTP(联机事务处理系统)例如MySQL等关系型数据库,适用于小数据量时的快速查询和分析。OLTP主要针对增删改操作,数据经常发生变化。OLAP(联机分析处理系统)适用于数据长期不变且有大量历史数据的场景,主要进行分析操作,增......
  • Winform点击按钮Panle切换页面的实现
    一、项目结构二、主界面Main.csPanelName:panel1 三、代码实现namespace测试窗口切换{publicpartialclassMain:Form{//先定义对应的私有字段privateCmmPage_cmmPage;privateTwoPage_twoPage;publicMain()......
  • 使用zig语言制作简单博客网站(七)右边栏分类点击和文章搜索
    分类点击事件处理后端代码sqlite数据库article表新增cate_name字段CREATETABLEarticle(idINTEGERPRIMARYKEYAUTOINCREMENT,titleVARCHAR(1024)NOTNULL,descriptionVARCHAR(1024),contentTEXTNOTNUL......
  • 点击后隐藏图片,再次点击显示是否有方法实现?
    你可以使用JavaScript来实现这个功能。以下是一个简单的示例:<!DOCTYPEhtml><html><body><imgid="myImage"src="image.jpg"onclick="toggleImage()"><script>functiontoggleImage(){varimage=documen......