Utilisation d'un script JS
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 require_once 'slider.php'; ?>
et dans ma page slider.php j'ai :
Code:
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:
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
