Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1px line from previous picture on left side #1647

Open
pencillmatic opened this issue Nov 29, 2016 · 12 comments
Labels
bug

Comments

@pencillmatic
Copy link

@pencillmatic pencillmatic commented Nov 29, 2016

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

letline

@pencillmatic

This comment has been minimized.

Copy link
Author

@pencillmatic pencillmatic commented Nov 30, 2016

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

@lmanzurv

This comment has been minimized.

Copy link

@lmanzurv lmanzurv commented Dec 14, 2016

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

screen shot 2016-12-14 at 4 51 48 pm

@lmanzurv

This comment has been minimized.

Copy link

@lmanzurv lmanzurv commented Dec 14, 2016

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

This comment has been minimized.

Copy link

@Deutschi Deutschi commented Dec 20, 2016

@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 comment has been minimized.

Copy link

@Hard0877 Hard0877 commented Jan 16, 2017

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

@damirkoch damirkoch added the bug label Feb 13, 2017
@damirkoch

This comment has been minimized.

Copy link
Collaborator

@damirkoch damirkoch commented Feb 13, 2017

(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

This comment has been minimized.

Copy link

@ankitrawal001 ankitrawal001 commented Aug 18, 2017

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

It worked for me.

@sharifzadesina

This comment has been minimized.

Copy link

@sharifzadesina sharifzadesina commented Dec 25, 2017

I have this problem also

@yunusga

This comment has been minimized.

Copy link

@yunusga yunusga commented Feb 22, 2018

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

This comment has been minimized.

Copy link

@seuck seuck commented Sep 19, 2018

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

This comment has been minimized.

Copy link

@miguelfspinto miguelfspinto commented Oct 18, 2018

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

@captainkovalsky

This comment has been minimized.

Copy link

@captainkovalsky captainkovalsky commented Nov 12, 2019

I put the margin: 1 to the options and it works fine. Possibly need more. When I tried this #1647 (comment) the first slider was skipped)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.