Я пытаюсь использовать сова-карусель с Telescope, но я не могу заставить его работать. На данный момент у меня нет динамических данных. Ниже приведены шаги, которые я выполнил.Telescope Owl Carousel
- Создать пакет телескопа.
- Добавлена тема Zeiss.
- Добавить owl-carousel package
Затем на пользовательском профиле, где приложение телескоп показывает список сообщений пользователю понравился в табличном формате, я хочу, чтобы отобразить его в виде карусели с изображениями. (Обратите внимание, что это конечная цель, на данный момент я просто пытаюсь получить основную функциональность совы-карусели)
Ниже приведены шаги, которые я предпринял.
На шаблоне User_Profile я добавил новый шаблон carousel
<template name="carousel">
<div class="user-profile-votes grid grid-module">
<div id="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
</div>
</template>
После того, что делается, я добавил файл JS поддерживает шаблон, как показано ниже.
Template.carousel.rendered = function() {
Meteor.setTimeout(function() {
var owl = $('#owl-carousel');
owl.owlCarousel({
navigation : true,
loop: true,
autoplay: 1000,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
mouseDrag: true,
touchDrag: true,
afterInit : function(elem){
var that = this
that.owlControls.prependTo(elem)
}
});
}, 0)
}
С этим работает карусель, он показывает мне 10 различных элементов, как вы можете видеть в приведенном ниже видео. Даже автовоспроизведение работает, однако кнопки или точки нет. Я пробовал разные игры и ссылался на многие статьи, которые изменили тайм-аут, добавили автозапуск и т. Д. Однако это статический список.
Не знаете, почему это не работает, любая помощь будет отличной.
(видео закрыто). Что вы подразумеваете под кнопками и точками? –
Извините, изменено видео на «незарегистрированный» - вы должны иметь доступ к нему сейчас. – Abhay