Question

我使用statick创建元素，为此，我需要具有滑块。

我只是创建滑块，但是元素不适合滑块容器。

示例：

var htmlElements;
var userName = "Jonny Programmer"
var id = "6656"

function createUserCard() {
    htmlElements = `<div class="user-card">
    <img src="https://source.unsplash.com/user/erondu" class="userImage" />
    <div class="info">
        <div class="name">${userName}</div>
        <div class="handle">
            <div class="idPersone">${id}</div>
        </div>
    </div>
</div>`

    $('.cardsCreation').append(htmlElements);
}

$('#plus-button').on('click', function () {
    createUserCard();
});

(function () {
    var sliderImages = document.querySelectorAll('.image'),
        arrowLeft = document.querySelector('#left-arrow'),
        arrowRight = document.querySelector('#right-arrow'),
        currentImg = 0;

    function initSlider() {
        resetSlider();

        sliderImages[0].style.display = 'block';
    }

    function resetSlider() {
        for (var i = 0; i < sliderImages.length; i++) {
            sliderImages[i].style.display = 'none';
        }
    }

    function toLeft() {
        resetSlider();
        sliderImages[currentImg - 1].style.display = 'block';
        currentImg--;
    }

    function toRight() {
        resetSlider();
        sliderImages[currentImg + 1].style.display = 'block';
        currentImg++;
    }

    arrowLeft.addEventListener('click', function () {
        if (currentImg === 0) {
            currentImg = sliderImages.length;
        }

        toLeft();
    });

    arrowRight.addEventListener('click', function () {
        if (currentImg === sliderImages.length - 1) {
            currentImg = -1;
        }

        toRight();
    });

    initSlider();
})();

.user-card, userImage {
    box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.25);
}

.user-card {
    margin: 12px;
    padding: 10px 10px 10px 10px;
    border-radius: 12px;
    width: 160px;
    text-align: center;
    float: left;
    background-color: #fff;
}

.userImage {
    border-radius: 50%;
    height: 140px;
    width: 140px;
    border: 5px solid #eee;
}

.name {
    font-size: 20px;
    margin: 5px;
    font-weight: bold;
}

.progress {
    color: #25af53;
    font-size: 48px;
}

#plus-button {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #428bca;
    position: absolute;
    top: 33%;
    margin-left: 20px;
    cursor: pointer;
    box-shadow: 0px 2px 5px #666;
    border: none;
    outline: none;
}

.plus {
    color: white;
    position: absolute;
    top: 0;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 55px;
    font-size: 38px;
    font-family: 'Roboto';
    font-weight: 300;
}

#plus-button:hover {
    box-shadow: 0 6px 14px 0 #666;
    transform: scale(1.05);
}

.wrapper {
    position: relative;
}

.arrow {
    cursor: pointer;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: 50%;
    margin-top: 160px;
}

#left-arrow {
    border-width: 50px 40px 50px 0;
    border-color: transparent #000 transparent transparent;
    left: 0;
    margin-left: 25px;
}

#right-arrow {
    border-width: 50px 0 50px 40px;
    border-color: transparent transparent transparent #000;
    right: 0;
    margin-right: 25px;
}

.image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.vertical-align-wrapper {
    display: table;
    overflow: hidden;
    text-align: center;
}

    .vertical-align-wrapper span {
        display: table-cell;
        vertical-align: middle;
        font-size: 5rem;
        color: #ffffff;
    }

@media only screen and (max-width : 992px) {

    .vertical-align-wrapper span {
        font-size: 2.5rem;
    }

    #left-arrow {
        border-width: 30px 20px 30px 0;
        margin-left: 15px;
    }

    #right-arrow {
        border-width: 30px 0 30px 20px;
        margin-right: 15px;
    }

    .arrow {
        margin-top: -30px;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <div id="left-arrow" class="arrow"></div>
    <div id="slider">
        <div class="image image-one">
            <div class="vertical-align-wrapper">

                <div class="cardsCreation"></div>

                <button id="plus-button">
                    <p class="plus">+</p>
                </button>
            </div>
        </div>
        <div class="image image-two">
            <div class="vertical-align-wrapper">
                <span>Slide 2</span>
            </div>
        </div>
        <div class="image image-three">
            <div class="vertical-align-wrapper">
                <span>Slide 3</span>
            </div>
        </div>
    </div>
    <div id="right-arrow" class="arrow"></div>
</div>

因此，您可以看到点击“ +” 之后，我将新的element添加到html中。

从两个侧面看，我都有箭头，这些箭头正在改变滑块。

点击箭头后向下走，这不好。

当我达到在一个滑块中添加元素的限制后，它将向新滑块页面添加新元素。

我想要的是什么

Answer 1

如果您使用display CSS属性的切换是因为它从DOM中删除了整个元素，所以建议您使用visibility or opacity属性来完成任务。

如何在滑块容器上放置元素

1 个答案: