Accordion Image Viewer... 在移动设备上滑动导航？

Question

我在这里可以看到一个手风琴图像查看器：

http://jsfiddle.net/gvp8kkeh/1/

这是 HTML：

<div class="accordian">
    <ul>
        <li class="item active">
            <a href="#">
                <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
            </a>
        </li>
        <li class="item">
            <a href="#">
                <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
            </a>
        </li>
        <li class="item">
            <a href="#">
                <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
            </a>
        </li>
        <li class="item">
            <a href="#">
                <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
            </a>
        </li>
         <li class="item">
            <a href="#">
                <img src="http://ih0.redbubble.net/image.7643638.3643/flat,550x550,075,f.jpg" alt="" />
            </a>
        </li>
    </ul>
</div>

这是 CSS：

.accordian {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
overflow: hidden;
}
.accordian ul {width: 200%;}
.accordian li {
position: relative;
display: block;
width: 4%;
float: left;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordian .active {width: 32%;}
.accordian li img {
display: block;
width: 60vw;
height: auto;
}

和 JS：

var items = $('.accordian .item');
items.on('mouseover', function (event) {
    items.removeClass('active');
    $(this).addClass('active');
});

我希望能够让用户左右滑动以浏览移动设备上的照片。

谁能提供一些见解？

Answer 1

为此，您需要使用 jQuery mobile。然后你可以使用类似的东西：

$( ".accordian" ).on( "swipeleft", function(event){
items.each(function (event) {
if($(this).hasClass('active))
{
var index = $(this).index();
items.removeClass('active');
items.eq(index-1).addClass('active');
}
});
});
$( ".accordian" ).on( "swiperight", function(event){
items.each(function (event) {
if($(this).hasClass('active))
{
var index = $(this).index();
items.removeClass('active');
items.eq(index+1).addClass('active');
}
});
});

如果您遇到任何问题，请告诉我。