11521 sujets

JavaScript, DOM et API Web HTML5

Slide pour defilement score

Bonjour à tous,

Je ne sais pas si je suis dans la bonne catégorie ...

J'ai une petite question, j'essaye de trouver depuis pas mal de temps...

J'aimerais faire un slide ou défileront les résultats de mon club.
Dans le genre : http://bcvn.org/ (bannière ou défile le score)

Si quelqu'un pourrait m'aidé a trouvé quelque chose ...

Bonne journée
J'ai essaye mais je n'arrive pas du tout à comprendre comment copier les codes ...
Quel lien télécharger ... ?
Si l'on prend par exemple bxSlider, la documentation me parait explicite.

Le bouton Download en haut à droite va permettre de télécharger les sources du plugin.

Sur la même page se trouve les premiers pas à faire pour avoir un carousel fonctionnel.

1ère étape, inclure les fichiers à ta page, dans la partie entre les balises <head /> ainsi que jQuery sur lequel repose bxSlider :

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />


Ensuite, respecter ce markup HTML de base :

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>


Dans ton cas, on replacera les images par des <div /> avec les scores et la mise en page que tu souhaites.

Et pour finir, ne pas oublier d'initialiser le plugin en incluant ce bout de code dans un fichier javascript (que tu n'auras pas oublier d'inclure à la suite des fichiers précédents) ou entre des balises <script /> à même la page.


$(document).ready(function(){
  $('.bxslider').bxSlider();
});


Tu peux ensuite suivre les différents exemples pour obtenir le résultat attendu.
J'ai fais exactement se que tu m'as dis, et aucun résultat ? 


<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />




<ul class="bxslider">
  <li><img src="images/image1.png" /></li>
  <li><img src="images/image2.png" /></li>
  <li><img src="images/image3.png" /></li>
  <li><img src="images/image4.png" /></li>
</ul>

<script>
	$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});
</script>



<script>
	
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
As-tu vérifié si les chemins de tes fichiers sont corrects ?

Dans cet exemple, cette partie ne sert à rien :

<script>
	$(document).ready(function(){
  $('.slider1').bxSlider({
    slideWidth: 200,
    minSlides: 2,
    maxSlides: 3,
    slideMargin: 10
  });
});
</script>

.slider1 n'existant pas.
Meilleure solution
Sujet clos
Aller à