个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试弄清楚如何在 bx-slider 插件中执行向左滑动和向右滑动的手势。我问的原因是因为我有一个 bx-slider 可以将图像 slider 与字幕 slider 同步。从最后一张到第一张幻灯片会发生什么，当我在图像上向左滑动时，标题反向并从右侧滑入，这是我不想要的。我正在为 bx-slider 寻找一个简单但不过于复杂的解决方案来检测向左滑动并执行上一个幻灯片过渡。
我研究过这个功能并看到了 hammer.js、touchswipe 和 jquery mobile 的 swipeleft 功能(想使用这个，但只针对 jquery mobile 库，而不是 jquery 本身)但我真的不想使用用于简单滑动功能的库，并且有太多代码无法在 Javascript 中从头开始完成。
我从来没有真正研究过 bx-slider 的代码，但是是否可以添加或检测滑动手势，所以当我在图像上向左滑动时，bx-slider 将 goToPrevSlide() 作为滑动默认情况下正确在移动设备上完美运行？
这是我的图像 slider 和字幕 slider 代码:
// for image slider
var bx = $('#hero .bxslider').bxSlider({
auto: true,
infiniteLoop: true,
pager: false,
controls: true,
pause: 5000,
onSlideBefore: syncTextSlider,
});
// for caption slider
var cx = $("#slider-text").bxSlider({
infiniteLoop: true,
pager: false,
controls: false,
preventDefaultSwipeX: true, // prevent swiping x-axis on mobile
preventDefaultSwipeY: false, // prevent swiping y-axis on mobile
touchEnabled: false, // prevent touch transitions on the bxslider; make 'true' if implementing slider controls
});
// function to sync bx slider with cx slider
function syncTextSlider($ele, from, to) {
cx.goToNextSlide(to);
}
最佳答案
这个版本我来了 180 度。 OP 期望的行为几乎是正常行为。快速分割:
#slider-text.bxslider 上的所有回调#slider-text 的幻灯片添加到 .bxslider现在从最后一张幻灯片到第一张幻灯片的过渡看起来自然流畅。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35486338</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<style>
/* Remove style to relocate controls to original position */
.bx-controls-direction a {
top: 55% !important;
}
</style>
</head>
<body>
<!--image slider desktop-->
<div id="hero">
<ul class="bxslider">
<li>
<img src="http://placehold.it/350x150/000/0ff/?text=1" class="slider-img-responsive">
<nav>
<h1>Title 1</h1>
<h2>Byline 1</h2>
<a href="www.google.com">Button 1</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/fff/?text=2" class="slider-img-responsive">
<nav>
<h1>Title 2</h1>
<h2>Byline 2</h2>
<a href="www.google.com">Button 2</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/e00/?text=3" class="slider-img-responsive">
<nav>
<h1>Title 3</h1>
<h2>Byline 3</h2>
<a href="www.google.com">Button 3</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/f3f/?text=4" class="slider-img-responsive">
<nav>
<h1>Title 4</h1>
<h2>Byline 4</h2>
<a href="www.google.com">Button 4</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/3f3/?text=5" class="slider-img-responsive">
</a>
<nav>
<h1>Title 5</h1>
<h2>Byline 5</h2>
<a href="www.google.com">Button 5</a>
</nav>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
var bx = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: true,
pager: false,
controls: true,
pause: 5000,
preventDefaultSwipeX: false,
preventDefaultSwipeY: true,
touchEnabled: true,
swipeThreshold: 20
});
</script>
</body>
</html>关于javascript - bx-slider 左右滑动手势支持，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35561265/
26
4
0
这是在我的 MainActivity 中用作 BroadcastReceiver 的代码 mRegistrationBroadcastReceiver = new BroadcastRecei
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我想在大部分时间隐藏 UISearchBar，只在用户需要时调用它来显示。 我在 Interface Builder 中放置了一个 UISearchBar 并将其隐藏在 View 后面，当用户单击按钮
我有一个包含 CCMenuItemImage 的菜单(“myMenu”)。我希望此菜单能够检测手指滑动并相应地滑动。 我的问题是 CCMenuItemImage 似乎吸收了触摸事件。当用户触摸 CCM
我正在寻找一个简单的 jQuery 或 Javascript 解决方案，以使导航侧边栏在用户向下滚动页面时顺利跟随用户。像这里一样:http://ucon-acrobatics.com/shop/ 任
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
我想将 String 行标记化为标记(存储到 String 表中)，并且我只能使用 java.io.*它是为了实现一个计算器。 例如:第一行:1+2+3第二行:1+ 2*3(标记之间有空格) 进入表{
我有一个 ListView 控件来显示项目，我想提供一个滑动/滑动手势来选择一个项目。我用 GestureRecognizer类来识别交叉滑动手势，但我还想通过水平移动选择的项目来为这个手势设置动画。
我有一个导航栏，当单击菜单图标时，它将滑入“#secondary-nav”并隐藏“#primary-nav”。然而 jquery 似乎没有显示“#secondary-menu”。下面提供的是 HTMl
这个问题已经有答案了: how to make a sliding up panel like the Google Maps app? (2 个回答) 已关闭 7 年前。 我正在寻找类似的实现，如下
我有 ViewPager(Slide) 和 3 张图片。共有三个图像是通过 Internet 下载的。如果我将图片换到服务器上的另一台服务器上，链接保持不变，但应用程序中的图片没有改变，仍然是缓存中的
我在 gridview 中创建了两个按钮。 我想达到以下目的，但不知道应该用什么方法？ 首先我触摸第一个按钮，将显示 toast 1 msg。通过将我的手指滑到第二个按钮而不抬起我的手指，将显示 to
所以我设置了一个小的 jquery 动画，用户将鼠标悬停在容器上一段时间，这会导致容器 split ，然后显示内部信息。 我不希望鼠标一进入容器就开始动画，所以我在动画上放了一个delay()。现在动
这个问题在这里已经有了答案: Simulate swipe with mouse in javascript (5 个答案) 关闭 7 年前。
我希望我的 Sprite 像在冰上一样滑动。因此，如果他在地面上，那么他可以正常行走，但当他接触冰时，他会滑动，直到有东西阻止他。有谁知道如何才能做到这一点？谢谢 最佳答案 像“Sprite Move
我的代码有几个问题:HTML: Bellevue
我正在尝试实现从 fragment1 过渡到 fragment2 的滑动动画。我正在使用 setCustomAnimations 方法。而且我知道我需要使用框架方法来替换 fragment 。 我的代
我不知道你们是否听说过 app chomp，但应用程序中有一个布局，如下图所示。我想知道他们是如何设置的，我将如何使用它来为我自己的应用程序制作类似的东西。有趣的是，当你滑动时，没有像水平 Scrol
我想检测用户何时在一个单元格占据整个屏幕宽度的 collectionView 中向左或向右滑动。是否可以不添加手势识别器。我试过添加手势识别器，但只有当我们将 collectionView 的 scr
我正在尝试开发一个应用程序来复制类似 tinder 的基于滑动的提要。该应用程序的想法与火种非常相似，也具有向右滑动和向左滑动匹配功能。 到目前为止我做了什么-我在 MongoDB 中创建了一个刷卡集
我是一名优秀的程序员,十分优秀！