Discussion :

[yruama69]

Bonjour

Je souhaiterais introduir dans mon site sur ma page d'acceuil un slider. J'ai trouvé ce qu'il me fallait ici : http://codepen.io/randydaniel/pen/IHArK .

Cependant je n'arrive pas à le mettre en place n'ayant aucune connaissance du JS.

Pour essayer de le mettre en place j'ai sur ma page d'acceuil :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php require_once 'slider.php'; ?>

et dans ma page slider.php j'ai :

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
var mySwiper = new Swiper('.swiper-container',{
    pagination: '.pagination',
    loop:true,
    grabCursor: true,
    paginationClickable: true,
    autoplay:5000,
    speed:750
  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
  })
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  })

Code html :

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
<div class="touch-slider">
    <a class="arrow-left" href="#"></a>
    <a class="arrow-right" href="#"></a>
    <div class="swiper-container">
      <div class="swiper-wrapper">
 
        <div class="swiper-slide"><a href="http://google.com"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/hospitality.jpg"></a></div>
        <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/science.jpg"></div>
        <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/stage_fighting.jpg"></div>
        <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/stem.jpg"></div>
 
        <div class="swiper-slide">
          <div class="content-slide">
            <div class="content-image"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/social_sciences.jpg"></div>
            <div class="content-text"><h2>Fall Registration is Upon Us!</h2><p>Lorem Ipsum is simply dummy text of the typesetting industry. This is a <a href="#">link</a></p>
          </div>
        </div>
 
      </div>
    </div>
    <div class="pagination"></div>
  </div>
 
  <script src="https://dl.dropboxusercontent.com/u/913021/touch-slider/idangerous.swiper-2.0.min.js"></script>
  </div>

Cependant je pense que je JS n'est pas pris en compte puisque j'ai juste l'image avec les fleches mais ni els points (en bas a gauche) ni le défilement automatique, je n'ai vraiment aucune idée pour le faire fonctionner.

J'ai aussi essayer de télécharger leur dossier et de faire un require_once sur l'index qui contient seulement le slider, mais même chose le JS n'est pas pris en compte.

Merci

[Bovino]

Tu sembles appeler ton script avant d'intégrer la librairie... du coup, ça risque difficilement de fonctionner.

[yruama69]

Je suppose que tu veux dire mettre cette ligne

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://dl.dropboxusercontent.com/u/913021/touch-slider/idangerous.swiper-2.0.min.js"></script>

tout en haut, cependant ça ne change rien.

De plus le code source prédéfinit dans l'exemple à téléchargé est :

Code html :

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
    <div class="touch-slider">
    <a class="arrow-left" href="#"></a>
    <a class="arrow-right" href="#"></a>
    <div class="swiper-container">
      <div class="swiper-wrapper">
 
        <div class="swiper-slide"><a href="http://google.com"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/hospitality.jpg"></a></div>
        <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/science.jpg"></div>
        <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/stage_fighting.jpg"></div>
        <div class="swiper-slide"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/stem.jpg"></div>
 
        <div class="swiper-slide">
          <div class="content-slide">
            <div class="content-image"><img src="https://dl.dropboxusercontent.com/u/913021/touch-slider/social_sciences.jpg"></div>
            <div class="content-text"><h2>Fall Registration is Upon Us!</h2><p>Lorem Ipsum is simply dummy text of the typesetting industry. This is a <a href="#">link</a></p>
          </div>
        </div>
 
      </div>
    </div>
    <div class="pagination"></div>
  </div>
 
  <script src="https://dl.dropboxusercontent.com/u/913021/touch-slider/idangerous.swiper-2.0.min.js"></script>
 
  <script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
 
  <script src="js/index.js"></script>

Donc meme les scripts sont tout en bas.

[Bovino]

Donc meme les scripts sont tout en bas.

On est bien d'accord ! Donc comme ce n'est pas le cas dans ton premier code, il s'agit bien de la source de l'erreur...

Pour info, quand je dis

Tu sembles appeler ton script avant d'intégrer la librairie...

Cela signifie que le problème vient du fait que ton code perso est avant le code de la librairie qu'il utilise et qu'une façon de régler le problème consiste donc à le placer après.

[yruama69]

Cela ne change rien.

Est-ce que ca peut venir du faire que je suis en extension php et non html ?

J'ai tout mis dans mon index au lieu de faire un require_once. Et ca marche, et je ne comprend vraiment pas pourquoi ...

J'aurais bien aimez le mettre dans un autre fichier et faire appel a lui pour pas que ca prenne trop de place ...