0

I've got a simple jQuery slick carousel that I want to use, however when initializing it it always defaults to a width of 7888 for no apparent reason. The HTML is as follows:

    <div class="card-slider col-sm-4"
        ng-if="ctrl.slides.length">
            <div ng-repeat="slide in ctrl.slides"
                class="event-card">

                //displaying the information

            </div>
    </div>

When initializing it from the console the width just skyrockets and starts messing up the DOM. The code I use is: 

$('.card-slider').slick({
                accesibility: false,
                autoplay: true,
                autoplaySpeed: 2500,
                arrows: false,
                infinite: true
            });

Is there something I'm missing? I've tried working with multiple carousels already (including ui.carousel that's specific for angular and owl) and they all seem to ignore the parent size and every other style that's been applied to the page up to that point.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Danyx
  • 574
  • 7
  • 34
  • It probably has something to do with css or event the resulting HTML. Can you create a fiddle? – muecas Jun 11 '18 at 18:01
  • Invoking jQuery plugins using class selectors doesn't work well with the AngularJS framework. AngularJS creates and destroys DOM and class selectors don't find yet to be created DOM. – georgeawg Jun 11 '18 at 18:44

0 Answers0