Bloquée sur le code de "Slick"

**mediamimi** · 29/04/2016, 20h57

Bonjour a tous,Novice en langage javascript (en apprentissage de ce langage actuellement), je dois réaliser un diaporama . Je suis donc partie à la recherche sur le web et "Slick" (http://kenwheeler.github.io/slick/) me semblait être une alternative avec laquelle je pouvais m'en sortir. Et au secours ! Non, je n'arrive pas à faire fonctionner le slideshow. Dès les premières lignes de codes mises en place, la console m'indique une erreur (alors que je pensais avoir suivi l'exempl pas à pas). Qui peut m'aider à trouver une solution? D'avance, merci beaucoup. :-)Voici le résultat souhaité : images défilantes dans le bas de la page et au survol affichage de l'image en grand format Nom : JS_Code-01.png
Affichages : 326
Taille : 167,8 Ko

Et voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

        Diaporama slick                                            [IMG]http://www.developpez.net/forums/imgs/CN_accueil0001.png[/IMG]

**NoSmoking** · 02/05/2016, 10h28

Bonjour,

Dès les premières lignes de codes mises en place, la console m'indique une erreur ...

il aurait était intéressant que tu nous dises la nature de l'erreur, quant à ton code

Aurais tu une page test en ligne ?

**mediamimi** · 04/05/2016, 18h31

Bonjour NoSmoking,

Mille excuses je n'avais pas vu que je n'avais pas correctement copié-collé le code dont je parlais ! Quelle nouille, je fais !

Et le site est seulement en local pour le moment, une volonté du client...
Bon voici ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<!doctype html>
<html>
    <head>
    <title>Diaporama slick</title>
 
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
 
    <!--lien vers la feuille de style de slick, je ne comprends pas vraiment pourquoi je dois en avoir une seconde en plus de celle que je crée -->
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
 
    </head>
 
    <body>
    <section class="slide_accueil">
	<figure><img src="imgs/CN_accueil0001.png" alt=""/></figure>
	<figure><img src="imgs/CN_accueil0002.png" alt="" /></figure>
	<figure><img src="imgs/CN_accueil0003.png" alt="" /></figure>
	<figure><img src="imgs/CN_accueil0004.png" alt="" /></figure>
        <figure><img src="imgs/CN_accueil0005.png" alt="" /></figure>
       <!--au total 20 images-->
        </section><!--/.slide_accueil-->
 
 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
    <script type="text/javascript" src="script/script.js"></script>
    <script type="text/javascript" src="slick/slick.js"></script>
 
    <script>
	$ ( document ) . ready ( function ( ) {
  		$ ('.slide_accueil' ) . slick ( {
    		setting-name : setting-value
  			} ) ;
		} ) ;
    </script>
 
</body>
</html>

Je reçois un message d'erreur au niveau de la ligne : "setting-name : setting-value" qui est celui-ci : Uncaught SyntaxError: Unexpected token

J'espère que ma demande est plus compréhensible de cette manière.
Et d'avance, merci à tous pour vos réponses

**01001111** · 05/05/2016, 16h44

setting-name et setting-value sont des "placeholders", à savoir des noms génériques à remplacer par des clés/valeurs gérées par slick

Invité · 05/05/2016, 17h30

Bonjour,

si tu regardes bien les démos, ton cas ressemble à "Slider Syncing" :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="slider slider-for">
	<div><h3>1</h3></div>
	<div><h3>2</h3></div>
	<div><h3>3</h3></div>
	<div><h3>4</h3></div>
	<div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
	<div><h3>1</h3></div>
	<div><h3>2</h3></div>
	<div><h3>3</h3></div>
	<div><h3>4</h3></div>
	<div><h3>5</h3></div>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 $('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Bloquée sur le code de "Slick"

JavaScript

Discussions similaires

Partager

Partager