search

stevenwanderski / bxslider-4

Responsive jQuery content slider
Other
4.22k stars 1.85k forks source link

wrong first slide with html picture tag #1284

Open netfeld opened 3 years ago

netfeld commented 3 years ago

The position of the first image is not correct set when using html picture tags insted of img. It shows the bx-clone image on the left. pager shows correctly the first slide.

If i use an slider with image tag (the full width is 1034px) the start image 0 is positioned (id="header_slider"): width: 4215%; position: relative; transition-duration: 0s; transform: translate3d(-1034px, 0px, 0px);

If i use the slider with picture tag the start image (header_slider) is positioned: width: 4215%; position: relative; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);

Any ideas? Thx, Hauke

netfeld commented 3 years ago

Simple Bugfix:

        onSliderLoad: function(){
             //bugfix https://github.com/stevenwanderski/bxslider-4/issues/1284
             //move to first slide
             let firstChild=$(this).children().first();
             let width=firstChild.width();
             $(this).css("transform","translate3d(-"+width+"px,0,0)");
         }
BobDenny commented 3 years ago

I had the same problem in Chrome Version 92.0.4515.131 but with tags. I applied this fix and the problem was resolved. Thanks.