Question

我正在尝试创建一个水平滑动的滑块，该滑块也具有翻转内容。想象一下，每张幻灯片都是一个250x250的盒子（可以这么说），带有文本元素。然后，您将鼠标悬停在它上面，然后它变为显示不同的文本，并单击一个或两个按钮以将其带到其他位置。我已经在服务器上编写了一些代码，而测试的结果是，当我将鼠标移到幻灯片上时，幻灯片上的翻转只会闪烁。当您移动鼠标时，闪烁将停止，但此时可能是两种状态，所以肯定有问题。

我尝试制作一个JSFiddle来展示此代码，但是它似乎在那里不起作用（幻灯片不是水平的）。作为参考，JSFiddle位于https://jsfiddle.net/anghellickarma/avgtro26/4/

我也正在使用实时测试链接： http://wspentertainment.com/slider3b.html

之所以链接这些链接，是因为JSFiddle似乎忽略了某些依赖项，并且我希望能够显示自己所在的位置。

代码依赖项是标头中的以下URL：

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>

以下是使用中的CSS：

    body {
        background-color: #000;
        color: #fff;
    }
    .slider {
        width: 1000px;
        margin: 0 auto;
    }
    .slick-slide {
        height: 250px !important;
        width: 223px !important;
        border: 1px solid white;
        border-radius: 25px;
        margin-right: 25px;
        text-align: center;
    }
    #int-top {
        position: absolute;
        width: 223px;
        height: 250px;
    }
    .int-rollover {
        position: absolute;
        width: 223px;
        height: 250px;
        background: red;
        overflow: hidden;
        z-index: 10000;
        display: none;
        border: 1px solid white;
        border-radius: 25px;
    }
    #int-top:hover + .int-rollover {
        display: block;
    }

这是使用中的JS代码：

$(window).load(function(){
        $('.slider').slick({
            slidesToShow: 4,
            slidesToScroll: 1,
            dots: false,
            arrows: true,
            infinite: false,
            cssEase: 'linear'
        });
    });

最后，这是HTML代码：

<div class="slider">
    <div>

        <!--Testing rollover slide on first slide. Duplicate later once working correctly-->
        <div id="int-top">On top</div>
        <div class="int-rollover hidden">Rollover</div>
    </div>
    <div>
        2
    </div>
    <div>
        3
    </div>
    <div>
        4
    </div>
    <div>
        5
    </div>
    <div>
        6
    </div>
    <div>
        7
    </div>
    <div>
        8
    </div>
</div>

使用所有这些代码，它应该能够重新组合上面的html链接。不过，它无法在JSFiddle上运行，但是如果可以使它正常运行（即不眨眼），请随时链接到它。

或者，即使您只告诉我要添加/调整哪些代码来修复闪烁的代码，也可以！预先感谢！

带有滑移滑块的光滑滑块-不断闪烁

0 个答案: