文章/答案/技术大牛

发布

社区首页 >问答首页 >javascript选择特定的swiper元素

问javascript选择特定的swiper元素
EN

Stack Overflow用户

提问于 2017-11-07 12:32:54

回答 1查看 4.1K关注 0票数 0

如何在javascript中的特定swiper元素上捕获select/touch事件？

这样做的目的是让用户使用滑动功能浏览一组图像并做出特定的选择。然后，这一选择将在代码的其他地方使用。

在下面的代码示例中，我想捕捉一个事件，以防止出现以下情况。按下‘幻灯片9’。

这在某种程度上意味着如何区分幻灯片的触摸和新闻/发布事件的触摸。非常感谢

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Multiple Swipers</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">

                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> </div>
                        <div class = "center">Multiple Swipers</div>
                        <div class = "right"> </div>
                     </div>
                  </div>

                  <div class = "page-content">


                     <div class = "content-block-title">4 Slides Per View, 10px Between</div>
                     <div class = "swiper-container swiper-4">
                        <div class = "swiper-pagination"></div>
                        <div class = "swiper-wrapper">
                           <div class = "swiper-slide"><span>Slide 1</span></div>
                           <div class = "swiper-slide"><span>Slide 2</span></div>
                           <div class = "swiper-slide"><span>Slide 3</span></div>
                           <div class = "swiper-slide"><span>Slide 4</span></div>
                           <div class = "swiper-slide"><span>Slide 5</span></div>
                           <div class = "swiper-slide"><span>Slide 6</span></div>
                           <div class = "swiper-slide"><span>Slide 7</span></div>
                           <div class = "swiper-slide"><span>Slide 8</span></div>
                           <div class = "swiper-slide"><span>Slide 9</span></div>
                           <div class = "swiper-slide"><span>Slide 10</span></div>
                        </div>
                     </div>



                  </div>
               </div>
            </div>
         </div>
      </div>

      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

      <style>
         .swiper-slide {
            background:#fff;
            box-sizing:border-box;
            border:1px solid #ccc;
            line-height:120px;
            text-align:center;
         }

         .swiper-slide span {
            font-size:17px;
         }
         .swiper-container {
            height:120px;
            margin:0px 0 35px;
         }
      </style>

      <script>
         var myApp = new Framework7();

         // 4 Slides Per View, 10px Between
         var mySwiper4 = myApp.swiper('.swiper-4', {
            pagination:'.swiper-4 .swiper-pagination',
            spaceBetween: 10,
            slidesPerView: 4,
         });
      </script>
   </body>

</html>

javascript

html-framework-7

swiper.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-07 18:02:27

在滑块的单击操作上使用mySwiper.activeIndex获取单击幻灯片的索引号。

http://idangero.us/swiper/api/#methods

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47158121

复制

相似问题

问javascript选择特定的swiper元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript选择特定的swiper元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问javascript选择特定的swiper元素
EN