0

I've been struggling to set my awesome jQuery carousel into a lightning component but it doesn't seem to work. Instead i'm having an error from the lightning component debug tool :

myComponent.cmp :

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global" >

 <ltng:require 
styles="/resource/recruiting/slick/slick.css,/resource/recruiting/slick/slick-theme.css"    
              scripts="/resource/recruiting/jquery/jquery.js,/resource/recruiting/slick/slick.min.js"
    afterScriptsLoaded="{!c.doInit}"/>

 <div class="carousel">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>

</aura:component>

myComponentController.js

({
  doInit: function (cmp, evt) {

   $('.carousel').slick();

  }
})

Error from Lighning PLatform

Uncaught Action failed: ns:myComponent$controller$doInit ['get' on proxy: property 'jQuery2140363857389167290932' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '3' but got 'undefined')]

I don't figure out why i'm actually getting this error as i've followed miticulously the documention requirements.

Thank you very much for your help to make my awesome carousel work!

  • 2
    In general, jQuery should be avoided if at all possible for use in Lightning components because of the way they play with the DOM. Their best use with components is probably with table components. Also, not all versions of jQuery are compatible with Lightning. See salesforce.stackexchange.com/questions/162225/…. – crmprogdev Jul 9 '18 at 10:42
  • For what it's worth, there is now a standard lightning:carousel component: developer.salesforce.com/docs/component-library/bundle/… – Charles T Jul 9 '18 at 11:59
  • If you want a carousel you can customize yourself a bit more, Appiphony has a free open source Lightning Strike component. If the configuration options available don't fully meet your use case, you can modify the code directly. lightningstrike.io/#!/strikeCarousel – Charles T Jul 9 '18 at 12:01
  • 1
    @CharlesT thanks a lot! This Strike components will do the trick! – Bryce Jul 9 '18 at 13:13
  • @crmprogdev thanks for the info, i'll keep that in mind! – Bryce Jul 9 '18 at 13:17
3

In general, Lightning LockerService makes it difficult for sophisticated JS libraries to modify the DOM directly. The Lightning team does work hard to ensure specific libraries are compatible but they can't guarantee all of them. So I'd lean towards starting with a Lightning-first solution.

There is a standard lightning:carousel component if you want something off-the-shelf: https://developer.salesforce.com/docs/component-library/bundle/lightning:carousel/specification

If you need more customizability, Appiphony has a free open source Lightning Strike component. If the configuration options available don't fully meet your use case, you can modify the code/CSS/etc directly: http://www.lightningstrike.io/#!/strikeCarousel

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.