上一个下一个按钮响应

Question

我有一个带有上一个和下一个按钮的图像/视频轮播。我遇到的问题是，当我调整窗口大小时，箭头会变长，并且不会粘在视频的框架上。在旋转木马的最后一张图像上，箭头保持相同的尺寸＆＃34;如图。但在两个vimeo视频中，他们并没有。这会导致其下方的缩略图被推下很远。如何阻止箭头越长＆＃34;比图像？

（当我调整窗口大小时，我希望旋转木马看起来像这样。）

这里是codepen。请帮助，我不知道如何解决这个问题。

＆＃13;

＆＃13;

$(document).ready(function () {
    // get all images loaded
    var images = $(".chair-class");
    // thumbnails containers
    var thumbnailContainer = $("#thumbnails");
    var iframe1 = $('#sketchfab-iframe-1')[0];
    var iframe2 = $('#sketchfab-iframe-2')[0];
    var player1 = $f(iframe1);
    var player2 = $f(iframe2);
    // generate thumbnail images
    generateThumbnails(images, thumbnailContainer);
    // listeners for controls arrows
    $(".prev-next-button").on("click", function () {
        player1.api('pause');
        player2.api('pause');
        // get the images
        var currentImageIndex = images.index($(".chair-class[data-active=true]"));
        var isPrevious = $(this).hasClass("previous");
        var nextIndex;
        if (isPrevious) {
            if (currentImageIndex === 0) {
                nextIndex = images.length - 1;
            }

            if (currentImageIndex > 0) {
                nextIndex = currentImageIndex - 1;
            }
        } else {
            if (currentImageIndex === images.length - 1) {
                nextIndex = 0;
            }

            if (currentImageIndex < images.length - 1) {
                nextIndex = currentImageIndex + 1;
            }
        }

        // remove any active class from images
        images.removeClass("active").attr('data-active', "false");
        // get the next active image and add active class to that next current image
        var $nextImage = $(images[nextIndex]);
        var iframeId = $nextImage.data('iframe');
        if (iframeId) {
            $(images[nextIndex]).attr('data-active', "true");
            $('.sketchfab-iframe').removeClass('active');
            $('#' + iframeId).addClass('active');
        } else {
            $(images[nextIndex]).addClass("active").attr('data-active', "true");
            $('.sketchfab-iframe').removeClass('active');
        }
    });

    $(".thumb").on("click", function (event) {
        event.preventDefault();
        var images = $(".chair-class");
        var indexSelected = $(this).data("img-index");
        var currentShown = images.index($(".chair-class[data-active=true]"));
        if (currentShown === indexSelected) return false;
        player1.api('pause');
        player2.api('pause');
        images.removeClass("active").attr('data-active', "false");
        var iframeId = $(this).data('iframe');
        if (iframeId) {
            $(images[indexSelected]).attr('data-active', "true");
            $('.sketchfab-iframe').removeClass('active');
            $('#' + iframeId).addClass('active');
        } else {
            images.removeClass("active");
            $(images[indexSelected]).addClass('active').attr('data-active', "true");;
            $('.sketchfab-iframe').removeClass('active');
        }
    });

    function generateThumbnails(images, container) {
        var ul = $("<ul>");
        images.each(function (index, element) {
            var currentThumb = $("<img>");
            var li = $("<li>");
            var src = $(this).attr("src");
            currentThumb.attr("src", src);
            currentThumb.attr("class", "thumb");
            currentThumb.data("img-index", index);
            var iframe = $(this).data('iframe');
            if (iframe) {
                currentThumb.data("iframe", iframe);
            }
            li.append(currentThumb);
            ul.append(li);
        });
        container.append(ul);
    }
});

＆＃13;

 * {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

/* #green-room {
    background: #333 !important;
  } */

.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

#chair, .chair-class {
    position: absolute;
    width: 100%;
    height: auto;
    max-width: 600px;
    max-height: 400px;
    margin: 0 auto;
    display: block;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .5s;
}

.chair-class.active {
    position: relative;
    opacity: 1;
}

#prev {
    position: absolute;
    color: black;
    left: 0;
    top: 0;
    bottom: 0;
}

#next {
    position: absolute;
    color: black;
    right: 0;
    top: 0;
    bottom: 0;
}

#prev p, #next p {
    font-size: 3em;
}

#imgDetail {
    position: relative;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

#imgDetail a {
    text-decoration: none;
    display: flex;
    padding: 3%;
    justify-content: center;
    align-items: center;
}

#imgDetail a:hover {
    background-color: #333;
    color: white;
    opacity: 0.5;
}

#imgDetail ul {
    margin: 0 auto;
    display: block;
}

#thumbnails {
    max-width: 1000px;
    width: 100%;
    display: inline-block;
    text-align: center;
}

.thumb {
    width: 21%;
    height: auto;
    margin-top: 15px;
    cursor: pointer;
}

#imgDetail li {
    display: inline;
}

#thumbnails ul {
    margin: 0 auto;
    display: block;
}

#thumbnails li {
    display: inline;
    padding-right: 2%;
}

#thumbnails li:last-child {
    padding-right: 0;
}

.sketchfab-iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.sketchfab-iframe {
    opacity: 0;
    margin: 0 auto;
    transition: opacity .5s;
    display: none;
}

.sketchfab-iframe.active {
    opacity: 1;
    position: relative;
    display: block;
}

＆＃13;

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Images not Owned by Me -->

<!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">
    <title>Daniel Pollack</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js">     </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">       </script>
    <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fitvids/1.2.0/jquery.fitvids.js">
  </script>
  </head>

  <body id="green-room">

    <div class="slideshow-container">
        <div id="imgDetail">
            <img data-iframe="sketchfab-iframe-1" src="https://i.vimeocdn.com/video/682901345_640.webp" class="chair-class" data-active="true" />
            <img data-iframe="sketchfab-iframe-2" src="https://i.vimeocdn.com/video/682890362_640.webp" class="chair-class" data-active="false" />
            <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="chair-class" data-active="false" />

            <div class="aspect-ratio">
                <iframe id="sketchfab-iframe-1" class="sketchfab-iframe active" src="https://player.vimeo.com/video/255482396" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>

            <div class="aspect-ratio">
                <iframe id="sketchfab-iframe-2" class="sketchfab-iframe" src="https://player.vimeo.com/video/255473875" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>

            <!--CONTROLS-->
            <a href="javascript:void(0)" id="prev" class="prev-next-button previous">
                <p>&#10092;</p>
            </a>
            <a href="javascript:void(0)" id="next" class="prev-next-button next">
                <p>&#10093;</p>
            </a>
        </div>

        <!--Thumbnails-->
        <div id="thumbnails">
        </div>


</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

没关系，我发现我必须将vh添加到.sketchfab-iframe课程。

.sketchfab-iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40vw; 
}