0

i am using a slick slider for my project. when I login to the application all the items come on the page along with the arrows. The carousel comes only after I refresh the page.

$(".best-sellers").not('.slick-initialized').slick({
            dots: false,
            infinite: false,
            speed: 300,
            slidesToShow: 5,
            slidesToScroll: 5,
            prevArrow: '<button type="button" class="btn-default slick-prev recentlyViewedControls"><i class="fa fa-2x fa-chevron-left" aria-hidden="true"></i></button>',
            nextArrow: '<button type="button" class="btn-default slick-next recentlyViewedControls"><i class="fa fa-2x fa-chevron-right" aria-hidden="true"></i></button>'
        });
    }

The html part :

<div class="row recently-viewed-items" data-bind="foreach: cart.recentlyViewed()">
     <div class="item col-sm-2 col-xs-6">
          <a href="">

          </a>
     </div>
</div>

The foreach repeats the elements. The items come through ajax call.

Shubham Goyal
  • 617
  • 1
  • 7
  • 18
  • The `.not` function returns all elements that doesn't match to the query, but it is immediate. If you intend to wait until the css class `.slick-initialized` is added to your HTML then you should use an Observer-like approach. See this: https://stackoverflow.com/questions/5525071/how-to-wait-until-an-element-exists. – Flavio Cysne Jul 03 '17 at 13:52

1 Answers1

0

This error may have a relation with the execution order, you can only run the first block when the second finish.

But can you post some functional example?

Bruno Costa
  • 78
  • 9
  • Sorry I cannot..its not pure html and uses frameworks and all. The execution order is fine. I put breakpoints and checked. – Shubham Goyal Jul 03 '17 at 13:43
  • I created a example in fiddle and every thing works see in [link](https://jsfiddle.net/brunoracosta/yu3qtvuu/5/) – Bruno Costa Jul 03 '17 at 14:19