Bloquée sur le code de "Slick"

Version imprimable

29/04/2016, 20h57
mediamimi

1 pièce(s) jointe(s)

Bloquée sur le code de "Slick"

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 formatPièce jointe 208330Et voici mon code :

Code:

Diaporama slick [IMG]http://www.developpez.net/forums/imgs/CN_accueil0001.png[/IMG] http://www.developpez.net/forums/img...ccueil0002.png http://www.developpez.net/forums/img...ccueil0003.png http://www.developpez.net/forums/img...ccueil0004.png http://www.developpez.net/forums/img...ccueil0005.png http://www.developpez.net/forums/img...ccueil0006.png http://www.developpez.net/forums/img...ccueil0007.png http://www.developpez.net/forums/img...ccueil0008.png http://www.developpez.net/forums/img...ccueil0009.png http://www.developpez.net/forums/img...ccueil0010.png http://www.developpez.net/forums/img...ccueil0011.png http://www.developpez.net/forums/img...ccueil0012.png http://www.developpez.net/forums/img...ccueil0013.png http://www.developpez.net/forums/img...ccueil0014.png http://www.developpez.net/forums/img...ccueil0015.png http://www.developpez.net/forums/img...ccueil0016.png http://www.developpez.net/forums/img...ccueil0017.png http://www.developpez.net/forums/img...ccueil0018.png http://www.developpez.net/forums/img...ccueil0019.png http://www.developpez.net/forums/img...ccueil0020.png
02/05/2016, 10h28
NoSmoking

Bonjour,

Citation:

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

Aurais tu une page test en ligne ?

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 ! :lol:
Et le site est seulement en local pour le moment, une volonté du client...
Bon voici ce code :

Code:

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

05/05/2016, 16h44
01001111

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

Bonjour,

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

Code:

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:

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
});