问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何处理移动端flickity滑完后的空白问题？

头像
陈杰
    1
    新手上路，请多包涵

    由于产品的有多个变体属性，每个属性又对应很多图片，图片太多了，于是我添加了代码来实现点击产品的选项值，来展示对应alt值的图片，而其他未被选择的选项值对应的图片隐藏。PC端完成了此效果，但是移动端没有完全响应。移动端采用的是轮播图方式flickity控制。当图片滑完时会显示空白，正常效果应该是滑到最后一张不能滑动了，或者自动跳转到第一张图片，请问如何实现这个效果？

    //这是加的判断，根据产品变体的选项值组合等于图片的alt值来对应展示图片，其他产品图片隐藏。

     _filterThumbnails: function(variant){
      console.log(variant);
      selector = "";
      option = variant.options;
      $('[data-title]').hide();
      for(var i=0;i<option.length;i++){
       selector = selector + option[i];
       if(i < option.length-1){
         selector = selector + '/';
       }
      }
      var thumbnail_selector = "[data-title='" + selector +"']";
      $(thumbnail_selector).show()；
    },

    //PC端已经完成了此效果。移动端也有此效果，但是滑完该选项值组合对应的图片后，任然可以滑动，并显示空白。


    想要的效果是滑到最后一张不能滑动了，或者自动滑动到第一张图片。PC端图片展示方式是平铺的，不需要滑动展示所以没有这个问题。请问给为前辈如何调整移动端flickity的js来响应上面的判断？

    javascripthtml前端css
    阅读 543
    avatarAI BotBETA

    在处理移动端flickity滑完后的空白问题时，你可以尝试使用Flickity的"wrapAround"选项。这个选项可以在轮播图滑动到尽头时自动循环到起始位置，避免了出现空白的问题。在你的代码中，你可以尝试添加以下代码：

    var flickity = new Flickity(element, {
  // 其他配置项...
  wrapAround: true
});

    其中，element是你要应用flickity的DOM元素。通过设置wrapAround为true，当轮播图滑动到最后一张图片时，会自动循环到第一张图片。

    如果你想在滑动到最后一页后禁止用户继续滑动，可以使用flickity.pointer.disable方法来禁用用户交互。例如：

    flickity.on('end', function() {
  flickity.pointer.disable();
});

    在这个例子中，当滑动结束时，end事件被触发，然后禁用用户交互。你可以根据需要修改这个事件和操作。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题