How to setup Angular 2 with Cycle2 - non image slider not working

Question

How to setup Angular 2 with Cycle2 - non image slider not working

529 Views Asked by AudioBubble At 06 May 2017 at 19:43

I couldn't find anything since there's not a lot of documentation on this topic, especially for Angular 2. I have created a non image slider outside angular 2 that works, but when I tried to implement it in my angular 2 project I get "Loading...".

Slider Code:

<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 code:

<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>

Could it be because of the jquery version?

Original Q&A

There are 1 best solutions below

**Marc** · Answer 1 · 2017-05-07T17:56:43.007000

cycle2 Integration in Angular

The following answer is an example how to integrate a simple cycle2 slider into angular using @angular/[email protected]

cycle2 demo is from cycle2 webpage (I have no experience with 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>

Setup new project with @angular/cli and do the following changes:

app.component.ts title changed

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

app.component.html div copied into file

<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 script tags for cycle added

<!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>

Now start with ng servefrom terminal and cycle demo is running in angular.

cycle2 Integration done. :-)

A description to use bootstrap with angular is angular-cli and bootstrap 4

Non-Image-slider-Example

cycle2 pure Non image slider example from 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 for non-slider-images

<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 integration for non-image sliders work :-)

How to setup Angular 2 with Cycle2 - non image slider not working

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in ANGULAR

Related Questions in TYPESCRIPT

Related Questions in CYCLE2

Trending Questions

Popular # Hahtags

Popular Questions