Nivo Slider

Résolu/Fermé

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 - Modifié par crapoulou le 26/12/2016 à 14:37
XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 - 26 déc. 2016 à 12:31

Bonjour,

Je voudrais avoir un effet d'enchainement d'images et je me suis inspiré de ce site:

http://www.jqueryscript.net/slider/nivo-slider.htm

Le code que j'obtiens colle 4 images cote à cote...:

<html <!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<title></title>


<link rel="canonical" href="http://www.melaniequentin.fr/melanie-quentin/" />

<link rel="stylesheet" href="www.melaniequentin.fr/themes/default/default.css" type="text/css" media="screen" />

<link rel="stylesheet" href="www.melaniequentin.fr/nivo-slider.css" type="text/css" media="screen" />

<div id="slider" class="nivoSlider"> 

<img src="BELLE ENDORMIE.jpg" data-thumb="ENIGME.jpg" alt="" /> 

<img src="ENIGME.jpg" data-thumb="DANSEORIENTALE.jpg" alt="" />

<img src="DANSEORIENTALE.jpg" data-thumb="ECHAPPEE BELLE.jpg" alt="" data-transition="slideInLeft" /> 

<img src="ECHAPPEE BELLE.jpg" data-thumb="SERENITE.jpg" alt="" title="#htmlcaption" /> 

</div>

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider({

effect: 'random',

slices: 15,

boxCols: 8,

boxRows: 4,

animSpeed: 500,

pauseTime: 3000,

startSlide: 0,

directionNav: true,

controlNav: true,

controlNavThumbs: false,

pauseOnHover: true,

manualAdvance: false,

prevText: 'Prev',

nextText: 'Next',

randomStart: false,

beforeChange: function(){},

afterChange: function(){},

slideshowEnd: function(){},

lastSlide: function(){},

afterLoad: function(){}

});

});


</script>

</HEAD>


<BODY>

<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider();

});

</body>
</html>

Qu'en pensez vous?

Bien cordialement

EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

A voir également:

Nivo Slider
Wow slider - Télécharger - Présentation
Formatage de bas nivo - Forum logiciel systeme
Probleme de slider - Forum HTML
Slider html css ✓ - Forum CSS
Help! besoin de kk1 de calé nivo CGraphique! - Forum Matériel & Système

10 réponses

Réponse 1 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
22 déc. 2016 à 11:56

merci mais le résultat est le même...

comme je ne suis pas très au point, juste quelques précisions
l'emplacement de téléchargement du js de Query est-il important?
et Ajax n'est pas un logiciel à télécharger mais bien un ensemble de logiciels

cordialement

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
22 déc. 2016 à 14:43

L'important pour jQuery est d'utiliser la bonne version.
NivoSlider n'étant pas mis à jour depuis longtemps, il semble que tu dois utiliser la version 1.X de jQuery, la dernière version étant la 1.12.4 qui semble fonctionner correctement avec NivoSlider.

Ajax est une combinaison de technologie utilisée principalement pour effectuer des requêtes http sans recharger la page du navigateur. Ceci n'a actuellement rien à voir avec ton slider ;)

Voici un exemple simple qui fonctionne de mon coté :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre</title>
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="slider" class="nivoSlider">
            <img src="http://placekitten.com/g/500/300" data-thumb="http://placekitten.com/g/200/150" alt="" />
            <img src="http://placekitten.com/g/500/250" data-thumb="http://placekitten.com/g/200/150" alt="" />
            <img src="http://placekitten.com/g/550/300" data-thumb="http://placekitten.com/g/200/150" alt="" data-transition="slideInLeft" /> 
            <img src="http://placekitten.com/g/400/400" data-thumb="http://placekitten.com/g/200/150" alt="" title="#htmlcaption" />
        </div>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="jquery.nivo.slider.js"></script>
        <script>
            $(window).load(function () {
                $('#slider').nivoSlider();
            });
        </script>
    </body>
</html>

Pour faire fonctionner cette page, les fichiers nivo-slider.css et jquery.nivo.slider.js doivent se trouver dans le même dossier que la page html.
Ces deux fichiers peuvent être téléchargés ici :
- https://raw.githubusercontent.com/Codeinwp/Nivo-Slider-jQuery/master/nivo-slider.css
- https://raw.githubusercontent.com/Codeinwp/Nivo-Slider-jQuery/master/jquery.nivo.slider.js

Réponse 2 / 10

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
21 déc. 2016 à 17:10

Salut,

Ton code html n'est pas correct :
- le doctype doit être la première ligne de ton document suivi de l'ouverture de la balise <html>
- les balises <div>, <img> et tout ce qui doit être affiché sur la page doit se trouver à l'intérieur de la balise <body>
- les balises <link> et <title> doivent se trouver dans la balise <head>
- les balises <script> peuvent être situé dans la balise <head> ou juste avant la fermeture de la balise </body>

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <title>Titre</title>
    <link rel="canonical" href="http://www.melaniequentin.fr/melanie-quentin/" />
    <link rel="stylesheet" href="www.melaniequentin.fr/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="www.melaniequentin.fr/nivo-slider.css" type="text/css" media="screen" />
  </head>
  <body>
    <div id="slider" class="nivoSlider">
      <img src="BELLE ENDORMIE.jpg" data-thumb="ENIGME.jpg" alt="" />
      <img src="ENIGME.jpg" data-thumb="DANSEORIENTALE.jpg" alt="" />
      <img src="DANSEORIENTALE.jpg" data-thumb="ECHAPPEE BELLE.jpg" alt="" data-transition="slideInLeft" /> 
      <img src="ECHAPPEE BELLE.jpg" data-thumb="SERENITE.jpg" alt="" title="#htmlcaption" />
    </div>

    <script type="text/javascript" src="jquery.nivo.slider.js"></script>
    <script type="text/javascript">
      $(window).load(function() {
        $('#slider').nivoSlider();
      });
    </script>
  </body>
</html>

Le fichier jquery.nivo.slider.js nécessite le fichier js de jQuery que tu peux télécharger ici : https://jquery.com/download/

Enfin pour t'aider tu peux consulter la page html de démo de Nivo Slider disponible ici : https://github.com/Codeinwp/Nivo-Slider-jQuery/tree/master/demo

Bonne journée,

Réponse 3 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
Modifié par crapoulou le 26/12/2016 à 14:37

Bonjour Pitet,

tout d'abord un grand merci pour ton aide
comme tu as du le remarquer je suis dans la catégorie débutant...
j'ai télécharger jquery-3.1.1.slim.js

et ajouter
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

ce qui donne

<!DOCTYPE html>
<html>
  <head>
    <title>Titre</title>
    <link rel="canonical" href="http://www.melaniequentin.fr/melanie-quentin/" />
    <link rel="stylesheet" href="www.melaniequentin.fr/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="www.melaniequentin.fr/nivo-slider.css" type="text/css" media="screen" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="slider" class="nivoSlider">
      <img src="BELLE ENDORMIE.jpg" data-thumb="ENIGME.jpg" alt="" />
      <img src="ENIGME.jpg" data-thumb="DANSEORIENTALE.jpg" alt="" />
      <img src="DANSEORIENTALE.jpg" data-thumb="ECHAPPEE BELLE.jpg" alt="" data-transition="slideInLeft" /> 
      <img src="ECHAPPEE BELLE.jpg" data-thumb="SERENITE.jpg" alt="" title="#htmlcaption" />
    </div>

    <script type="text/java-script" src="jquery.nivo.slider.js"></script>
    <script type="text/java-script">
      $(window).load(function() {
        $('#slider').nivoSlider();
      });
    </script>
  </body>
</html>

mais j'ai toujours mais 4 images cote à cote

où est l'erreur?
bien cordialement

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
22 déc. 2016 à 09:48

Le problème vient de l'attribut type des dernières balises script dans ton code, type="text/java-script" n'est pas un type reconnu, à corriger par type="text/javascript" (ou supprimer l'attribut type puisque "text/javascript" est la valeur par défaut si pas renseigné).

Active également la console de développement de ton navigateur pour voir les éventuelles erreurs javascript.

Réponse 4 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
22 déc. 2016 à 10:20

Bonjour Pitet,

désolé mais je n'ai pas compris ta proposition:
type="text/java-script" n'est pas un type reconnu, à corriger par type="text/java-script"

D'autre part la console ne donne aucune erreur..

merci pour ton aide
cordialement

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
22 déc. 2016 à 11:14

"text/java-script" != "text/javascript"

Pas de tiret dans javascript.

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

Posez votre question

Réponse 5 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
Modifié par crapoulou le 26/12/2016 à 14:37

Bonsoir, j'ai copié ton code comme suit:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre</title>
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="slider" class="nivoSlider">
            <img src="BELLE ENDORMIE.jpg" data-thumb="BELLE ENDORMIE.jpg" alt="" />
            <img src="DANSEORIENTALE.jpg" data-thumb="ENIGME.jpg" alt="" />
            <img src="SERENITE.jpg" data-thumb="ENIGME.jpg" alt="" data-transition="slideInLeft" /> 
            <img src="SERENITE.jpg" data-thumb="ENIGME.jpg" alt="" title="#htmlcaption" />
        </div>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="jquery.nivo.slider.js"></script>
        <script>
            $(window).load(function () {
                $('#slider').nivoSlider();
            });
        </script>
    </body>
</html>

et je n'obtiens aucune image contrairement à mes essais précédents?
sur le site jQuery j'ai chargé la version jQuery 3.1.1.min.js
merci en tout cas

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
23 déc. 2016 à 11:47

As tu des erreurs dans la console de développement de ton navigateur ?
Les fichiers css, js et jpg sont ils bien dans le même dossier que ta page ?

Réponse 6 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
23 déc. 2016 à 12:10

Bonjour,
tous les fichiers sont dans le même dossier que la page et il n'y pas d' erreur sur la console
A ton avis la version JQuery 3.1.1.min js convient bien?
j' exécute sous IE

cordialement

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 23/12/2016 à 12:18

Non la version 3 de jQuery ne semble pas compatible avec NivoSlider, il semble que ce dernier n'est plus mis à jour depuis longtemps.

En reprenant le code de mon dernier exemple et en changeant uniquement la version de jQuery pour la 3.1.1, j'obtiens l'erreur "a.indexOf is not a function". Étrange que tu n'ai aucune erreur.

As tu réussi à faire fonctionner le slider en reprenant exactement mon exemple ?

Réponse 7 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
23 déc. 2016 à 12:38

je viens de reprendre ton code et j'obtiens

Line: 20
Erreur : L’objet ne gère pas la propriété ou la méthode « nivoSlider

surement du à version de JQuery mais je n'arrive à avoir la 1.12.4

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
23 déc. 2016 à 14:33

jQuery est inclus directement dans l'exemple via le site https://code.jquery.com/ tu n'as rien à télécharger.
Par contre il faut p-e télécharger le fichier css et js de NivoSlider précisé sous mon exemple si ce n'est pas fait.

Réponse 8 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
23 déc. 2016 à 14:54

juste avant ton message, j'avais téléchargé 1.12.4 et exécuté ton code sans erreur mais avec une page blanche?

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
Modifié par Pitet le 23/12/2016 à 16:08

Encore une fois, jQuery n'as pas besoin d'être téléchargé dans l'exemple puisqu'il est inclus à distance, contrairement aux fichiers css et js dont je ne sais toujours pas si tu les as récupéré.

Du coup j'ai inclus directement les sources des fichiers css et js dans le document html et mis le fichier d'exemple à disposition ici : https://www.cjoint.com/c/FLxpeGsfSgV
Il n'y a rien d'autre à télécharger, le slider doit fonctionner dès l'ouverture de ce document html. Je ne peux pas faire plus simple.

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9 > Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022
23 déc. 2016 à 17:51

désolé mais je pensais t'avoir écrit que j'avais bien mis les fichiers dans le dossier comportant le fichier html.
j'ai fait un copier/coller du code que tu viens de me transmettre qui fonctionne bien contrairement au précédent que tu m'avais transmis et qui donne une page blanche

merci pour tout

Réponse 9 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
23 déc. 2016 à 19:16

j'avais bien chargé jquery.nivo.slider.js mais quand j'ai voulu l'ouvrir il y avait une petite bavure (un signe en moins), maintenant je l'ai télécharger à nouveau et ça marche!

je te remercie très vivement pour ta compétence , ta gentillesse et.....ta
patience

Passes de très bonnes fêtes!

Réponse 10 / 10

XARBA Messages postés 155 Date d'inscription mercredi 18 novembre 2015 Statut Membre Dernière intervention 7 juin 2023 9
26 déc. 2016 à 12:31

bonjour
je voulais ajouter: je remercie comment ça marche de nous mettre en relation avec des gens aussi compétents et patients comme PITET

Cordialement

Discussions similaires

Problème de transfert slider qui ne veut plus se charger

Slider Avant / Après

mon slider ne marche pas

Décrocher sans glisser

slider