同一页上的两个滑块。当我显示隐藏的时，它看起来不太好

Question

我在同一页上使用了两个滑块。其中一个是隐藏的。我有两个按钮可以在它们之间切换显示，一切正常，但是当我调整 window 的大小时并尝试显示隐藏的滑块时，滑块显示但看起来不太好并且不在屏幕中央。

所以问题是：当我调整 window 的大小时并尝试显示隐藏的滑块。

这是问题的一个例子：

.carousel-3d-slider{z-index:10000;}
.carousel-3d-slider .carousel-3d-slide {border:0;background:none;overflow:initial;}
.carousel-3d-slider, .carousel-3d-slider .carousel-3d-slide {height:400px !important;}
.carousel-3d-slider .carousel-3d-slide img{border-radius:200px;border:6px solid #fff;box-shadow:0 3px 8px #000;background-color:#f0f0f0}
.imp-slider .carousel-3d-container .carousel-3d-controls {}
    .carousel-3d-container .carousel-3d-controls .prev, .carousel-3d-container .carousel-3d-controls .next{width:50px;height:50px;background-color:white;text-align:center;line-height:36px;}
    .carousel-3d-container .carousel-3d-controls .prev span, .carousel-3d-container .carousel-3d-controls .next span{text-align:center;line-height:34px;color:#e2003d}
.tabs-toggle-pnl {position:absolute;z-index:20000;right:15px;top:15px;padding:7px 0;background-color:#f0f0f0;border:3px solid #fff;border-radius:6px;box-shadow:0 2px 3px rgba(0, 0, 0, 0.6);}
    .tabs-toggle-pnl a {cursor:pointer;padding:9px 10px;width:155px;font-size:15px;}
        .tabs-toggle-pnl a:hover {text-decoration:none;}
        .tabs-toggle-pnl a.selected {color:white;background-color:#e2003d}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    
  
    
      <script type="text/javascript" src="https://wlada.github.io/vue-carousel-3d/js/vue.js"></script>
    
  
    
      <script type="text/javascript" src="https://wlada.github.io/vue-carousel-3d/js/vue-carousel-3d.min.js"></script>
    
<script>
var mSlides = [
 {title: "1", src: "http://placehold.it/350x150"},
  {title: "2", src: "http://placehold.it/350x150"},
  {title: "3", src: "http://placehold.it/350x150"},
  {title: "4", src: "http://placehold.it/350x150"},
  {title: "5", src: "http://placehold.it/350x150"}
];
var plSlides = [
 {title: "1", src: "http://placehold.it/350x250"},
  {title: "2", src: "http://placehold.it/350x250"},
  {title: "3", src: "http://placehold.it/350x250"},
  {title: "4", src: "http://placehold.it/350x250"},
  {title: "5", src: "http://placehold.it/350x250"}
];
window.onload = function () {
        var slideTpl = '';
        mSlides.forEach(function (slide, index) {
            slideTpl += '<slide :index="' + index + '"><img data-toggle="tooltip" data-placement="top" title="' + slide.title + '" src="' + slide.src + '" /></slide>';
        });
        new Vue({
            el: '#mSlider',
            width:286,
            height:286,
            components: {
                'carousel-3d': Carousel3d.Carousel3d,
                'slide': Carousel3d.Slide
            },
            template: '<carousel-3d :controls-visible="true" data-id="machines">' + slideTpl + '</carousel-3d>',
        });

        var plSlideTpl = '';
        plSlides.forEach(function (slide, index) {
            plSlideTpl += '<slide :index="' + index + '"><img data-toggle="tooltip" data-placement="top" title="' + slide.title + '" src="' + slide.src + '" /></slide>';
        });
        new Vue({
            el: '#plSlider',
            width:286,
            height:286,
            components: {
                'carousel-3d': Carousel3d.Carousel3d,
                'slide': Carousel3d.Slide
            },
            template: '<carousel-3d :controls-visible="true" data-id="prodlines">' + plSlideTpl + '</carousel-3d>',
        });

        $("div[data-id='prodlines']").hide();
    }

    function showProdLinesSlider(btn){
        $(".carousel-3d-container[data-id='prodlines']").show();
        $(".carousel-3d-container[data-id='prodlines']").css("height", "auto");
        $(".carousel-3d-container[data-id='machines']").hide();
        $(".tabs-toggle-pnl a").removeClass("selected");
        $(btn).addClass("selected");
        
        return false;
    }

    function showMachinesSlider(btn){
        $(".carousel-3d-container[data-id='prodlines']").hide();
        $(".carousel-3d-container[data-id='machines']").show();
        $(".carousel-3d-container[data-id='machines']").css("height", "auto");
        $(".tabs-toggle-pnl a").removeClass("selected");
        $(btn).addClass("selected");
        return false;
    }
</script>
<div id="mSlider">
</div>

<div id="plSlider">
</div>

<div class="tabs-toggle-pnl">
    <a onclick="showProdLinesSlider(this)">First slider</a>
    <a onclick="showMachinesSlider(this)" class="selected">second slider</a>
</div>

Answer 1

经过一些工作后，我找到了解决方案，我只需要在滑块之间的每次切换时触发一个调整大小事件，这是代码

.carousel-3d-slider{z-index:10000;}
.carousel-3d-slider .carousel-3d-slide {border:0;background:none;overflow:initial;}
.carousel-3d-slider, .carousel-3d-slider .carousel-3d-slide {height:400px !important;}
.carousel-3d-slider .carousel-3d-slide img{border-radius:200px;border:6px solid #fff;box-shadow:0 3px 8px #000;background-color:#f0f0f0}
.imp-slider .carousel-3d-container .carousel-3d-controls {}
    .carousel-3d-container .carousel-3d-controls .prev, .carousel-3d-container .carousel-3d-controls .next{width:50px;height:50px;background-color:white;text-align:center;line-height:36px;}
    .carousel-3d-container .carousel-3d-controls .prev span, .carousel-3d-container .carousel-3d-controls .next span{text-align:center;line-height:34px;color:#e2003d}
.tabs-toggle-pnl {position:absolute;z-index:20000;right:15px;top:15px;padding:7px 0;background-color:#f0f0f0;border:3px solid #fff;border-radius:6px;box-shadow:0 2px 3px rgba(0, 0, 0, 0.6);}
    .tabs-toggle-pnl a {cursor:pointer;padding:9px 10px;width:155px;font-size:15px;}
        .tabs-toggle-pnl a:hover {text-decoration:none;}
        .tabs-toggle-pnl a.selected {color:white;background-color:#e2003d}

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    
  
    
      <script type="text/javascript" src="https://wlada.github.io/vue-carousel-3d/js/vue.js"></script>
    
  
    
      <script type="text/javascript" src="https://wlada.github.io/vue-carousel-3d/js/vue-carousel-3d.min.js"></script>
    
<script>
var mSlides = [
 {title: "1", src: "http://placehold.it/350x150"},
  {title: "2", src: "http://placehold.it/350x150"},
  {title: "3", src: "http://placehold.it/350x150"},
  {title: "4", src: "http://placehold.it/350x150"},
  {title: "5", src: "http://placehold.it/350x150"}
];
var plSlides = [
 {title: "1", src: "http://placehold.it/350x250"},
  {title: "2", src: "http://placehold.it/350x250"},
  {title: "3", src: "http://placehold.it/350x250"},
  {title: "4", src: "http://placehold.it/350x250"},
  {title: "5", src: "http://placehold.it/350x250"}
];
window.onload = function () {
        var slideTpl = '';
        mSlides.forEach(function (slide, index) {
            slideTpl += '<slide :index="' + index + '"><img data-toggle="tooltip" data-placement="top" title="' + slide.title + '" src="' + slide.src + '" /></slide>';
        });
        new Vue({
            el: '#mSlider',
            width:286,
            height:286,
            components: {
                'carousel-3d': Carousel3d.Carousel3d,
                'slide': Carousel3d.Slide
            },
            template: '<carousel-3d :controls-visible="true" data-id="machines">' + slideTpl + '</carousel-3d>',
        });

        var plSlideTpl = '';
        plSlides.forEach(function (slide, index) {
            plSlideTpl += '<slide :index="' + index + '"><img data-toggle="tooltip" data-placement="top" title="' + slide.title + '" src="' + slide.src + '" /></slide>';
        });
        new Vue({
            el: '#plSlider',
            width:286,
            height:286,
            components: {
                'carousel-3d': Carousel3d.Carousel3d,
                'slide': Carousel3d.Slide
            },
            template: '<carousel-3d :controls-visible="true" data-id="prodlines">' + plSlideTpl + '</carousel-3d>',
        });

        $("div[data-id='prodlines']").hide();
    }

    function showProdLinesSlider(btn){
        $(".carousel-3d-container[data-id='prodlines']").show();
        $(".carousel-3d-container[data-id='prodlines']").css("height", "auto");
        $(".carousel-3d-container[data-id='machines']").hide();
        $(".tabs-toggle-pnl a").removeClass("selected");
        $(btn).addClass("selected");
        setTimeout(fireResizeEvent, 10);

        return false;
    }

    function showMachinesSlider(btn){
        $(".carousel-3d-container[data-id='prodlines']").hide();
        $(".carousel-3d-container[data-id='machines']").show();
        $(".carousel-3d-container[data-id='machines']").css("height", "auto");
        $(".tabs-toggle-pnl a").removeClass("selected");
        $(btn).addClass("selected");
        setTimeout(fireResizeEvent, 10);
        return false;
    }

    function fireResizeEvent(){
        window.dispatchEvent(new Event('resize'));
    }

</script>
<div id="mSlider">
</div>

<div id="plSlider">
</div>

<div class="tabs-toggle-pnl">
    <a onclick="showProdLinesSlider(this)">First slider</a>
    <a onclick="showMachinesSlider(this)" class="selected">second slider</a>
</div>

同一页上的两个滑块。当我显示隐藏的时，它看起来不太好

Two sliders at same page. when I show hidden one it looks not good

jquery

slider

window-resize

jquery-events