Itemslide JS скользит не рядом друг с другом после определенной ширины - PullRequest
Новая
       63

Itemslide JS скользит не рядом друг с другом после определенной ширины

0 голосов
/ 22 сентября 2019

, поэтому я пытаюсь использовать ItemSlideJS, и пока он работает довольно хорошо, единственная проблема в том, что каждый раз, когда ширина устройства превышает 510 пикселей, блоки Li Box перестают быть рядом друг с другом и начинают опускаться ниже друг друга ( см. Скриншот ).Есть ли способ это исправить?Я уже пробовал float: left, и кажется, что это просто увеличивает ширину, где это не происходит, но все же происходит, если я увеличу ширину.

HTML: 

<div id="scrolling">

    <ul>
        <li>

        </li>
        <li>

        </li>

    <li>

        </li>
    </ul>

</div>

CSS: 

#scrolling { /* Carousel Frame */
    overflow: hidden;
}

/* Add to docs */
#scrolling{/*frame*/
    position:absolute;
    top:30vw;


    height:50vw;
    width:100vw;

    overflow: hidden;
}

ul {



    position: absolute;
    /*top:10%;*/
    float: left;
    height:20vw;

    list-style-type: none;

    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

li {
border-style: solid;
  border-width: 2px;
border-color: black;

    float: left;
    width:80vw;

    height: 40vw;
    color: #000;
    /*font-weight: 300;*/
    text-align: center;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -o-border-radius: 30px;
    -moz-border-radius: 30px;
    cursor: pointer;

    -webkit-transform:  scale(0.95);
    -ms-transform:  scale(0.95);
    -moz-transform:  scale(0.95);
    transform: scale(0.95);

}

.itemslide-active
{/*applied to current active item*/
    -webkit-transform:  scale(1);
    -ms-transform:  scale(1);
    -moz-transform:  scale(1);

}

JavaScript: 

var carousel;
$(document).ready(function () {
    carousel = $("ul");
    carousel.itemslide();
});
...