Coloring in combination with Owl Carousel behaves odd

[rpkoller]

Somehow the colors backgroundcheck applies to my owl carousel buttons don't behave comprehensible (the color code is light=green, dark=red, complex=blue). But it turns out a little bit different: https://dl.dropboxusercontent.com/u/8578/bkgrdcheckCOLORS.mov

My relevant settings are:

The HTML snippet

<div id="about-imp" class="owl-carousel">
    <div><img src="img/1.jpg" alt="1"></div>
    <div><img src="img/2.jpg" alt="2"></div>
    <div><img src="img/3.jpg" alt="3"></div>
    <div><img src="img/4.jpg" alt="4"></div>
    <div><img src="img/5.jpg" alt="5"></div>
    <div><img src="img/6.jpg" alt="6"></div>
</div>

...the JS snippet:

$(document).ready(function() {
    $("#about-imp").owlCarousel({
        navigation:true,
        slideSpeed:300,
        paginationSpeed: 400,
        singleItem:true,
        afterInit: function(){
            BackgroundCheck.init({
              targets: '.owl-buttons div',
              images: '.owl-carousel img'
          });
        },
        afterMove: function() {
            BackgroundCheck.refresh();
        }
    });
});

…and the relevant CSS part about the buttons is:

.owl-theme .owl-controls .owl-buttons div {
  /*color: #FFF;*/
  display: inline-block;
  zoom: 1;
  margin: 5px;
  padding: 3px 10px;
  font-size: 12px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  /*background: #869791;*/
  opacity: 0.5; }

.owl-prev {
  position: absolute;
  bottom: 50%;
  left: 1em; }

.owl-next {
  position: absolute;
  bottom: 50%;
  right: 1em; }

.owl-buttons div.background--light {
  background-color: green; }

.owl-buttons div.background--dark {
  background-color: red; }

.owl-buttons div.background--complex {
  background-color: blue; }

I've also checked the two selectors from the js backgroundcheck init: target and images. Both target the right elements:

Therefor I am a bit confused where to look for the error cuz on the code side everything looks basically correct in my eyes.

The sample project I've linked in my other issue is still online. But I could upload the one with three new images and the updated css I've pasted above if necessary.

Thanks in advance Ralf

[kennethcachia]

Hey Ralf, sorry for my late reply.

Can you upload the new example with 3 images so I can look into it? I'll test BackgroundCheck using those images.

Thanks!

[rpkoller]

Hi Kenneth, no problem at all. I've uploaded an example: https://dl.dropboxusercontent.com/u/8578/bkgrdCheck.zip

i've moved the previous button to the lower bottom that it is in the area of the white piano keys. the positioning and styling of the next and previous part as well as the definition of colors for backgroundcheck is after

/* Styling Next and Prev buttons */

within the scss file. Best regards r.

[jessekahner]

I seem to have a similar problem to this, using the owl-carousel.

after i click on the next and previous keys, it applies the class of the previous item

ie, if i have 3 slide items dark - white - dark

when i click on the navigation, i get: background--dark, background--dark, background--light

any chance i'm messing this up?

[kennethcachia]

The problem seems to be Owl Carousel's afterMove, which is being called as soon as the transition starts instead of when the transition ends. BackgroundCheck is still calculating the brightness based on the previous image.

Try this out:

afterMove: function() {
  setTimeout(function () {
    BackgroundCheck.refresh();
  }, 500);
}

The above waits for the transition to finish before it processes the images. It's not robust, as the timeout fires before the slider goes back to the first slide when you hit next on the last slide.

There might be a better way to do this in Owl Carousel, but I'm not sure yet as I've never used it before.

@jessekahner yep, it's related.

[rpkoller]

hi kenneth thanks for taking the time to look into the issue! i've tried your suggested workaround, but it seems backgroundcheck still isn't behaving reliable and consistently. the first load often fails to apply the necessary css style for the buttons:

after the switch to another slide it starts working. but it has still its troubles to keep up to the speed, especially in the case the user is skipping fast through the images. then it looks like it chokes and throws out more or less random assignments for the estimated background ( one out of three) after the transition has ended.

i've also increased your timeout length - but also hasn't really helped.

after you've mentioned that a wrong callback might be the cause of the issue and owlcarousel should better provide a hook after a transition has ended i've searched the owlcarousel github issue tracker. I've found one related issue:

https://github.com/OwlFonk/OwlCarousel/issues/79

it is linked to a diff with a callback which is basically already contained in owl carousel 1.3.2. ( afterGo [line 679])

best regards ralf

[kennethcachia]

It looks like that snippet still relies on afterMove and unfortunately timeouts are not as reliable as using callbacks so BackgroundCheck might end up out of sync.

Did you try using other alternatives, such as FlexSlider?

[rpkoller]

I've posted an issue over at the Owl Carousel issue tracker regarding the callback issue, but no reply yet.

Well i know and use Flexslider, but on my recent project i needed touch & grab capabilities, which Owl Carousel has and Flexslider not so i tried to get things going with the former :/

[kennethcachia]

:/ I'll close this issue for the time being, but please add a comment once you get a reply.

I will add an example that uses Owl Carousel once this callback issue is resolved.

[rpkoller]

Sure, will get back to you as soon as i have any news. Thanks!

[kennethcachia]

No problem!

[rpkoller]

Hi @kennethcachia been a while. I still haven't got any feedback from the dev on the Owl Carousel issue tracker. But i've stumbled upon the beta of Owl Carousel 2 http://www.owlgraphic.com/owlcarousel2/ and the callback list contains the following two events now:

'onAnimationStart'
'onAnimationEnd'

Doesn't look version 1 will get those two so i / we have to be a bit more patient but i guess then the troubles might be solved. just fyi ;) best regards r.

[kennethcachia]

That's awesome! Thanks for letting me know.