1

jquery slick スライダーを作成しました。私が欲しいbackground-attachment:fixed。moz、IEでは正常に動作していますが、google chromeでは動作していません。

フィドルのデモを見つけてください

HTML:

<div class="homeBannerSlider">
    <div id="homeSlckSlider">
        <div>
        <div class="slider slider1"></div>
        </div>
        <div>
        <div class="slider slider2"></div>
        </div>
    </div>
</div>

CSS:

.slider {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    -webkit-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    -webkit-backface-visibility: hidden
    overflow: hidden;
}
.slider1 {
    background-image: url(http://backgroundpic.xyz/wp-content/uploads/ktz/beautiful-bregje-heinen-lovely-model-girl-dress-red-fashion-2zqr635zyr5rr9pkwtvg22.jpg);
}

JS:

$('#homeSlckSlider').slick({ 
      autoplay:true, 
      dots: false,
      arrows: false,
      infinite: true,
      speed: 2000,
      autoplaySpeed: 15000,
      fade: true,
      cssEase: 'linear'
});
slider();
$(window).resize(function(){
slider();
});

function slider() {
    var winHeight = $(window).height();
        $('.homeBannerSlider, .slider').css({'height': winHeight +'px'});
    }
4

1 に答える 1