2017-02-16 3 views
0

Привет я новичок в ionic2, и я пытаюсь добавить сову карусель 2 от https://owlcarousel2.github.io/OwlCarousel2/ к моему ионному 2 приложения. Я включил требуемый css/js в приложение, и он успешно загрузился (никаких ошибок в консоли), но карусель не отображается, просто пустая белая страница без ошибок. Я пробовал ту же самую карусель на обычной странице html, и она отлично работает. вот мой код: -ionic 2 реализация сова карусели 2

<link rel="stylesheet" href="assets/css/owl.carousel.min.css"> 
 
<link rel="stylesheet" href="assets/css/owl.theme.min.css"> 
 

 
<ion-content padding class="category"> 
 
    <div class="row"> 
 
     <div class="large-12 columns"> 
 
      <div class="owl-carousel owl-theme"> 
 
       <div class="item active"> 
 
        <h4>1</h4> 
 
       </div> 
 
       <div class="item"> 
 
        <h4>2</h4> 
 
       </div> 
 
       <div class="item"> 
 
        <h4>3</h4> 
 
       </div> 
 
       <div class="item"> 
 
        <h4>4</h4> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</ion-content> 
 
<script src="assets/js/owl.carousel.min.js"></script> 
 
<script>$(document).ready(function() {$(".owl-carousel").owlCarousel();});</script>

Если карусель не совместимо с ionic2 есть какие-либо альтернативы для использования?

+0

вы можете использовать [ионные слайды] (https://ionicframework.com/docs/v2/api/components/slides/Slides/) –

+0

я попробовал их, они сложны, чтобы обращаться с карусели как для макета, так и для управления больше. –

+0

, возможно, проверьте [выполнение углового2] (https://www.npmjs.com/package/ng2-owl-carousel) –

ответ

0

Не думаю, что <script> бирка может использоваться в ионном виде 2, как и вы. (Кроме того, соляная карусель выполнена в JavaScript, но ионная 2 имеет машинопись.)

Говоря об альтернативах, вы можете проверить this от ионной документации 2. (Это может быть не идеальная альтернатива, но его можно использовать)

Смежные вопросы