javascript - Slick.js not working with Polymer 2.0 -
i try make own component slick.js library seems not working polymer 2.0
i have no error in debug console , nothing appear on browser
here's code :
<template> <link rel="stylesheet" href="../vendors/slick-1.6.0/slick/slick.css"> <link rel="stylesheet" href="../vendors/slick-1.6.0/slick/slick-theme.css"> <div id="slidernews"> <div><img src="../images/background_baseline.jpeg"></div> <div><img src="../images/background_baseline.jpeg"></div> <div><img src="../images/background_baseline.jpeg"></div> <div><img src="../images/background_baseline.jpeg"></div> <div><img src="../images/background_baseline.jpeg"></div> </div> </template> <script> class workadvisormodulenews extends polymer.element { static is() { return 'workadvisor-module-news'; } static properties() { return { placeholderimg: { type: string, observer: '_placeholderimgchanged' } }} constructor() { super(); } ready() { super.ready(); } connectedcallback() { super.connectedcallback(); $(this.$.slidernews).slick({ infinite: true, arrows: true, dots: true, slidestoshow: 1 }); } } customelements.define(workadvisormodulenews.is, workadvisormodulenews); </script> <script src="../vendors/jquery-3.1.1.min.js"></script> <script src="../vendors/slick-1.6.0/slick/slick.js"></script> i've tried move .js files imported index.html nothing more. same .css files.
using external stylesheets has been deprecated in polymer 2. alternative , preferred way share styles style modules.if want learn more style modules click here.
basically, create style module, need wrap style block in <dom-module> , <template> elements, this:
<dom-module id="my-style"> <template> <style> <!-- styles share go here! --> </style> </template> </dom-module> when create element use styles, import style module , include in opening tag of style block:
<link rel="import" href="my-style.html"> <dom-module id="my-element"> <template> <style include="my-style"> <!-- additional styles go here --> </style> <!-- rest of element template goes here --> </template> </dom-module> demo using slick.js library: http://plnkr.co/edit/pp1uiuicnp4ufzajzfzb?p=preview
Comments
Post a Comment