如何用手风琴制作滑块？

Question

我需要制作一个类似于此页面上的滑块：“我们的解决方案”部分中的https://solargis.com/。我试图用Jquery做到这一点：

https://jsfiddle.net/newander13/o6bcx1vy/28

Archivos HTML

<div id="slider">
<div class="slide"><h2>Servicios Energéticos - Industria     4.0</h2></div>
<div class="slide"><h2>Blaud Energy Solar</h2></div>
<div class="slide"><h2>Desarrollo de proyectos de energías Renovables</h2></div>
<div class="slide"><h2>Proyectos de energía y mantenimiento</h2></div>
</div>

Archivo CSS

body {
  margin: 0px;
}

#slider {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg");
  background-size: cover;
  -webkit-transition: background 2s; /* Safari */
  transition: background 2s;
  -webkit-transition-delay: 1s; /* Safari */
  transition-delay: 1s;
}

.slide {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  padding: 20px;
  border-right: 1px solid white;
  border-left: 1px solid white;
}

.slide:hover {
  -webkit-box-flex-grow: 3;
  -webkit-flex-grow: 3;
  flex-grow: 3;
}

.slide h2 {
  color: white;
  font-family: 'Roboto', sans-serif;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position: relative;
  vertical-align: bottom;
}

Archivo JS

$(document).ready(function() {
   //imagen slide 1
   $('.slide:nth-child(2)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg)',
    'background-size': 'cover'
   });
});
   //imagen slide 2
   $('.slide:nth-child(3)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg)',
    'background-size': 'cover'
   });
  });
   //imagen slide 3
   $('.slide:nth-child(4)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg)',
    'background-size': 'cover'
   });
  });
   //imagen slide 4
   $('.slide:nth-child(5)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg)',
    'background-size': 'cover'
   });
  });
 });

我希望做与参考链接完全相同的操作。另一个细节：每次我将鼠标悬停在幻灯片上，然后再将鼠标悬停在上一张幻灯片上时，背景变化都太突然了。

感谢您的帮助。

Answer 1

您必须在悬停每个.slider元素时调整flex属性。您可以尝试如下修改代码：

$(document).ready(function() {
   //imagen slide 1
   $('.slide:nth-child(2)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg)',
    'background-size': 'cover'
   });
});
   //imagen slide 2
   $('.slide:nth-child(3)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg)',
    'background-size': 'cover'
   });
  });
   //imagen slide 3
   $('.slide:nth-child(4)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg)',
    'background-size': 'cover'
   });
  });
   //imagen slide 4
   $('.slide:nth-child(5)').hover(function(){
   $('#slider').css({
    'background':'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg)',
    'background-size': 'cover'
   });
  });
  
  
  
  // ADD THIS TO YOUR JQUERY
  
  $("#slider > .slide").on("mousemove", function() {
    $(this).siblings(".slide").css("flex","20%");
  	$(this).css("flex","40%");
  })
 });

body {
  margin: 0px;
}

#slider {
  display: flex;
  height: 100vh;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg");
  background-size: cover;
  transition-delay: 1s;
}

.slide {

  /* ADD FLEX 25% */
  flex: 25%;
  
  transition: all 500ms ease;
  padding: 20px;
  border-right: 1px solid white;
  border-left: 1px solid white;
}

.slide h2 {
  color: white;
  font-family: 'Roboto', sans-serif;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position: relative;
  vertical-align: bottom;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
<div class="borde">&nbsp;</div>
<div class="slide"><h2>Servicios Energéticos - Industria     4.0</h2></div>
<div class="slide"><h2>Blaud Energy Solar</h2></div>
<div class="slide"><h2>Desarrollo de proyectos de energías Renovables</h2></div>
<div class="slide"><h2>Proyectos de energía y mantenimiento</h2></div>
<div class="borde">&nbsp;</div>
</div>

这是一个CodePen link，因为此处的代码段无法正常工作。

Answer 2

我使用img标签代替背景图片，并在css下面添加了

 .background-images {
      position: absolute;
    }

    .background-images img {
      position: absolute;
      top: 0;
      object-fit: cover;
      object-position: center;
      z-index: -1;
      display: none;
    }

    .background-images .show {
      display: block !important;
    }

并添加到JQuery

下

$(document).ready(function() {
      $('#slider .slide').hover(function() {
        var id = $(this).attr("id");
        $(".background-images img").removeClass("show")
        $("#" + id + "_image").addClass("show");
      });
    });

$(document).ready(function() {
  $('#slider .slide').hover(function() {
    var id = $(this).attr("id");
    $(".background-images img").removeClass("show")
    $("#" + id + "_image").addClass("show");
  });
});

body {
  margin: 0px;
}

#slider {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  background: url();
  background-size: cover;
  -webkit-transition: background 2s;
  /* Safari */
  transition: background 2s;
  -webkit-transition-delay: 1s;
  /* Safari */
  transition-delay: 1s;
}

.slide {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  padding: 20px;
  border-right: 1px solid white;
  border-left: 1px solid white;
}

.slide:hover {
  -webkit-box-flex-grow: 3;
  -webkit-flex-grow: 3;
  flex-grow: 3;
}

.slide h2 {
  color: white;
  font-family: 'Roboto', sans-serif;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  position: relative;
  vertical-align: bottom;
}

.background-images {
  position: absolute;
}

.background-images img {
  position: absolute;
  top: 0;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  display: none;
}

.background-images .show {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <div class="borde">""</div>
  <div class="slide" id="servicios">
    <h2>Servicios Energéticos - Industria 4.0</h2>
  </div>
  <div class="slide " id="blaud">
    <h2>Blaud Energy Solar</h2>
  </div>
  <div class="slide " id="desarrollo">
    <h2>Desarrollo de proyectos de energías Renovables</h2>
  </div>
  <div class="slide " id="proyectos">
    <h2>Proyectos de energía y mantenimiento</h2>
  </div>
  <div class="borde">""</div>

  <div class="background-images">
    <img id="default" class="show" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg" alt="">
    <img id="servicios_image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg" alt="">
    <img id="blaud_image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg" alt="">
    <img id="desarrollo_image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg" alt="">
    <img id="proyectos_image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg" alt="">
  </div>
</div>

Answer 3

响应式解决方案，

$(function() {SolutionsOverview.init()
    });

    SolutionsOverview = {
        in_background_transition: !1,
        transitions: [],
        transition_timeout: null,
        image_data_attribute: "background-image",
        last_screen: null,
        init: function() {
            var e = this;
            this.$slider = $(".s-solutions-overview-slider"), this.$slider.length > 0 && (this.$slider_background = $(".solutions-overview-background"), this.$slider_background_holder = $(".solutions-overview-slider-holder"), this.$slides = this.$slider.find(".slide"), this.$inner_slides = this.$slider.find(".slide-inside"), e.resizeSlider(), this.$slider.find(".slide").on("click", function() {
                e.showHideSlides(this)
            }).on("mouseover", function() {
                $(window).width() > 991 && e.showHideSlides(this)
            }), e.resizeSlider(), $(window).resize(function() {
                    e.resizeSlider()
            }), this.redrawBackground())
        },
        redrawBackground: function() {
            this.transitions.push([this.$slides.filter(".active"), this.$slides.filter(".active")]), this.changeBackground()
        },
        resizeSlider: function() {
            var e;
            $(window).width() > 991 ? (this.$inner_slides.css("width", (this.$slider.width() - 6) * (8 / 12)), this.image_data_attribute = "background-image", e = "large") : (this.$inner_slides.css("width", ""), this.image_data_attribute = "background-image", e = "small"), null !== this.last_screen && this.last_screen === e || (this.last_screen = e, this.redrawBackground())
        },
        showHideSlides: function(e) {
            var t = $(e);
            if (!t.hasClass("active")) {
                var n = $(window).width() > 991,
                i = this.$slides.filter(".active");
                if (this.$slides.removeClass("active"), t.addClass("active"), this.transitions.push([i, t]), clearTimeout(this.transition_timeout), this.transition_timeout = setTimeout(this.changeBackground.bind(this), n ? 250 : 0), !n) {
                    var o = t.offset().top - $(window).scrollTop();
                    o < 0 && $(window).scrollTop($(window).scrollTop() + o)
                }
            }
        },
        changeBackground: function() {
            var e = this,
            t = this.transitions.length;
            if (t > 0 && !this.in_background_transition) {
                this.in_background_transition = !0;
                var n = this.transitions[0][0],
                i = this.transitions[t - 1][1];
                this.transitions.splice(0, t - 1), this.transitions[0][0] = this.transitions[0][1], this.$slider_background.css({
                    "background-image": "url(" + n.data(this.image_data_attribute) + ")",
                    opacity: 1
                }), this.$slider_background_holder.css({
                    "background-image": "url(" + i.data(this.image_data_attribute) + ")"
                }), this.$slider_background.animate({
                    opacity: 0
                }, 500, function() {
                    e.in_background_transition = !1
                })
            }
        }
    };

.s-solutions-list.s-slider{padding-bottom:0}
    .s-solutions-list.s-slider+.s-gray-background{margin-top:-45px;padding-top:90px}
    .s-solutions-overview{text-align:center}
    .s-solutions-overview .s-header img{margin:0 auto 40px}
    .s-solutions-overview .s-header .title{font-size:54px;line-height:44px;margin:0 0 32px}
    .s-solutions-overview .b-items{font-size:21px;line-height:30px;font-weight:700;margin:0 0 25px}
    .s-solutions-overview .b-items a{display:inline-block;color:#000;text-decoration:underline;margin:0 15px}
    .s-solutions-overview .b-items a:hover{color:#333}
    .solutions-overview-slider-holder{position:relative}
    .solutions-overview-slider-holder .container{padding-left:0;padding-right:0}
    @media (max-width:991px){.solutions-overview-slider-holder{background-position:center top}}
    .solutions-overview-background{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0}
    .s-solutions-overview-slider{width:100%}
    .s-solutions-overview-slider .slide{cursor:pointer;transition:750ms cubic-bezier(.17,.7,.385,.99);overflow:hidden;position:relative}
    .s-solutions-overview-slider .slide:hover{cursor:hand;background-color:rgba(255,255,255,.1)}
    @media (min-width:992px){.solutions-overview-background{background-size:cover;background-position:center center}.s-solutions-overview-slider{height:640px;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:stretch;justify-content:stretch}.s-solutions-overview-slider .slide{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;border-left:1px solid rgba(255,255,255,.5)}.s-solutions-overview-slider .slide .arrow{display:block;text-align:center;position:absolute;left:0;right:0;top:60px}.s-solutions-overview-slider .slide .arrow img{width:30px;height:30px}.s-solutions-overview-slider .slide:first-child{-ms-flex:1;flex:1}
}
@media (max-width:991px){.solutions-overview-background{background-position:center top}.s-solutions-overview-slider .slide{border-top:1px solid rgba(255,255,255,.5)}.s-solutions-overview-slider .slide .arrow{display:block;position:absolute;right:0;width:60px;top:18px}.s-solutions-overview-slider .slide .arrow img{width:30px;height:30px;-ms-transform:rotate(90deg);transform:rotate(90deg)}
}
.s-solutions-overview-slider .slide:last-child{border-right:1px solid rgba(255,255,255,.5)}
@media (max-width:1259px){.s-solutions-overview-slider .slide:last-child{border-right:none}.s-solutions-overview-slider .slide:first-child{border-left:none}
}
.s-solutions-overview-slider .slide .slide-inside{color:#fff}
@media (min-width:992px){.s-solutions-overview-slider .slide .slide-inside{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex}.s-solutions-overview-slider .slide .slide-inside h3.title{opacity:1;margin:0;position:absolute;left:-1000px;right:-1000px}.s-solutions-overview-slider .slide .slide-inside h3.title .title-wrapper{-ms-transform:rotate(-90deg);transform:rotate(-90deg);margin:0 auto;width:1238px;padding-left:50px;position:relative}}
@media (max-width:991px){.s-solutions-overview-slider .slide .slide-inside h3.title{padding:20px 30px;margin:0}}
.s-solutions-overview-slider .slide .slide-inside h3.title .text{display:inline-block}
.s-solutions-overview-slider .slide .slide-inside .content{width:100%;text-align:center}
@media (min-width:992px){.s-solutions-overview-slider .slide .slide-inside .content{height:100%;padding-left:60px;padding-right:60px;padding-top:71px;opacity:0;transition:opacity .5s cubic-bezier(.17,.7,.385,.99)}.s-solutions-overview-slider .slide .slide-inside .content h3{line-height:.9;font-weight:600;font-size:48px}.s-solutions-overview-slider .slide .slide-inside .content h3 .text{margin-bottom:22px;display:inline-block}.s-solutions-overview-slider .slide .slide-inside .content p{font-size:24px;line-height:32px}.s-solutions-overview-slider .slide .slide-inside .content p.image{margin-top:80px}.s-solutions-overview-slider .slide.active{-ms-flex:8;flex:8}}
@media (max-width:991px){.s-solutions-overview-slider .slide .slide-inside .content{max-height:0;overflow:hidden;padding-left:30px;padding-right:30px}.s-solutions-overview-slider .slide .slide-inside .content h3{line-height:.9;font-weight:600;font-size:36px}.s-solutions-overview-slider .slide .slide-inside .content h3 .text{margin-bottom:17px;display:inline-block}.s-solutions-overview-slider .slide .slide-inside .content p{font-size:18px;line-height:24px}.s-solutions-overview-slider .slide .slide-inside .content p.image{margin-top:60px;margin-bottom:60px}.s-solutions-overview-slider .slide.active .content{max-height:600px}}
.s-solutions-overview-slider .slide .slide-inside .content a{display:inline-block;color:#fff;font-size:14px;line-height:28px;font-weight:600;letter-spacing:1px;text-decoration:none;transition:none;padding:0 4px;border-bottom:2px solid #fff}
.s-blog-subscribe p a,.s-gray-link-box .b-link-boxes-list .b-wrap .links a:hover,.s-solutions-list .b-solutions-scheme .b-items a,.s-support .container .b-wrap .content .links a:hover,.s-support-category .title a:hover,.s-support-category ul.children li a:hover{text-decoration:underline}
.s-solutions-overview-slider .slide.active{background-color:transparent;cursor:default}
.s-solutions-overview-slider .slide.active h3.title{opacity:0}
@media (min-width:992px){.s-solutions-overview-slider .slide.active .content{opacity:1;transition:opacity .5s cubic-bezier(.17,.7,.385,.99)}}
.s-solutions-overview-slider .slide.active .arrow{display:none}.s-testimonials{color:#fff;background-position:center center;min-height:385px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:45px 0 50px;margin:45px auto}
.s-testimonials blockquote{border:0;margin:0;padding:0;font-size:30px;line-height:38px;font-weight:300}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="s s-link-boxes-list s-solutions-list s-slider">
        <div class="solutions-overview-slider-holder" style="background-image: url(&quot;https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg&quot;);">
            <div class="solutions-overview-background" style="background-image: url(&quot;https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg&quot;); opacity: 0;"></div>
            <div class="container">
                <div class="s-solutions-overview-slider">
                    <div class="slide active" data-background-image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-macquarie-71208_1920.jpg">
                        <span class="arrow">
                            <img src="https://solargis.com/themes/solargis/assets/arrow-right.svg">
                        </span>
                        <div class="slide-inside" style="width: 816px;">
                            <h3 class="title">
                                <div class="title-wrapper">
                                    <span class="text">Servicios Energéticos - Industria     4.0</span>
                                </div>
                            </h3>
                            <div class="content">
                                <h2>
                                    <span class="text">Servicios Energéticos - Industria     4.0</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="slide " data-background-image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/beach-2089959_1280.jpg">
                        <span class="arrow">
                            <img src="https://solargis.com/themes/solargis/assets/arrow-right.svg">
                        </span>
                        <div class="slide-inside" style="width: 816px;">
                            <h3 class="title">
                                <div class="title-wrapper">
                                    <span class="text">Blaud Energy Solar</span>
                                </div>
                            </h3>
                            <div class="content">
                                <h2>
                                    <span class="text">Blaud Energy Solar</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="slide " data-background-image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/lake-696098_1920.jpg">
                        <span class="arrow">
                            <img src="https://solargis.com/themes/solargis/assets/arrow-right.svg">
                        </span>
                        <div class="slide-inside" style="width: 816px;">
                            <h3 class="title">
                                <div class="title-wrapper">
                                    <span class="text">Desarrollo de proyectos de energías Renovables</span>
                                </div>
                            </h3>
                            <div class="content">
                                <h2>
                                    <span class="text">Desarrollo de proyectos de energías Renovables</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="slide " data-background-image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/769286/forest-208517_1280.jpg">
                        <span class="arrow">
                            <img src="https://solargis.com/themes/solargis/assets/arrow-right.svg">
                        </span>
                        <div class="slide-inside" style="width: 816px;">
                            <h3 class="title">
                                <div class="title-wrapper">
                                    <span class="text">Proyectos de energía y mantenimiento</span>
                                </div>
                            </h3>
                            <div class="content">
                                <h2>
                                    <span class="text">Proyectos de energía y mantenimiento</span>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>