Как сделать слайдер бесконечным? - PullRequest
Новая
       1

Как сделать слайдер бесконечным?

0 голосов
/ 23 июня 2018

Я пытаюсь сделать бесконечный слайдер в HTML / CSS, поэтому я нашел решение.Работает нормально, но не бесконечно.Я использую ЭТО решение, я просто изменяю размер изображений.Где проблема?Это не может быть решено просто изменением размеров?

Я пытался использовать изображения других размеров, но это не работает.

Спасибо: -) 

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-webkit-calc(-190px *6));
                transform: translateX(calc(-190px *6));
    }
}

@-moz-keyframes scroll {
    0% {
        -moz-transform: translateX(0);
             transform: translateX(0);
    }
    100% {
        -moz-transform: translateX(-moz-calc(-190px *6));
             transform: translateX(calc(-190px *6));
    }
}

@-o-keyframes scroll {
    0% {
        -o-transform: translateX(0);
           transform: translateX(0);
    }
    100% {
        -o-transform: translateX(calc(-190px *6));
           transform: translateX(calc(-190px *6));
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
           -moz-transform: translateX(0);
             -o-transform: translateX(0);
                transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-webkit-calc(-190px *6));
           -moz-transform: translateX(-moz-calc(-190px *6));
             -o-transform: translateX(calc(-190px *6));
                transform: translateX(calc(-190px *6));
    }
}

.slider {
    height: 105px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 960px;
}

.slider .slide-track {
    -webkit-animation: scroll 15s linear infinite;
       -moz-animation: scroll 15s linear infinite;
         -o-animation: scroll 15s linear infinite;
            animation: scroll 15s linear infinite;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    width: -webkit-calc(190px *6);
    width: -moz-calc(190px *6);
    width: calc(190px *6);
}

.slider .slide {
    height: 105px;
    width: 140px;
	padding: 0px 25px;
}
<div class="slider">
<div class="slide-track">
<div class="slide"><a href="https://www.psimafie.cz/znacka/primordial-pet-food/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/1.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/orijen/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/2.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/goodstuff/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/3.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/taste-of-the-wild/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/4.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/magnusson/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/5.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/n-d/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/6.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/nutra-gold/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/7.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/essentialfoods/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/8.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/calibra/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/9.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/acana/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/10.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=marp"><img src="https://www.psimafie.cz/user/documents/upload/gallery/11.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=Brit"><img src="https://www.psimafie.cz/user/documents/upload/gallery/12.png" width="140" height="105" /></a></div>
</div>
</div>

1 Ответ

0 голосов
/ 23 июня 2018

Хорошо, я думаю, что понял, что не так, ваш HTML и CSS в порядке, за исключением того факта, что вам нужно поместить все изображения дважды в ваш HTML. Посмотрите на кодовую ручку, которую вы указали в своем вопросе. У них есть 7 изображений, но в своем HTML они используют 14, а вы используете 12, поэтому укажите в своем HTML 24: 

<div class="slider">
<div class="slide-track">
<div class="slide"><a href="https://www.psimafie.cz/znacka/primordial-pet-food/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/1.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/orijen/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/2.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/goodstuff/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/3.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/taste-of-the-wild/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/4.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/magnusson/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/5.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/n-d/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/6.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/nutra-gold/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/7.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/essentialfoods/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/8.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/calibra/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/9.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/acana/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/10.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=marp"><img src="https://www.psimafie.cz/user/documents/upload/gallery/11.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=Brit"><img src="https://www.psimafie.cz/user/documents/upload/gallery/12.png" width="140" height="105" /></a></div>
    <div class="slide"><a href="https://www.psimafie.cz/znacka/primordial-pet-food/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/1.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/orijen/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/2.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/goodstuff/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/3.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/taste-of-the-wild/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/4.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/magnusson/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/5.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/n-d/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/6.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/nutra-gold/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/7.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/essentialfoods/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/8.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/calibra/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/9.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/znacka/acana/"><img src="https://www.psimafie.cz/user/documents/upload/gallery/10.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=marp"><img src="https://www.psimafie.cz/user/documents/upload/gallery/11.png" width="140" height="105" /></a></div>
<div class="slide"><a href="/vyhledavani/?string=Brit"><img src="https://www.psimafie.cz/user/documents/upload/gallery/12.png" width="140" height="105" /></a></div>

</div>
</div>

Не уверен на 100%, если это ответ на ваш вопрос, но дайте мне знать, если это так или нет. Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...