Insertion de javascript dans html (slide)

Version imprimable

Bonjour,

je suis débutante en JavaAcript, je veux inserer un code javascript dans une page html.

j'ai fais comme ca mais n'est pas fonctionnel.

Voila mon 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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/eventList_style.css">
</head>
<body>
<script>
	$(document).ready(function(){
		$('.slider8').bxSlider({
			mode: 'vertical',
			slideWidth: 300,
			minSlides: 2,
			slideMargin: 10
		  });
		});
	</script>
	<div class="slider8">
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar1"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar2"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar3"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar4"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar5"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar6"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar7"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar8"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar9"></div>
	  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar10"></div>
	</div>
</body>
</html>

la source de code est http://bxslider.com/examples/carousel-demystified

02/06/2015, 13h14
Bovino

Tu utilises des fonctions jQuery mais tu n'as pas intégré jQuery dans ta page, c'est un peu comme si tu achetais du carburant alors que t'as pas de voiture et que tu te demandais pourquoi tu n'arrives pas à conduire...

:faq: Comment installer la bibliothèque jQuery ?

Voila j'ai ajouté les librairies de bootstrap et celle de jquery mais malgré ça le code est toujours non fonctionnels:

Vous trouvez ci-dessous mon 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
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<script>
		$(document).ready(function(){
		  $('.slider8').bxSlider({
			mode: 'vertical',
			slideWidth: 300,
			minSlides: 2,
			slideMargin: 10
		  });
		});
	</script>
</head>
<body>
 
<div class="slider8">
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar1"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar2"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar3"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar4"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar5"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar6"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar7"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar8"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar9"></div>
  <div class="slide"><img src="http://placehold.it/300x100&text=FooBar10"></div>
</div>
 
</body>
</html>

12/06/2015, 16h24
LuluHow

Peut-être que tu devrais télecharger bxSlider et l'inclure non? :oops:
12/06/2015, 16h58
SpaceFrog

Ton slider est un plugin jquery ... si tu le charges pas il ne risque pas de fonctionner
Sur le fiddle ci dessous il est chargé depuis un cdn ... (cf external ressources)
http://jsfiddle.net/ex7pbtha/