Owlcarousel2: Cannot read property 'replace' of undefined Line 513

[escobar022]

Getting an error when running all inits.
'Cannot read property 'replace' of undefined Line 513'
Reverted back to previous version and it works.

Using:

 $("#slider").owlCarousel({
                    loop: true,
                    autoplay: true,
                    autoplayHoverPause: false,
                    autoplaySpeed: 3000,
                    animateOut: 'fadeOut',
                    animateIn: 'fadeIn',
                    items: 1,
                    dots: false
                });

but also fails:

 $("#slider").owlCarousel();

<div id="slider">
   <div class="slide" style="background-image:url(<?php echo $image1[0]; ?>);"></div>
   <div class="slide" style="background-image:url(<?php echo $image2[0]; ?>);"></div>
   <div class="slide" style="background-image:url(<?php echo $image3[0]; ?>);"></div>
   <div class="slide" style="background-image:url(<?php echo $image4[0]; ?>);"></div>
</div>

Any ideas?

if (settings.responsiveClass) {
    this.$element.attr('class',
    this.$element.attr('class').replace(new RegExp('(' + this.options.responsiveClass + '-)\\S+\\s', 'g'), '$1' + match)
    );
}

[greg5green]

What does your markup look like? And the JS used to invoke the plugin?

[escobar022]

updated the question, sorry about that

[greg5green]

This was with beta-3, right?

[escobar022]

Yes, on master, installed via bower

[greg5green]

The problem here is that there is no class attribute on on your <div id="slider">. To fix this problem immediately, add a class attribute and you won't get the error anymore. On another note, have you added the CSS from owl.carousel.css to your own CSS files and substituted #slider for .owl-carousel? You will need that CSS or some similar CSS for the carousel to behave properly.

I'm going to mark this issue as a bug because not having the class attribute shouldn't cause an error. Test case: http://codepen.io/anon/pen/LVKEqw

[leecollings]

I'm not sure this is because there's no class, as when I add a class this error is still being procedure.

Oddly enough, I'm sure it just happened to occur without even changing anything.. but I can't prove that.

But for the record, I'm using the latest version (2.2.0), and as far as I know, all the sliders I'm using on the page are assigned to classes, not ID

[janxalot]

I'm having the same issue.. When I declare two carousels with seperate ID's they combine into one. :S

[livacengiz]

You can do this

<div id="slider"  class="owl-carousel owl-theme">
   <div class="slide" style="background-image:url(<?php echo $image1[0]; ?>);"></div>
   <div class="slide" style="background-image:url(<?php echo $image2[0]; ?>);"></div>
   <div class="slide" style="background-image:url(<?php echo $image3[0]; ?>);"></div>
   <div class="slide" style="background-image:url(<?php echo $image4[0]; ?>);"></div>
</div>

[lucasrafaelleite]

Add the class: "class="owl-carousel"