Как настроить Angular 2 с Cycle2 - не работает слайдер изображений

Я ничего не смог найти, так как по этой теме не очень много документации, особенно для Angular 2. Я создал ползунок без изображения вне angular 2, который работает, но когда я попытался реализовать его в своем проекте angular 2, я получаю "Loading...".

Код слайдера:

<div class="cycle-slideshow" 
data-cycle-fx="fade" 
data-cycle-timeout="10000" 
data-cycle-pause-on-hover="false" 
data-cycle-slides=">div">
<span class="cycle-prev">&#9001</span>
<span class="cycle-next">&#9002</span>
<span class="cycle-pager"></span>
<div class="frontend">
    <h2>My experience</h2>

</div>

HTML-код:

<head>
      <base href="/">
      <title>Test</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <!--Bootstrap-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous">
      <!--Font awesome icons-->
      <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type='text/css'>
      <!--Font-->
      <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
      <!--Loading page-->
      <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
      <!--script-->
      <script type="text/javascript" src="./assets/js/script.js"></script>
      <script type="text/javascript" src="./assets/js/jquery-3.2.1.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script type="text/javascript" src="./assets/js/jquery.cycle2.min.js"></script>
    </head>

Может ли это быть из-за версии jquery?

Источник

1 ответ

цикл2 Интеграция в угловой

Следующий ответ является примером того, как интегрировать простой бегунок cyc2 в angular, используя @angular/cli@1.0.2.

Демонстрация cycle2 с веб-страницы cycle2 (у меня нет опыта работы с cycle2).

cycle2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cycle2Demodefault</title>
</head>
<body>
<p>Default Slideshow from cycle2</p>
<div class="cycle-slideshow">
    <img src="http://malsup.github.io/images/p1.jpg">
    <img src="http://malsup.github.io/images/p2.jpg">
    <img src="http://malsup.github.io/images/p3.jpg">
    <img src="http://malsup.github.io/images/p4.jpg">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>

Настройте новый проект с помощью @ angular / cli и внесите следующие изменения:

app.component.ts название изменено

export class AppComponent {
  title = ' cycle2 works with ng!';

app.component.html div скопирован в файл

<h1>
  {{title}}
</h1>
<p>Default Slideshow from cycle2</p>
<div class="cycle-slideshow">
  <img src="http://malsup.github.io/images/p1.jpg">
  <img src="http://malsup.github.io/images/p2.jpg">
  <img src="http://malsup.github.io/images/p3.jpg">
  <img src="http://malsup.github.io/images/p4.jpg">
</div>

index.html добавлены теги скрипта для цикла

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ngcycle2demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>

Теперь начнем с ng serveот терминала и цикла демонстрация работает в угловом режиме.

цикл2 Интеграция выполнена.:-)

Описание использования bootstrap с angular - angular-cli и bootstrap 4

Номера Изображение-слайдер Пример

Чистый цикл2, пример не слайдера изображений с http://jquery.malsup.com/cycle2/demo/non-image.php

cycle2NonImageSlider.htlm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cycle2 Non Image Slider</title>

</head>
<body>
<div class="cycle-slideshow"
     data-cycle-fx="scrollHorz"
     data-cycle-timeout="2000"
     data-cycle-slides="> div"
>
    <div style="background:#fcc">
        <p>Lorem ipsum dolor ...
    </div>
    <div style="background:#cfc">
        <p>Lorem ipsum dolor ...
    </div>
    <div style="background:#ccf">
        <p>Lorem ipsum dolor ...
    </div>
</div>

<div class="cycle-slideshow"
     data-cycle-fx="fade"
     data-cycle-timeout="2000"
     data-cycle-slides="> div"
>
    <div>
        <p>Lorem ipsum dolor ...
    </div>
    <div>
        <p>Mel eu pertinax ...
    </div>
    <div>
        <p>Utinam electram pertinacia ...
    </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html

app.component.html для не-слайдер-изображений

<h1>
  {{title}}
</h1>
<p>Default Slideshow from cycle2</p>

<!--non Image Slider Demo-->
<div class="cycle-slideshow"
     data-cycle-fx="scrollHorz"
     data-cycle-timeout="2000"
     data-cycle-slides="> div"
>
  <div style="background:#fcc">
    <p>Lorem ipsum dolor ...
  </div>
  <div style="background:#cfc">
    <p>Lorem ipsum dolor ...
  </div>
  <div style="background:#ccf">
    <p>Lorem ipsum dolor ...
  </div>
</div>


<div class="cycle-slideshow"
     data-cycle-fx="fade"
     data-cycle-timeout="2000"
     data-cycle-slides="> div"
>
  <div>
    <p>Lorem ipsum dolor ...
  </div>
  <div>
    <p>Mel eu pertinax ...
  </div>
  <div>
    <p>Utinam electram pertinacia ...
  </div>

Работа с Cycle2 для работы слайдеров без изображений:-)

Источник
Другие вопросы по тегам