Sujet Précédent Sujet Suivant

Comment inserer de la musique dans un carousel (image slider)

Fermé
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014 - 18 août 2014 à 14:23
Ysabe_l Messages postés 12449 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 18 avril 2024 - 22 août 2014 à 19:52
Bonsoir,
Je veux faire un site web avec bootstrap , html5 et css.j'ai reussi enfin à faire le carousel (image slider) .je veux bien maintenant integrer de la musique pour chaque image du carousel . J'ai essayé mais malheureusement je n'arrive pas à le faire.
voici mon code source :

<! doctype html>
<html lang="fr">
<head>
<style>
.carousel-page
{
width:100%;
height:100%;
background-color:#5f666d;
color:white;
}
</style>
<title> mon page html </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<div id="my_carousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- Bulles -->
<ol class="carousel-indicators">
<li data-target="#my_carousel" data-slide-to="0" class="active"></li>
<li data-target="#my_carousel" data-slide-to="1"></li>
<li data-target="#my_carousel" data-slide-to="2"></li>
<li data-target="#my_carousel" data-slide-to="3"></li>
<li data-target="#my_carousel" data-slide-to="4"></li>
<li data-target="#my_carousel" data-slide-to="5"></li>
<li data-target="#my_carousel" data-slide-to="6"></li>
<li data-target="#my_carousel" data-slide-to="7"></li>
<li data-target="#my_carousel" data-slide-to="8"></li>
<li data-target="#my_carousel" data-slide-to="9"></li>
<li data-target="#my_carousel" data-slide-to="10"></li>
<li data-target="#my_carousel" data-slide-to="11"></li>
</ol>
<!-- Slides -->
<div class="carousel-inner">
<!-- Page 0 -->
<div class="item active">
<div class="carousel-page">
<img src="les images/123.jpg" class="img-responsive" style="margin:0px auto;" /> </div>

</div>
<!-- Page 1 -->
<div class="item ">
<div class="carousel-page">
<img src="les images/10511078_841195842559103_1519797031118599169_n.jpg" class="img-responsive" style="margin:0px auto;" /> </div>
<div class="carousel-caption"> <h3>Il était un brave homme riche <br/> il épousa une veuve qui avait deux filles </h3></div>
</div>
<!-- Page 2 -->
<div class="item ">
<div class="carousel-page">
<img src="les images/10460539_841196672559020_6920501587030261155_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;" /> </div>
<div class="carousel-caption"> <h3>Mais hélas, le brave homme mourut peu après <br/> et tout changea pour la fillette </h3></div>
</div>
<!-- Page 3 -->
<div class="item">
<div class="carousel-page">
<img src="les images/images (2) - Copie.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> après la mort de hélas, la méchante femme traite<br/> Cendrillon plus mal encore comme une bonne </h3></div>
</div>

<!-- Page 4 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10537345_841200182558669_1958041722930231222_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> Un jour , le roi d'un château voisin veut que son fils <br/>se marier .il a invité toutes les jolies princesses </h3></div>
</div>
<!-- Page 5 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10408564_841200569225297_6042292299157114678_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> cendrillon reste toute seule et malheureuse</h3></div>
</div>
<!-- Page 6 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10532338_841201322558555_5285318914056044872_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> Grâce aux faits magiques de la fée , <br/>, l'élégante princesse peut aller à la fête </h3></div>
</div>
<!-- Page 7 -->
<div class="item">
<div class="carousel-page">
<img src="les images/robe-princesse-cendrillon.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>La musique commença <br/>et le Prince l'invita à danser </h3></div>
</div>
<!-- Page 8 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10553618_841205345891486_1476414944489674851_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3> Tout à coup, Cendrillon entendit l'horloge, elle est sortie de la <br/> salle sans s'apercevoir qu'elle perdait une de ses pantoufles</h3></div>
</div>
<!-- Page 9 -->
<div class="item">
<div class="carousel-page">
<img src="les images/cendrillon_006 (1).jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>un serviteur trouva la pantoufle perdue et l'apporta au Prince.Son <br/> père a donné l'ordre de faire essayer la pantoufle à toutes les filles</h3></div>
</div>
<!-- Page 10 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10517950_841210035891017_2017303040199092399_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>Au hasard ,le Prince arriva à la demeure de Cendrillon <br/> et sa pied fait concorder l' une de ses pantoufles, </h3></div>
</div>
<!-- Page 11 -->
<div class="item">
<div class="carousel-page">
<img src="les images/10450147_841214259223928_206333842716636581_n.jpg" class="img-responsive img-rounded"
style="margin:0px auto;max-height:100%;" /> </div>
<div class="carousel-caption"> <h3>Le Prince la demanda en mariage <br/>et ils vécurent une longue vie de bonheur. </h3></div>
</div>

</div>
<!-- Contrôles -->
<a class="left carousel-control" href="#my_carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#my_carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>
</html>


Est ce que vous pouvez m'aider ?
merci d'avance
A voir également:

13 réponses

Réponse 1 / 13
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
18 août 2014 à 14:26 
<audio autoplay  width="500" loop preload="metadata">
			<object type="application/x-shockwave-flash"
			data="index/dewplayer/dewplayer-multi.swf" width="400" height="25"
			id="dewplayer" name="dewplayer">
			<param name="wmode" value="transparent" />
			<param name="movie value="dewplayer-multi.swf" />
			<param name="flashvars" value="mp3=1.mp3|2.mp3|3.mp3&autostart=1&autoreplay=1&showtime=1&randomplay=1"/>
			</object>
			<source src="index/1.mp3"> </source>
			<source src="index/1.ogg"> </source>
			Veuillez mettre a jour votre navigateur
		</audio>
0
Réponse 2 / 13
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
18 août 2014 à 15:00
Est ce qu'il ya quelq'un qui peut m'aider ?
0
Réponse 3 / 13
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
Modifié par mr_demonicon le 18/08/2014 à 15:17
oui mais tu peux mettre un son diffferent et mettre un timer ou l'eteindre des que l'on change de slider
0
Réponse 4 / 13
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
18 août 2014 à 16:43
je ne sais pas comment mettre un timer ou eteindre lors du changement de slide
Est ce que tu peux me donner un tuto ou bien le code necessaire ?
svp c'est urgent
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 13
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
18 août 2014 à 17:38
pouvez vous m'aider
0
Réponse 6 / 13
Utilisateur anonyme
18 août 2014 à 18:18
Salut,

ton slider utilise jquery (il me semnle non ?)

tu peux aisément ajouté une musique pour chaque image. Le problème est que si c'est pas pour un site de musicien ou autres....ben c'est extrêmement agaçant !!!

L'idéal serait de voir comment fonctionne ton code jquery !!!

un exemple fait à l'arrache :

http://bencesticiquetudoiscliquer.bl.ee/angel_jeroumi/

bye

0
Utilisateur anonyme
18 août 2014 à 18:19
chrome et firefox == ok les autres je sais pas :)
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
18 août 2014 à 19:48
merci pour votre aide mais ça ne marche pas
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
18 août 2014 à 19:52
je veux bien partir de mon code et continuer (inserer audio pour chaque image)
0
Utilisateur anonyme
18 août 2014 à 20:16
merci pour votre aide mais ça ne marche pas

sa fonctionne pas sur ton site ? Ou c'est le lien que j'ai envoyé ? Chez moi sa fonctionne !!! Quel navigateur utilise tu ?
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
18 août 2014 à 20:54
envoie ton js et on va t'aider a le refaire avec ton audio
0
Réponse 7 / 13
Utilisateur anonyme
19 août 2014 à 15:21
salut,

apparemment de bootstrap.js n'est pas complet....

trouve le moyen de le donner complet :)
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
19 août 2014 à 15:22
je l'ai tkt (c'est le meme que celui sur le site
0
Utilisateur anonyme
19 août 2014 à 15:30
ok
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
19 août 2014 à 15:55
comment faire mnt ?
0
Utilisateur anonyme
19 août 2014 à 16:02
ben...le lien ou tu as télécharger le script, ou alors le lien de ton site...google doc...we transfert , dropbox...bref

ensuite je dis ca, je sais pas si c'est facilement modifiable. De plus, si je passe plus de 30 minutes je laisse tomber :)

a toute
0
Utilisateur anonyme
Modifié par lobotoFix le 19/08/2014 à 16:04
.

le mieux est le lien de ton site
0
Réponse 8 / 13
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
19 août 2014 à 19:00
pouvez vous m'aider
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
19 août 2014 à 21:34
bon reprenons a zero tu as fait un carrousel en html qui fonctionne et tu as utilise bootstrap un script prefait (l'as tu modifier?) pour l'animer il faut donc mnt que tu rajoute un autre script pour ajouter la musique a chaque slide en autoplay il faut juste se servir de la class (tu pourrais meme le faire en html en ajoutant mon code a chaque slide differente)
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
19 août 2014 à 21:35
le jquery et le bootstrap sont des script prefait par google et twitterr
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
20 août 2014 à 02:05
bonsoir,
j'ai mis votre code a chaque slide mais le problem est que tout les sons fonctionnent en meme temps et je veux que pour chaque slide fonctionne une seule musique
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
20 août 2014 à 21:59
dsl pour le retard mais tu m'a pas compris il faut apres que tu fasse un js qui dise que ce son doit s'arreter des que j'appuis sur precedent ou suivant apres moi j'aurais utiliser le code prefourni par lobotfix et j'aurais marque en resolu cela n'est pas tres dur 
$(function() {
	var cpt = 0;
	$('.son')[cpt].play();
	function mooveLeft() {
		$('.son')[cpt].pause();
		cpt--;
		cpt = cpt < 0 ? 3 : cpt;
		cpt = cpt > 3 ? 0 : cpt;
		$("#slide ul").animate({
			marginLeft : -960
		}, 800, function() {
			$(this).css({
				marginLeft : 0
			}).find("li:last").after($(this).find("li:first"));
		})
		$('.son')[cpt].play();
	}

	function mooveRight() {
		$('.son')[cpt].pause();
		cpt++;
		cpt = cpt < 0 ? 3 : cpt;
		cpt = cpt > 3 ? 0 : cpt;
		$("#slide ul").animate({
			marginLeft : +960
		}, 800, function() {
			$(this).css({
				marginLeft : 0
			}).find("li:first").before($(this).find("li:last"));
		})
		$('.son')[cpt].play();
	}


	$('#prev').click(mooveLeft);
	$('#next').click(mooveRight);

});
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
20 août 2014 à 22:47
pas grave pour le retard ;)
mais ou faut il mettre ce code ?
je l'ai mis dans mon code html et c'est le meme problème
0
Réponse 9 / 13
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
20 août 2014 à 21:26
sayé j'ai connecté au serveur
j'ai crée un compte, je choisi un sous domaine temporaire mais je ne sais pas comment mettre un fichier robots.txt à la racine de mon site
0
Réponse 10 / 13
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
20 août 2014 à 21:26
aidez moi svp
j'ai pas bc de temps
0
Réponse 11 / 13
Utilisateur anonyme
21 août 2014 à 07:20
Salut, pour t'aider il nous faudrait ton code complet comme je te l'ai demandé.

Ensuite ton patron est plus ou moin un con (mais il est). Le type de patron qui prends un stagiaire pour avoir une prestation gratuite et qui est exigent. Si tu connait pas javascript, tu va pas l'inventé. Ton maitre de stage devait le savoir avant de te prendre. Tu es en stage pour apprendre, si tu sait pas c'est à eux de te montrer plutôt que de te mettre la pression ainsi.

Ensuite si on avait eu ton code depuis un lien ou un téléchargement se serait peut être déjà fini.

Bonne journée

0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
21 août 2014 à 12:29
salut,
sayé j'ai connecté au serveur
j'ai crée un compte, je choisi un sous domaine temporaire
j'ai mis mon dossier dans filezella
mais je sais pas comment mettre un fichier robots.txt à la racine de mon site contenant ceci sans espace :

User-agent:*
Disallow:/
aidez moi svp
0
Ysabe_l Messages postés 12449 Date d'inscription vendredi 12 avril 2013 Statut Contributeur Dernière intervention 18 avril 2024 274
21 août 2014 à 21:18
Bonjour,

Je ne vois pas ce qui peut te bloquer.

tu lances un éditeur de texte (le bloc notes de windows fait l'affaire).
tu mets ça dans le document

User-agent:*
Disallow:/

Juste ça.
Tu enregistres en l'appelant "robots.txt"

Tu le l'envoies à la racine du site avec filezilla.

Si tu as un soucis pour faire ça il faut nous dire à quel moment tu as un soucis.

Et comme dit lobotoFix ton patron est un idiot qui n'a rien compris au but d'un stage ! C'est à lui de t'aider et pas à toi de te débrouiller.
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
21 août 2014 à 22:41
merci
j'ai fait tout ça mais just je sais pas comment envoyer le fichier robots.txt à la racine du site
0
mr_demonicon Messages postés 828 Date d'inscription dimanche 20 juillet 2014 Statut Membre Dernière intervention 9 avril 2016 126
21 août 2014 à 22:58
filezilla tu te connecte via tes id
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
21 août 2014 à 23:22
oui je suis connecté au serveur à partir de filezilla
mais comment envoyer le fichier robots.txt à la racine du site
0
Réponse 12 / 13
Utilisateur anonyme
Modifié par lobotoFix le 22/08/2014 à 08:03
Salut,

alors j'ai réussi à trouver le lien de ton site...tu aurais pu le donner par toi même !

http://jeroumi.esy.es/

J'en ai donc profité pour l'aspirer afin de mieux voir.

Apparement lorsque tu as uploadé les fichiers, tu n'a pas fini.

-> fichiers css manquant
-> fichiers js manquant
-> fichiers et dossier musique inexistant
-> images corrompues

J'ai donc recherché sur internet bootstrap et je t'ai remis tes fichiers. J'ai fait un dossier musique avec des sons que j'ai sur mon ordinateur. Si tu met les sons en mp3 et ogg, tu couvrira plus de navigateurs que seulement en utilisant mp3

J'ai corrigé toutes les erreurs :

- un fichier, un dossier, un lien ne doit pas avoir d'espace dans son nom ni d'accent.

- les images doivent avoir un attribut alt

...

J'ai fait le petit code supplémentaire pour que les musiques change à chaque images. Pour que cela se lance tout seul, il faut rajouté dans la balise body un onload (tu verra je l'ai fait). Il faut bien entendu que le nombre d'images soit identique au nombre de <li> dans .carousel-indicators et aussi identique au nombre de balises audio.

Voici le résultat :

http://bencesticiquetudoiscliquer.bl.ee/angel_jeroumi/fables.html

tu peux tout télécharger ici (génial) :

http://bencesticiquetudoiscliquer.bl.ee/angel_jeroumi/jeroumi.zip

ensuite tu aura l'impression parfois que la musique ne change pas. C'est normal il n'y a que 4 musiques différentes que j'ai dupliquer.

Alors en général les stages c'est en fin d'année lorsque l'on sait faire. Toi tu ne sait pas encore faire (ou tu as rien foutu des tes études). De plus ton stage se passe dans quelle genre de boite ? Ton patron te demande de faire un site sur cendrillon et les fables?

En tout cas c'est pas grave, mais je laisse tomber.

Bonne chance



׺°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[׺°"~'"°º×
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
22 août 2014 à 16:59
@lobotofix
envoie la facture à la boite qui emploie ce stagiaire !
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
Modifié par angel_jeroumi le 22/08/2014 à 17:08
oui oui,j'ai connu tout ces types d'erreur en html et css
mais c'est un problème de contraint de temps....
j'ai telechargé ton code et je l'ai modifi selon mes images et mes audios
ça marche pour le bouton "next" et ne marche pas pour le bouton "precedent"
merci bien pour ton aide lobotoFix
vrement je ne trouve pas les mots pour te remercier
merci infiniment merciiiiiiii
0
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
22 août 2014 à 17:11
je suis en train de faire un stage et un autre projet dans ma faculté en meme temps
C'est pourquoi je suis perturbé et je vous demande de m'aider
mais je vous promet d'apprendre javascript et bootstrap le plutot possible ;)
0
Réponse 13 / 13
angel_jeroumi Messages postés 50 Date d'inscription lundi 18 août 2014 Statut Membre Dernière intervention 22 septembre 2014
18 août 2014 à 14:41
merci bien mr_demonicon, mais je veux une musique pour chaque image.le code que tu m'ai donné permet d'inserer une musique pour tout le carousel
-1

Discussions similaires

Erreur vidéo inconnue sur le Freebox Player
mouhaaV2.0 -
LH -

59 réponses
Tubidy télécharger gratuitement des vidéos sur Youtube ou Myspace
Peyton 5 -
Jackson -

10 réponses
sites de vidéo choc
paddynon -
anim -

5 réponses