Réaliser votre page web avec slider en suivant les étapes suivantes :
-D'abord Télécharger la librairie de Jquery sur ce site : https://jquery.com/download/ c'est gratuit le telechargement
-En suite créer trois fichiers slider.js, slider.css et index.html
Dans le fichier index.html vous mettez :
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE HTML>
<html>
    <head>
		<title>Slider page</title>
              <!--  vous insérez la librairie Jquery --> 
		<script type="text/javascript" src="jquery.min.js"></script>
              <!--  vous insérez la page css du slider --> 
           <link rel="stylesheet" type="text/css" href="slider.css">
    <body>
           <div id="slider_conteneur">
			<ul id="slider">
				<li><img src="image1.png"></li>
				<li><img src="image2.png"></li>
				<li><img src="image3.png"></li>
			</ul>
          </div>
           <script type="text/javascript"> 
                var slider = $("#slider"); var li = $("#slider li"); var next = $("#bouton_next_picture_slider"); var previous =                $("#bouton_previous_picture_slider"); 
                slider_function(li,next,previous, slider);
                 function slider_cercle(li,next,previous, gd,cercle){
        var now_slider = 0;
        var slide_time = 1000;
        var delay_recall = 5;
        var c = false;
        
        li.hide();
        li.eq(now_slider).show();       
        var loop = setInterval(function(){slider(1,c)}, delay_recall * 1000);
        
        next.on('click', function() {
        slider(1);
    });
 
    previous.on('click',        function() {
       slider(-1) 
    });
        function animateOpacityIn(btn_enter){
         btn_enter.animate({ opacity: 1 });
    }
    function animateOpacityOut(btn_leave){
       btn_leave.animate({ opacity: '0.6' });
    }
        gd.on('mouseenter', function() {
        clearInterval(loop);
                $(this).css({
                        cursor : "pointer",
                })
                next.fadeIn().on('mouseenter', function(){
             animateOpacityIn(next) 
             }).on('mouseleave', function(){ 
            animateOpacityOut(next) 
        });
        previous.fadeIn().on('mouseenter', function(){ 
            animateOpacityIn(previous) 
             }).on('mouseleave', function(){
             animateOpacityOut(previous) 
        });
    }).on('mouseleave', function() {
        loop = setInterval(function(){slider(1,c)}, delay_recall * 1000);
                next.fadeOut();
        previous.fadeOut();
    });
        
        function slider(direction,cer_act){
                var left;
            var current = now_slider;
                        if(direction !=2 ){
                                if(direction > 0){
                                        now_slider++
                                        left = 100;
                                 }
                                 else{ 
                                 now_slider--
                                        left = -100;
                                 }
                        }
                        else{
                                left = -100;
                                if(now_slider > cer_act){
                                        left = 100;
                                }
                                now_slider = cer_act;
                        }
                        if(now_slider >  li.length - 1){
                                now_slider = 0;
                        }
                        else if(now_slider < 0){
                                now_slider = li.length - 1;
                        }
                        
            li.eq(current).css({
                left:'0px',
            }).animate({
                left: -left + '%',
            }, slide_time, function() {
                $(this).fadeOut(3000);
            });
            li.eq(now_slider).css({
                left: left + '%',
                                opacity : 0 , 
            }).animate({
                left: '0px',
                                opacity : '1',
            }, slide_time).show();
                        
        }
}
 
         </script>
    </body>
</html>