Insertion de javascript dans html (slide)

**fidbell84** · 02/06/2015, 12h01

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 :

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

**Bovino** · 02/06/2015, 13h14

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

Comment installer la bibliothèque jQuery ?

**fidbell84** · 12/06/2015, 13h04

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 :

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

**LuluHow** · 12/06/2015, 16h24

Peut-être que tu devrais télecharger bxSlider et l'inclure non?

**SpaceFrog** · 12/06/2015, 16h58

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/

Insertion de javascript dans html (slide)

jQuery

Discussions similaires

Partager

Partager