Сделайте HTML вертикальный слайдер img как проект Dopper.com - PullRequest
Новая
       70

Сделайте HTML вертикальный слайдер img как проект Dopper.com

1 голос
/ 04 августа 2020

Я пытаюсь сделать слайдер для своего сайта трясогузки. Внешний вид, к которому я стремлюсь, похож на слайдер проекта на dopper.com . Я попытался скопировать его сейчас и изменить после того, как он немного сработает. Что у меня сейчас:

html

<div id="green">
    <div id="_3Y_4omKhBxgsJWab0Pvtfb">
        <div id="ZqeD7GpvyYA2hpsM2zSgE">
                {% for img in self.imgs %}
                    <div style="z-index: 4; transform: translate3d(0%, 0px, 0px); width: 100%; display: flex">
                        {% image img.img width-500 as tmp_photo %}
                        <img src="{{ tmp_photo.url }}" id="box" style="height: 20vh; align-self: flex-end; position: relative; transform: scale(1.2); width: 80%; min-width: 160px; max-width: 400px; overflow: hidden">
                    </div>
                {% endfor %}
        </div>
    </div>
</div>

CSS: 

    #green{
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
    }

    #_3Y_4omKhBxgsJWab0Pvtfb{
        position: relative;
        display: flex;
        flex-direction: column;
    }

    #ZqeD7GpvyYA2hpsM2zSgE{
        width: 430%;
    }

Я просто не могу расположить изображения рядом, а после этого анимацию . Разве на inte rnet уже нет чего-то, что делает что-то подобное, он много пытался погуглить, но ничего не нашел.

...