Question

我创建了一个jquery轮播，它只有一个next / prev功能，一切都在Chrome中工作正常，但在safari中有问题。因此，应该隐藏在滑块中的图像出现在底部（视觉上隐藏，我已经用firebug检查过）。这只发生在Safari中。

<div class="slider">
    <a class="prev-arrow arrow"></a>
        <div class="image-container">
            <img alt="" src="http://bit.ly/1Icor0I" class="active">
            <img alt="" src="http://bit.ly/1Ubvzly">
            <img alt="" src="http://bit.ly/1KDjkg6">
            <img alt="" src="http://smu.gs/1IwVgJp">
            <img alt="" src="http://bit.ly/1JV31pa">
            <img alt="" src="http://bit.ly/1eFfcNZ">
            <img alt="" src="http://bit.ly/1DdSEjq">
            <img alt="" src="http://bit.ly/1SQshBK">
            <img alt="" src="http://bit.ly/1LUnGxU">
            <img alt="" src="http://bit.ly/1fO17ic">
            <img alt="" src="http://bit.ly/1ha0UHb">
            <img alt="" src="http://bit.ly/1IOce80">
            <img alt="" src="http://bit.ly/1gsBwwf">
            <img alt="" src="http://bit.ly/1LUnHBZ">
        </div>
    <a class="next-arrow arrow"></a>
</div>


$(document).on("click", ".prev-arrow", function () {
      var imageContainer = $(this).next();
      imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() - 300}, 200);
});

$(document).on("click", ".next-arrow", function () {
     var imageContainer = $(this).prev();
     imageContainer.animate({"scrollLeft":imageContainer.scrollLeft() + 300}, 200);
});

和css

.slider .image-container {
    overflow: hidden;
    width:500px;
    display: inline-flex;
    margin-left: 25px;
    height: 120px;
}

.slider .image-container img {
    display: inline-block;
    width:200px;
        margin-left: 2px;
}

.slider .image-container img.active {
    border: 6px solid #007aff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.slider {
    display: inline-block;
    position: relative;
    width: 800px;
}

.prev-arrow {
    width: 13px;
    height: 23px;
    display: inline-block;
    position: absolute;
    margin-top: 50px;
    cursor: pointer;
    background-image: url("/images/agency/left-arrow.jpg");
    background-color:red;
}

.next-arrow {
    width: 13px;
    height: 23px;
    display: inline-block;
    position: absolute;
    margin-top: 50px;
    margin-left: 15px;
    cursor: pointer;
    background-image: url("/images/agency/right-arrow.jpg");
    background-color:red;
}

https://jsfiddle.net/zzLf1pL3/ 我不想对HTML代码进行很多更改。因为它会让我重写其他很多东西。谢谢你的帮助！

jQuery滑块在Safari桌面上不起作用

0 个答案: