Is there a way that you can use Slick-Carousel with Polymer.js?

Question

I have tried to add the slick slider to my polymer element placing the required dependencies in the main HTML file and adding them inside of the script tag of the polymer element. Either scenario renders the slider to break. I am not able to see new tags generated for the slideshow elements (img tags, etc) inside my DOM. I have however had this slideshow work outside of polymer. Is polymer really only for the customizing of html/css elements without using third party JavaScript files?

Main HTML:

<html>
 <head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css"/>
    <link rel="import" href="intro-slider.html">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js">    </script>
   <script src="main.js"></script>
</head>
<body>
  <intro-slider></intro-slider>
  </body>
  </html>

JS:

$(document).ready(function(){
   $('#slideshow').slick();
 });

Polymer Element:

<link rel="import"
  href="bower_components/polymer/polymer.html">

<link rel="import"
  href="bower_components/polymer/polymer.html">
<link rel="import">

<dom-module id="intro-slider">

  <template>
<!-- scoped CSS for this element -->
<div>

<div class="banner-img">
  <div class="banner-pattern">
  <div class="container" id="intro">
    <h2 class="text-center" style="font-size:44px; ">WELCOME TO SOMETHING HERE</h2>
    <p class='intro__text'> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur saepe placeat quam sequi cum perspiciatis, quasi! Quidem quas sed, porro aliquid molestiae, magni facere tempora fugiat dolorum, minima non voluptatum.</p>

  <div id="slideshow">
    <div><a href="/"   rel="group" class="fancybox"> <img src="http://placehold.it/150x150" height="150" alt=""></a></div>
    <div><a href="/"  rel="group"  class="fancybox"> <img src="http://placehold.it/150x150" height="150" alt=""></a></div>
    <div><a href="/"  rel="group" class="fancybox"> <img src="http://placehold.it/150x150" height="150" alt=""></a></div>
  </div>
  </div>
</div>
   </div>
  <content></content>
</div>
  </template>
   <script>
     Polymer({ is: "intro-slider" });
  </script>
</dom-module>

Answer 1

#slideshow is only accessible with that selector inside the shadow dom root created by intro-slider , when an custom element is created via the Polymer function it has a nice $ property which holds references to elements by id therefore when the polymer element is ready you can do the following

Polymer({ 
  is: 'intro-slider',

  ready: function () {
    var el = this.$.slideshow
    $(el).slick()
  }
})

Let me know if it works please :)

Is there a way that you can use Slick-Carousel with Polymer.js?

Question

1 answers

solution1
1 2015-10-16 17:45:52

Is there a way that you can use Slick-Carousel with Polymer.js?

Question

1 answers

solution1 1 2015-10-16 17:45:52

solution1
1 2015-10-16 17:45:52