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 are on NodeJs. Somehow owl carousel or slickjs is not working as it should. It doesn't show 4 items per slide. Instead, it showed the full number of items in a list (non-working carousel) or items disappeared - showed blank. Is it not possible to use jquery plugin in ractive template at all?
Updated
According to @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 is still not showing the carousel slide - in other word, it is blank
Try moving your jquery code into the ractive onrender:
EDIT: put as ractive function
Or use the name if you want to use
onmethod: