Javascript水平图像滑块

Question

I'm trying to implement a simple image slider with arrows underneath, left and right. 我正在尝试实现一个简单的图像滑块，该滑块下方带有左右箭头。

When the slider reaches to the end(left or right), I would like the arrow to disappear at that side. 当滑块到达末端（左侧或右侧）时，我希望箭头在该侧消失。 Right now I can't get to the end of the list at the left side. 现在，我无法到达列表的左侧。 Also I don't know how to center the list so that each item that gets viewed is centered on the screen. 另外，我也不知道如何使列表居中，以便将要查看的每个项目都置于屏幕的中心。

Here is a gif that illustrates these problems: https://i.gyazo.com/b3b3df55c6953c6b3e539dd347d951da.mp4 这是一个说明这些问题的gif文件： https : //i.gyazo.com/b3b3df55c6953c6b3e539dd347d951da.mp4

Here is the markup: 这是标记：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Image Slider</title>
</head>

<body>
    <div class="headline">
        <h1>
            Experience The
            <br>
            <span>Diamond Revolution</span>
        </h1>
        <h3>
            Spin actual diamonds in 360° HD and zoom in up to 40x. One of the world's biggest collections of loose diamonds, at your
            fingertips.
        </h3>
    </div>
    <div class="slider">
        <ul class="slider-wrap">
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/round-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        ROUND
                    </h3>
                    <h4 class="sub-title">
                        Maximizes light return from the top of the stone
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/cushion-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        CUSHION
                    </h3>
                    <h4 class="sub-title">
                        Antique cut with 58 facets and rounded corners
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/marquise-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        MARQUISE
                    </h3>
                    <h4 class="sub-title">
                        Long, narrow surface makes it appear larger than life
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/heart-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        HEART
                    </h3>
                    <h4 class="sub-title">
                        Features a distinctive cleft at the top and superior brilliance
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/pear-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        PEAR
                    </h3>
                    <h4 class="sub-title">
                        Tradition meets brilliance in unique ‘water drop’ shape
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/radiant-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        RADIANT
                    </h3>
                    <h4 class="sub-title">
                        Brilliance combined with non-traditional cropped corners
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/oval-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        OVAL
                    </h3>
                    <h4 class="sub-title">
                        Elongated shape accentuates the length of the finger
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/asscher-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        ASSCHER
                    </h3>
                    <h4 class="sub-title">
                        Vintage-style square shape with cropped corners
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/emerald-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        EMERALD
                    </h3>
                    <h4 class="sub-title">
                        Long lines create an elegant and sophisticated look
                    </h4>
                </div>
            </li>
            <li class="slider-item">
                <img src="https://ion.r2net.com/images/amazingHomepage/diamonds/princess-Diamond.png?v=3">
                <div class="title">
                    <h3 class="main-title">
                        PRINCESS
                    </h3>
                    <h4 class="sub-title">
                        Maximum brilliance in an exquisite square form
                    </h4>
                </div>
            </li>
        </ul>
    </div>
    <div class="controls">
            <div class="title">
                <h3>
                    PRINCESS
                </h3>
                <h4>
                    Maximum brilliance in an exquisite square form
                </h4>
            </div>
            <a href="#" id="prev" class="fa fa-long-arrow-right">
                <img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
            </a>
            <a href="#" id="next" class="fa fa-long-arrow-left">
                <img src="https://ion.r2net.com/images/amazingHomepage/Arrow.svg">
            </a>
        </div>

    <script src="js/index.js"></script>
</body>

</html>

Index.js: Index.js：

var imageSlider = function () {
    var slider = document.querySelector(".slider");
    var items = document.querySelectorAll(".slider-item");
    var itemWidth = items[0].offsetWidth;
    var sliderList = document.querySelector(".slider-wrap");
    var count = items.length / 2;
    // Control Buttons
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var isNextHidden = false;
    var isPrevHidden = false;
    // Diamond Display
    var mainTitle = document.querySelector(".controls .title h3");
    var subTitle = document.querySelector(".controls .title h4");

    window.addEventListener("resize", function () {
        itemWidth = items[0].offsetWidth;
    });
    centerItem(count);
    sliderList.style.left = "-" + count * itemWidth + "px";

    var nextSlide = function () {
        uncenterItem(count);
        if (count >= 2) {
            count--;
            sliderList.style.left = "-" + count * itemWidth + "px";
        } else if (count === 1) {
            next.style.display = "none";
            isNextHidden = true;
        }
        centerItem(count);
    }

    var prevSlide = function () {
        uncenterItem(count);
        if (count < items.length) {
            if (isNextHidden) {
                next.style.display = "block";
            }
            count++;
            sliderList.style.left = "-" + count * itemWidth + "px";
        } else if (count == items.length - 1) {
            prev.style.display = "none";
            isPrevHidden = true;
        }
        centerItem(count);
    }

    function uncenterItem(count) {
        var centeredItem = items[count];
        centeredItem.classList.remove("centered");
    }

    function centerItem(count) {
        console.log(count);
        var centeredItem = items[count];
        centeredItem.classList.add("centered");
        var title = centeredItem.getElementsByClassName("title");
        var itemTitle = title[0].children[0].innerText.trim();
        var itemSubtitle = title[0].children[1].innerText.trim();

        // Assigning values to the fields
        mainTitle.innerHTML = itemTitle;
        subTitle.innerHTML = itemSubtitle;
    }

    next.addEventListener("click", nextSlide);
    prev.addEventListener("click", prevSlide);
};

window.onload = function () {
    imageSlider();
};

SASS file: SASS文件：

body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
}

.headline {
    text-align: center;
    h1 {
        font-size: 50px;
        font-weight: normal;
        margin-bottom: 0;
        span {
            font-weight: 700;
        }
    }
    h3 {
        font-size: 18px;
    }
}

.slider {
    position: relative;
    width: 100%;
    height: 300px;
    padding-bottom: 50px;
    overflow: hidden;
    .slider-wrap {
        display: flex;
        justify-content: space-around;
        position: relative;
        list-style: none;
        height: 100%;
        min-width: 200%;
        padding: 0;
        margin: 80px 0;
        transition: all 750ms ease;
        left: 0;
        .slider-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            margin: 0 20px;
            height: 100%;
            width: 250px;
            float: left;
            transition: all 750ms ease;
            .title {
                display: none;
            }
            img {
                margin: 0 auto;
                width: 250px;
            }
        }

        .centered {
            transform: scale(1.5);
        }
    }
}

.controls {
    .title {
        display: block;
        position: absolute;
        bottom: 30px;
        left: 50%;       
        text-align: center;
        margin: 20px;
        color: black;
        transform: translateX(-55%);
        h3 {
            font-size: 20px;
            font-weight: 700;
        }
        h4 {
            font-size: 15px;
            font-weight: normal;
        }
    }
    #prev,
    #next {
        position: absolute;
        bottom: 0;
        width: 100px;
        line-height: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
        border-radius: 50%;
        font-size: 70px;
        text-align: center;
        color: black;
        text-decoration: none;
        transform: translateY(-50%);
        transition: all 150ms ease;
    }
    #prev {
        right: 10px;
        margin-right: 20vw;
    }
    #next {
        left: 10px;
        margin-left: 20vw;
        img {
            transform: rotate(180deg);
        }
    }
}

Answer 1

The condition in line number 42 else if (count == items.length - 1) should be replaced with else if (count == items.length) . 第42行中的条件else if (count == items.length - 1)应该替换为else if (count == items.length) 。

Also need to take care of the undefined errors, by checking for the existence of objects using if condition. 还需要通过使用if条件检查对象的存在来处理undefined错误。 See the pen and refer line number 50 and 58 . 参见笔，并参考行号50和58 。

Hope this helps. 希望这可以帮助。

Javascript水平图像滑块

问题描述

1 个解决方案

解决方案1
0 2018-01-29 15:24:56

Javascript水平图像滑块

问题描述

1 个解决方案

解决方案1 0 2018-01-29 15:24:56

解决方案1
0 2018-01-29 15:24:56