手风琴图像查看器...在移动设备上滑动导航？

Question

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

这里是 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 移动设备。然后你可以使用类似的东西：

$( ".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');
}
});
});

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

手风琴图像查看器...在移动设备上滑动导航？

Accordion Image Viewer... Swipe navigation on mobile?

css

mobile

jquery

accordion

swipe