http://caroufredsel.dev7studios.com/configuration.php
caroufredsel 的配置页面里提到 swipe 这个属性:To enable this feature, you’ll need to include the jQuery.touchSwipe-plugin.
如果 HTML 结构是这样
<div class="image_carousel"> <ul id="carousel"> <li><img src="slier.jpg"/><li> <li><img src="slider2.jpg"/><li> </ul> </div>
你可以这样使这个幻灯片支持touchswipe
<script>
$("#carousel").carouFredSel({
auto : false,
prev : '#c-prev',
next : '#c-next',
swipe : {
onTouch : true,
onMouse : true
}
});
</script>
倘若这个幻灯片的图片带来链接:
<ul id="carousel"> <li><a href="foo.html"><img src="kitten.jpg"/></a><li> <li><a href="foo.html"><img src="puppy.jpg"/></a><li> </ul>
那这个就不起作用了。
这是因为 这个插件将一些元素排除了,查看代码可以发现:
excludedElements:"label, button, input, select, textarea, a, .noSwipe"
所以在处理带连接的情况,就需要重置一下 excludedElements, 例如:
$("#foo1").carouFredSel({
auto : false,
items: 1,
swipe : {
onTouch : true,
onMouse : true,
options : {
excludedElements: "button, input, select, textarea, .noSwipe"
}
},
prev : "#foo1_prev",
next : "#foo1_next"
});
可以在手机里打开下面的链接查看 http://jsfiddle.net/4uUKd/28/embedded/result,js,css,html/
或者扫描:
还有另一个另一个jquery 插件,jQuery Touchwipe Plugin
这两个插件名字类似,但是功能却不尽一样。
导入这个插件后,我们可以这样实现:
$('#carousel').carouFredSel({
width: '100%',
prev: '#prev-propslider',
next: '#next-propslider',
swipe: true
});
$('#carousel').touchwipe({
wipeLeft: function() {
$('#carousel').trigger('next', 1);
},
wipeRight: function() {
$('#carousel').trigger('prev', 1);
}
});
这样就可以了,但是至于 touchSwipe 如何支持链接,一时还找不到方法。