Owlcarousel2: Fixed background image (background-attachment: fixed)

[ohjoycelau]

Have a working carousel, except, I would ideally like the background image to be fixed. When I add

background-attachment: fixed;

the background image does not display but inspecting the element, the div is there in the right place.
I noticed any styling with "position: fixed" messes with OwlCarousel, so is there any work around? I'm using PHP to load content (Wordpress), so hard coding is not an option.

$(".featured-container").owlCarousel({
    items:1,
    lazyLoad:true,
    loop:true,
    nav:false,
});

This is the resulting appended html:

<div class="featured-container owl-carousel owl-theme owl-loaded">
    // clones, etc
        <div class="owl-item">
            <div class="cover featured-image">
                <div class="cover-background" style="background-image: url("url"); background-size: cover; background-attachment: fixed; ></div>
                <header class="cover-header">
                    // text content
                </header>
        </div>
    </div>
</div>

[Pixelalb]

Hey! Did you manage to work this around?

[davidrhoderick]

I'd also like to know if you managed to get this to work.

[nelsson]

Good Day
I have the same problem, some solution?

[raihan004]

in 2017, I've same problem

[fayekramzy91]

same problem here..

[exilvm]

guys is there any updates about this issue?

[nelsson]

Hello guys, one option we found was, put the carousel in position:fixed, leaving a height of the carousel size and everything goes up and gives the feeling that it is in background-attachment: fixed

[nelsson]

another option that occurred to my friend gabriel was: push the carousel, with transform: translateY, and with overflow: hidden to the father of the carousel, gives the same sensation.:
http://recordit.co/4jckaav7e0
http://recordit.co/8jvWHyJhCV

[sheldonreed3]

Still having issues with this. Seems to be stemming from the translate3d bug. Does anyone have a fix?

[sheldonreed3]

It appears that changing transform: translate3d(' + coordinate + 'px,0px,0px) and the check in Owl.prototype.animate to use translateX instead solves the issue for me. It seems to be a common bug across sliders. Can anyone verify that this works for you as well?

[ngocminhxx]

Hi everyone, I am searching solution for this problem, anyone can help me? Thanks so much

[sheldonreed3]

@ngocminhxx I ended up running .pipe(replace('translate3d', 'translateX')) in a gulp file with gulp-replace. There are many more options depending on your environment. This has made it work for me. Dirty, I admit. But until/unless it gets changed in the package, I'm not sure what else to do.

[ngocminhxx]

@sheldonreed3 haha, thanks so much for saving me. You help me so much. Wish the best for you

[ngocminhxx]

@sheldonreed3 does it mean you replaced text in css and js files of the plugin? Sorry, I don't know about gulp much

[sheldonreed3]

That is correct. I changed the translate3ds to translateXs.

[ngocminhxx]

@sheldonreed3 I see, I đo the same but the owlcarousel not working anymore. Do you have any demo or site you made for me to refer, thanks so much

[sheldonreed3]

@ngocminhxx I double checked my code. Looks like I just did the replace on the CSS. I'm also using the npm package for the carousel v2.2.0. In case you aren't.

[ngocminhxx]

@sheldonreed3 my version is Owl Carousel v2.3.4, seem to change translateX not working in this version. I will try to use an older version, thanks for your support so much

[ngocminhxx]

@sheldonreed3 I remove all translate property in css then background fixed work, but it is nothing without translate, so I feel stuck now, maybe position fixed is my backup now

[Poozan379]

@sheldonreed3 Thanks a lot. Ur solution worked perfectly for me. :)

[Poozan379]

But Sad that, it fixed the background image and now the slider isnt working :(

[wassy83]

Hi everyone, I would like to share with you the solution to this problem, since I am not a programmer and it required a lot of research to find a solution that actually works with version 2.3.4.

first of all you have an html markup like this, notice the fixed rule into the styles

<div class="full-screen-section">
  <div class="owl-carousel-full owl-theme">
    <div class="owl-wrapper">
        <div class="owl-full" style="background: url('/image-01.jpg') no-repeat center fixed;background-size: cover;">/div>
    </div>
    <div class="owl-wrapper">
        <div class="owl-full" style="background: url('/image-01.jpg') no-repeat center fixed;background-size: cover;"></div>
    </div>
    <div class="owl-wrapper">
        <div class="owl-full" style="background: url('/image-01.jpg') no-repeat center fixed;background-size: cover;"></div>
    </div>
    <div class="owl-wrapper">
        <div class="owl-full" style="background: url('/image-01.jpg') no-repeat center fixed;background-size: cover;"></div>
    </div>
</div>

the next step is to make all the elements full screen, I made this with a js solution that calculates the height of my screen and applies the value to the full-screen-section container. I prefer this solution because of the bars that disappear at the top and bottom on some smartphones and would make the calculation unstable with pure css using vh units

<script>
jQuery(function($){
    resize_div();
    window.onresize = function(event) {
        resize_div();
    };
    function resize_div() {
        $(".full-screen-section").css("height", ($(window).outerHeight() - $("#main-header").outerHeight() - $("#wpadminbar").outerHeight()) +  "px");
    }
});
</script>

now notice in this css that I'm applying 100% rules to all the owl carousel divs. The final rule is the more important, cause is absolute positioning the backgrounds, in this way I can manipulate in a the last step position of the slides.

.owl-carousel-full {
    position: relative;
    height: 100%;
}
.owl-carousel-full div:not(.owl-nav) {
    height: 100%;
    width: 100%;
}
.owl-full {
    position:absolute;
    top:0;
    left:0;
}

the problem now arises that owl carousel applies the 3d transformation to the container of the slide and not to the div relative to the background. Unfortunately it is not possible to apply transformations in this way to the backgrounds, so we will calculate the correct position of the slides, and reposition them correctly using transform3d, the owl carousel resize events, and obviously also the ready event.

<script>
jQuery(function($){
    $(".owl-carousel-full").owlCarousel({
        loop: true,
        navigation: true,
        dots: false,
        onInitialize: check_loop,
        onResized: position_owl_full,
        slideSpeed : 300,
        paginationSpeed : 400,
        rewindSpeed: 500,
        items : 1, 
        itemsDesktop : false,
        itemsDesktopSmall : false,
        itemsTablet: false,
        itemsMobile : false,
        });
    var loop;
    function check_loop(event){
        loop = (event.relatedTarget.options.loop)? 2 : 0;
    }
    position_owl_full(loop);                
    function position_owl_full(event){
        var i;
        for (i = 0; i < $('.owl-carousel-full .owl-item .owl-full').length; i++) {
            $('.owl-carousel-full .owl-full').eq(i).css("transform", "translate3d(" + $(window).outerWidth() * (i + loop) + "px,0px,0px)");
        }
    }
});
</script>

it is very important to note that the position is calculated by comparing the width of the window to the number of items, but in the case of the loop option enabled, the number of items increases to exactly double, consequently I parameterized the position_owl_full function based on the value of the loop variable, that will change according to the configuration of your carousel (loop = true or false).

that said, the solution definitely works with the latest version of owl carousel and do not requires to change its source code. I think that as it is structured it should also support subsequent upgrades. I repeat, I'm not a coder, just a lover of the digital world, so you need to perfect this for sure.
regards from Italy