Prev Next Button Responsive

Question

I have an image/video carousel with previous and next buttons. The problem I'm having is that when I resize the window, the arrows get longer and don't stick to the frame of the videos. On the last image of the carousel, the arrows stay the "same size" as the picture. But in the two vimeo videos, they don't. This causes the thumbnails below it to be pushed down very far. How do I stop the arrows from getting "longer" than the image?

(I want the carousel to look like this when I resize the window.)

Here's the codepen. Please help, I don't know how to fix this.

$(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 = $("");
        images.each(function (index, element) {
            var currentThumb = $("");
            var 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);
    }
});

 * {
    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;
}








    
    
    
    Daniel Pollack
    
    
    
    
  
  

  

    
        
            
            
            

            
                
            

            
                
            

            
            
                ❬
            
            
                ❭

user7311741 · Accepted Answer

Nevermind, I found out I had to add vh to the .sketchfab-iframe class.

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

Prev Next Button Responsive

Answers (1)

Related Questions