使图像滑块响应

Question

我使用 html、css 和 jquery 构建了一个简单的图像滑块。你基本上使用箭头在图像之间切换，然而，当我试图让它响应时，真正的麻烦来了。箭头总是断开并显示在图像上方或下方。

在普通浏览器中 window

缩小浏览器 window 时，会发生这种情况

关于如何让他们响应的任何想法？提前致谢。

$(document).ready(function() {
    $('.next').on('click', function() {
        var currentImg = $('.active');
        var nextImg = currentImg.next();

        if(nextImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            nextImg.addClass('active').css('z-index',10);
        }
    });

    $('.prev').on('click', function() {
        var currentImg = $('.active');
        var prevImg = currentImg.prev();

        if(prevImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            prevImg.addClass('active').css('z-index',10);
        }
    });
});

body {
    background-image: url("../images/bg.png");
    background-size: 100%;
    font-size: 100%;
    font-family: "Roboto",sans-serif;
    color: white;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
}


img {
    max-width: 100%;
    height: auto;
}


a {
    color: #fff;
    text-decoration: none;
}



.slider-inner {
    max-width: 1200px;
    height: 675px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 0.1875em;
    border: #666 solid 1px;
}

.slider-inner img {
    display: none;
    width: 1200px;
    height: 675Px;
}

.slider-inner img.active {
    display: inline-block;
}

.prev, .next {
    margin-top: 18.75em;
    float: left;
    cursor: pointer;
}

.prev {
    position: relative;
    z-index: 100;
    margin-right: -2.8125em;
}


.next {
    position: relative;
    margin-left: -2.8125em;
    z-index: 100;
}



.nadpis {
    font-weight: 400;
    text-align: center;
}

.podnadpis {
    text-align: center;
    font-weight: 100;
    font-size: 3em;
    margin-top: 2em;
}

.img-slider {
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vlastna responzivna stranka</title>
    <link rel="stylesheet" href="css/styles2.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
        <h2 class="podnadpis">Image Slider</h2>
        <div class="slider-outer">
            <img src="img-slider/arrow-left.png" alt="left arrow" class="prev">
            <div class="slider-inner">
                <img src="img-slider/john-jpg.jpg" class="active" alt="">
                <img src="img-slider/butterflies-jpg.jpg" alt="">
                <img src="img-slider/andrew-jpg.jpg" alt="">
                <img src="img-slider/taylor-jpg.jpg" alt="">
            </div>
            <img src="img-slider/arrow-right.png" alt="next arrow" class="next">
        </div>
    </div>
    

    <script src="javascript/jquery.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

Answer 1

您可以使用 position:absolute 和 left:0 或 right:0 作为上一个和下一个选择器。

编辑：

适合您搭配使用：

.slider-outer {
  position:relative;
}

$(document).ready(function() {
    $('.next').on('click', function() {
        var currentImg = $('.active');
        var nextImg = currentImg.next();

        if(nextImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            nextImg.addClass('active').css('z-index',10);
        }
    });

    $('.prev').on('click', function() {
        var currentImg = $('.active');
        var prevImg = currentImg.prev();

        if(prevImg.length) {
            currentImg.removeClass('active').css('z-index', -10);
            prevImg.addClass('active').css('z-index',10);
        }
    });
});

body {
    background-image: url("../images/bg.png");
    background-size: 100%;
    font-size: 100%;
    font-family: "Roboto",sans-serif;
    color: white;
}

.container {
    max-width: 1250px;
    margin: 0 auto;
}


img {
    max-width: 100%;
    height: auto;
}


a {
    color: #fff;
    text-decoration: none;
}



.slider-inner {
    max-width: 1200px;
    height: 675px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 0.1875em;
    border: #666 solid 1px;
}

.slider-inner img {
    display: none;
    width: 1200px;
    height: 675Px;
}

.slider-inner img.active {
    display: inline-block;
}

.prev, .next {
    margin-top: 18.75em;
    /*float: left; remove */
    cursor: pointer;
    width: 60px;
}

.prev {
    z-index: 100;
    margin-right: -2.8125em;
    position:absolute;
    left:0;
}


.next {
    margin-left: -2.8125em;
    z-index: 100;
    position:absolute;
    right:0;
}

.nadpis {
    font-weight: 400;
    text-align: center;
}

.podnadpis {
    text-align: center;
    font-weight: 100;
    font-size: 3em;
    margin-top: 2em;
}

.img-slider {
    text-align: center;
}

.slider-outer {
  position:relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vlastna responzivna stranka</title>
    <link rel="stylesheet" href="css/styles2.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="nadpis">Take zaujimave veci, ktore sa daju spravit s JS a JQuery</h1>
        <h2 class="podnadpis">Image Slider</h2>
        <div class="slider-outer">
            <img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="left arrow" class="prev">
            <div class="slider-inner">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" class="active" alt="">
                <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxNUlvSKCK4HnDA4_ZnFphN4O6vj2DxrHNdw&usqp=CAU" alt="">
                <img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="">
            </div>
            <img src="https://www.seekpng.com/png/detail/13-134931_white-curved-arrow-png-graphic-download-white-curved.png" alt="next arrow" class="next">
        </div>
    </div>
    

    <script src="javascript/jquery.js"></script>
    <script src="javascript/main.js"></script>
</body>
</html>

使图像滑块响应

making an image slider responsive

html

css

jquery

responsive

编辑：