Javascript 包括文本幻灯片之间的淡入淡出

我正在尝试使这些文本幻灯片之间有一个淡入淡出的过渡，并具有滑动功能，而不仅仅是箭头键。我非常感谢您的帮助

该页面的链接是

这是我正在使用的javascript：

    $(document.documentElement).keyup(function (e) {
    var $activeslide = $('.slides.active');
    if (e.keyCode == 39) {
        if ($activeslide.next('.slides').length) {
            $targetslide = $activeslide.next('.slides');
        }
        else {}
    }
    if (e.keyCode == 37) {
        if ($activeslide.prev('.slides').length) {
            $targetslide = $activeslide.prev('.slides');
        }
        else {}
    }
    $targetslide.addClass('active');
    $activeslide.removeClass('active');
});

---

不确定是否使用滑动，但这里有一个CSS解决方案，您可以用于淡入淡出

.slides {
    opacity: 0;
    transition: 1s;
    position: absolute;
}

.slides.active {
    opacity: 1;
}

---

你是说在触摸设备上刷卡？是的，我想为触摸设备添加刷卡功能*谢谢！！！褪色是我一直在寻找的一部分。我现在唯一搞不清楚的问题是如何让它可以被滑动，甚至可以单击以淡入下一个滑动触摸设备。对于滑动，最好包括其他库。HammerJS和QuoJS似乎是最好的。