Слайдер с скользящим движением - постоянное мигание - PullRequest
Новая
       39

Слайдер с скользящим движением - постоянное мигание

0 голосов
/ 15 апреля 2019

Я пытаюсь создать горизонтальный скользящий слайдер, в котором также есть ролловер.Представьте, что каждый слайд представляет собой поле размером 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 вuse: 

    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, но не стесняйтесь ссылаться на него, если вы можете заставить его работать (т.е. не мигать)

Или если вы можете просто сказать мне, какой код добавить / настроить для исправлениямигание, это тоже сработало бы!Заранее спасибо!

...