CODEWITHSUNDEEP
jquerycsssliderslick.jsbackground-attachment
Ganesh Yadav
Ganesh Yadav

Reputation: 2685

background-attachment:fixed not working with slick slider in chrome

I've create jquery slick slider. In which I want background-attachment:fixed. It's working fine in moz, IE but not working in google chrome.

Please find fiddle demo

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'});
    }

Upvotes: 1

Views: 3062

Answers (2)

Ольга Платова
Ольга Платова

Reputation: 1

it`s helps to you. You need to del it

.slick-slider .slick-track,
.slick-slider .slick-list
{
/*    -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);*/
}

Upvotes: 0

Ahmad Ali
Ahmad Ali

Reputation: 19

Please Try this JS. Hope it will help you.

    function parallax(selector){
      var scrolled = $(window).scrollTop();
      $(selector).css('background-position',"0 "+  (scrolled * 1) + 'px');
    }

    $(window).scroll(function(e){
      parallax('.slider .item');
    });

Upvotes: 1

Related Questions