Slider avec navigation et flèche pour naviguer

Bonjour,

je crée une navigation pour mon slider et je voudrai que les deux formes de navigation fonctione

j'ai des navigation avec des flèche et une navigation avec un indicateur et je n'arrive pas à les faire fonctionner voici le code pour ma navigation avec les flèche,

je n'arrive pas à faire le code pour que les deux fonctionne

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
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
$(document).ready(function()
{
 
  var present=1;
  var next=2;
  var total_slide=document.getElementById("slider").childElementCount;
 
  $(".right").click(function()
  {
 
   present_slide="#slide"+present;
   next_slide="#slide"+next;
   $(present_slide).fadeOut("slow");
   $(next_slide).fadeIn("slow");
   present++;
   next++;
   if(present==(total_slide+1))
   {
    present=1;
    next=2;
    for(i=0;i<=total_slide;i++)
    {
     $("#slide"+i).fadeOut("slow");
   }
   $("#slide1").fadeIn("slow");
 
 
 }
 
});
 
  $(".left").click(function()
  {
   if(present==1)
   {
 
     next_slide="#slide"+total_slide;
     present_slide="#slide"+present;
     $(present_slide).fadeOut("slow");
     $(next_slide).fadeIn("slow");
 
 
     present=total_slide;
     next=1;
   }else
   {
     next_slide="#slide"+(present-1);
     present_slide="#slide"+present;
     $(present_slide).fadeOut("slow");
     $(next_slide).fadeIn("slow");
     present--;
     next--;
 
   }
   if(next==0)
   {
    present=(total_slide-1);
    next=total_slide;
 
  }
});
});

Ce script permet d'afficher ce div la

Code:

1
2
3
4
5
6
<div class="expertises" id="slide1"></div>
<div class="inthemarketing" id="slide2"></div> 
<div class="cestcom" id="slide3"></div>
<div class="createurdevenement" id="slide4"></div>
<div class="latoile" id="slide5"> </div>
<div class="outilsdecom" id="slide6"></div>

La tous est ajuste sauf que j'avais commencé à créer un script avec ma deuxième navigation et après les quand on clique sur les flèche pour naviguer les contenus ne sont pas bon

Voici la listes qui permet de naviguer entre les différents slide

Code:

1
2
3
4
5
6
7
8
<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active" id="expertises"></li>
    <li data-target="#myCarousel" data-slide-to="1" id="inthemarketing"></li>
    <li data-target="#myCarousel" data-slide-to="2" id="cestcom"></li>
    <li data-target="#myCarousel" data-slide-to="3" id="createurdevenement"></li>
    <li data-target="#myCarousel" data-slide-to="4" id="latoile"></li>
    <li data-target="#myCarousel" data-slide-to="5" id="outilsdecom"></li>
</ol>