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