Owlcarousel2: 1px line from previous picture on left side

[pencillmatic]

Hello!

Sorry I don't have links to show the issue as I currently work on this project offline. I have this owl crarousel 2 on the front page and a Understrap based website.

The issue appears from time to time, not sure exactly when or why but depends on the width of the browser. So the issue is there is a 1px line on the left of the current picture displaying the border of the previous picture. All pics have same size.

        <div class="fadeOut owl-carousel front">
        <div class="item"> 
        <a href="http://elsphere:8888/"><img src="http://elsphere:8888/wp-content/uploads/2016/11/frontslide-01.jpg"></a></div>
        <div class="item"> 
        <a href="http://elsphere:8888/"><img src="http://elsphere:8888/wp-content/uploads/2016/11/frontslide-03.jpg"></a></div> 
        <div class="item"> 
        <a href="http://elsphere:8888/"><img src="http://elsphere:8888/wp-content/uploads/2016/11/frontslide-04.jpg"></a></div>
        <div class="item"> 
        <a href="http://elsphere:8888/"><img src="http://elsphere:8888/wp-content/uploads/2016/11/frontslide-05.jpg"></a></div>
        <div class="item"> 
        <a href="http://elsphere:8888/"><img src="http://elsphere:8888/wp-content/uploads/2016/11/frontslide-06.jpg"></a></div>
        <div class="item"> 
        <a href="http://elsphere:8888/"><img src="http://elsphere:8888/wp-content/uploads/2016/11/frontslide-07.jpg"></a></div>
        </div>

owl-carousel.front{
  max-width: 1246px;
  margin: 0 auto;
  margin-bottom: 22px;}

div#page-wrapper.wrapper{padding:0 0 32px 0;}

Query(document).ready(function() {
        var owl = jQuery('.owl-carousel');
        owl.owlCarousel({
            items:(understrap_slider_variables.items),
            loop:true,
            autoplay:true,
            autoplayTimeout:(understrap_slider_variables.timeout),
            animateOut: 'fadeOut',
            animateIn: 'fadeIn',
            nav: false,
            dots: true,
            autoplayHoverPause:true,
            margin:0,
        });

        jQuery('.play').on('click',function(){
            owl.trigger('autoplay.play.owl',[1000])
        });
        jQuery('.stop').on('click',function(){
            owl.trigger('autoplay.stop.owl')
        });
    });

[pencillmatic]

Ok! I managed to fix that issue by changing the margin from 0 to 1

[lmanzurv]

I have this issue but I cannot add margin because I have several items shown at once.

[lmanzurv]

I fixed it by changing the following line

https://github.com/OwlCarousel2/OwlCarousel2/blob/develop/src/js/owl.carousel.js#L891

to

transform: 'translate3d(' + (coordinate-1) + 'px,0px,0px)',

[Deutschi]

@lmanzurv with this solution I get the line from the next picture on the right side if I have a tablet/mobile viewport. Guess I have to fix this with the margin approach.

[Hard0877]

This problem, in Safari browser (1px https://duvils.ru).
Please help to solve this problem (version owl 2.2.0)

[damirkoch]

(Sorry about the canned reply.)

We have received your feature request and will evaluate the implementation of this.

I can't give you an estimated date when or if this will be integrated into the project. This might happen when the main refactoring will take place.

[ankitrawal001]

.owl-item .item { margin-left: 1px !important; }

It worked for me.

[sharifzadesina]

I have this problem also

[yunusga]

I faced this problem when the grid was based on flexbox and the parent (owl-stage or owl-stage-outer) had pseudo elements :before and :after. Hello bootstrap 3 🤯, just remove them.

[seuck]

Issue still valid.

I fixed it changing line 299 of owl.carousel.js to:

let width = (Math.ceil(this.width()) / this.settings.items).toFixed(0) - this.settings.margin,

[miguelfspinto]

you can solve this with simple CSS:

.owl-stage-outer::after { width: 1px; content: " "; position: absolute; top: 0; left: 0; height: 100%; background-color: white; }

[ghost]

I put the margin: 1 to the options and it works fine. Possibly need more. When I tried this https://github.com/OwlCarousel2/OwlCarousel2/issues/1647#issuecomment-422793514 the first slider was skipped)

[Fank09]

I got 1px extra line but on the right side of every image. The margin:0 didn't do the trick for me,
I fixed in CSS by removing the 'dot' in content: ".";

.owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }

[manishasawlani129]

In the owl.carousel.js file
REPLACE
transform: 'translate3d(' + coordinate + 'px,0px,0px)'
WITH
transform: 'translate3d(' + (coordinate-1) + 'px,0px,0px)'

And, in case of the owl.carousel.min.js file
REPLACE
transform: 'translate3d("+b+"px,0px,0px)'
WITH
transform: 'translate3d("+(b-1)+"px,0px,0px)'

Hope this helps!