jquery - Carousel not working in ractive template -
home/index.ract
<div class="row owl-carousel owl-theme row"> {{#featured}} <div class="column small-12 medium-6 large-3 pan item"> <a href="{{ link }}"> <div class="griditem boxshadow"> <div class="item-content"> <h1 class="title">{{ title }}</h1> <p class="byline">by {{ subtitle }}</p> </div> </div> </a> </div> {{/featured}} </div> layout/index.ract
<!doctype html> <head> <link rel="stylesheet" href="/owl.carousel/owl-carousel/owl.theme.css"> </head> <body> <main> <cromly:content /> /***ractive component**/ </main> <script type="text/javascript" src="/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/bootstrap.min.js"></script> <script type="text/javascript" src="/owl.carousel/owl-carousel/owl.carousel.js"></script> <script type="text/javascript"> jquery(document).ready(function($){ var owl = $('#handpicks'); owl.owlcarousel({ itemscustom : [ [450, 1], [600, 2], [1024, 3], [1200, 4] ], navigation : true }); </script> </body> </html> all ractive templates on nodejs. somehow owl carousel or slickjs not working should. doesn't show 4 items per slide. instead, showed full number of items in list (non-working carousel) or items disappeared - showed blank. not possible use jquery plugin in ractive template @ all?
updated
according @martypdx
i tried:
var main = ractive.extend({ el: 'main' }) app = new main() app.on({ 'onrender': function(){ var owl = $('#handpicks'); owl.owlcarousel({ itemscustom : [ [450, 1], [600, 2], [1024, 3], [1200, 4] ], navigation : true }); } }) it still not showing carousel slide - in other word, blank
try moving jquery code ractive onrender:
edit: put ractive function
var main = ractive.extend({ el: 'main', onrender: function(){ var owl = $('#handpicks'); owl.owlcarousel({ itemscustom : [ [450, 1], [600, 2], [1024, 3], [1200, 4] ], navigation : true }); } }; or use name if want use on method:
app.on( 'render', function(){ var owl = //etc... });
Comments
Post a Comment