Comment faire pour configurer Angular 2 avec Cycle2 - curseur non image ne fonctionne pas

Je n'ai rien trouvé car il n'y a pas beaucoup de documentation sur ce sujet, en particulier pour Angular 2. J'ai créé un curseur non image en dehors de l'angle 2 qui fonctionne , mais quand j'ai essayé de l'implémenter dans mon projet angulaire 2, j'ai "Chargement ...".Comment faire pour configurer Angular 2 avec Cycle2 - curseur non image ne fonctionne pas

Code du curseur:

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

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

Serait-ce à cause de la version jquery?

Source

2017-05-06 HTT

cycle2 Intégration dans angulaire

La réponse suivante est un exemple comment intégrer simple curseur cycle2 en utilisant angulaire @ angulaire/cli @ 1.0.2

cycle2 démo est de la page Web cycle2 (I n'avoir aucune expérience avec 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>

Configuration nouveau projet avec @ angulaire/cli et faire les modifications suivantes:

app.component.ts titre changé

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

app.component.html div copié dans le fichier

<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 balises de script pour le cycle ajouté

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

Maintenant commencer par ng serve de démonstration du terminal et le cycle est en cours d'exécution dans angulaire.

cycle2 Intégration terminée. :-)

Une description à utiliser avec bootstrap angulaire est angular-cli and bootstrap 4

hors image-curseur-Exemple

cycle2 pur exemple non curseur sur l'image à partir de 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 pour les non-curseur-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>

d'intégration cycle2 pour curseurs non-image fonctionne :-)

Source

2017-05-07 17:56:43 Marc

Merci pour votre réponse!Bien que cela fonctionne pour les images, j'obtiens une erreur de syntaxe pour les curseurs non image: " _ Caractère inattendu" <"(" data-cycle-slides = "> div" > _ " La chose étrange est qu'il fait travailler à l'extérieur d'Angular – HTT

Il fonctionne également avec les curseurs sans image avec data-cycle-slides = "> div" Je vais publier un exemple de non-image-slider dans ma réponse. – Marc

Comment faire pour configurer Angular 2 avec Cycle2 - curseur non image ne fonctionne pas

Répondre

Questions connexes