Question

我找不到任何东西，因为关于这个主题没有很多文档，特别是对于Angular 2.我在角度2之外创建了一个非图像滑块，但是当我尝试在我的angular 2项目中实现它时我得到“正在加载......”。

滑块代码：

<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版本？

Answer 1

cycle2以Angular集成

以下答案是如何使用@ angular / cli @ 1.0.2

将简单的cycle2滑块集成到角度中的示例

cycle2 demo来自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，循环演示以角度运行。

cycle2集成完成。： - ）

使用带有角度的bootstrap的描述是 angular-cli and bootstrap 4

<强>非镜像滑块实施例

来自http://jquery.malsup.com/cycle2/demo/non-image.php

的cycle2 pure非图像滑块示例

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集成工作： - ）

如何使用Cycle2设置Angular 2 - 非图像滑块不起作用

1 个答案: