Discussion :

[Maitre2B]

Bonjour à tous,

Cela fait maintenant 3 jours que je me tire les cheveux sur un problème d'images/slider/carrousel.
En effet, le slider est décalé vers la gauche (on le voit très facilement grace à l'effet 3D de FireFox).
Du coup, il manque un bout de l'image à droite.


En plus de ça, j'ai codé mon site pour le faire en responsiv design, mais l'image ne se redimensionne pas.

Auriez vous des idées ?

Je vous laisse un lien si jamais vous souhaitez voir le code par vous même.
Le code du slider se trouve dans le dossier "slider".
kaplan.zip

Merci à tous pour l'aide, et si jamais vous avez un avis sur le site, n'hésitez pas.

[Invité]

Bonjour,
tu crois vraiment que c'est à nous d'aller télécharger tes fichiers et fouiller dans ton code ??

A TOI de nous fournir (ici, dans la discussion et pas dans un fichier zip !!) :

• le code nécessaire et suffisant pour comprendre / visualiser / tester le problème
• les commentaires utiles
• si possible un lien vers une page en ligne

[Maitre2B]

Bonjour,

Etant donné qu'il y a plusieurs répertoires et fichiers, cela me semblait bien plus simple pour travailler sur le problème.
Il n'y a rien en ligne pour l'instant, le site n'est pas terminé et a quelques problèmes.

Voici le code HTML du slider.

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
<div class="conainer-fluid"> <!-- class booststrap permmetant de prendre la largeur entière du l'écran -->
            <div id="fix-row" class="row">
                    <div id="carrousel">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                           <div class="slide">
                                <img src="slider/img4.jpg" />      
                            </div>
                            <div class="slide">    
                                 <img src="slider/img4.jpg" />  
                            </div>
                            <div class="slide">
                                <img src="slider/img4.jpg" />  
                            </div>
                        </div>
                        <img id="next" src="slider/next.png" />
                        <img id="prev" src="slider/prev.png" />
                    </div>
            </div>
        </div>

Voici le JS du slider, à prioris, il n'y a pas de rapport avec le fait qu'il y ait un décalage.

Code javascript :

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
var carrousel = {
  nbSlide : 0,
  i : 0,
  elemCurrent : null,
  elem : null,
  timer: null,
 
  init : function(elem) {
    this.elem = elem;
    this.nbSlide = elem.find(".slide").length;
    elem.find(".slide").hide();
    elem.find(".slide").eq(this.i).fadeIn(300);
    $("#main-title").show();
    $('#prev').css({"opacity" : "0.1"});
    $('#next').css({"opacity" : "0.1"});
    this.timer = window.setInterval("carrousel.nextSlider()", 500000);
  },
 
  nextSlider : function() {
      this.elem.find(".slide").eq(this.i).fadeOut(1500);
      this.i++;
      if (this.i >= this.nbSlide) {
        this.i = 0;
      }
      this.elemCurrent = this.elem.find(".slide").eq(this.i)
      this.elemCurrent.fadeIn(1500);
 
  },
 
 
  prevSlider : function() {
      this.elem.find(".slide").eq(this.i).fadeOut(1500);
      this.i--;
      if (this.i < 0) {
        this.i = this.nbSlide - 1;
      }
      this.elemCurrent = this.elem.find(".slide").eq(this.i)
      this.elemCurrent.fadeIn(1500);
 
  },
 
 
}
 
$(function(){
  carrousel.init($("#carrousel"));
 
  $('#next').on( 'click', function() {
    carrousel.nextSlider();
  });
 
  $('#prev').on( 'click', function() {
    carrousel.prevSlider();
  }); 
 
 $( "#carrousel" ).mouseenter(function() {
    $('#prev').animate({
        opacity : "0.9"
      }, 200 );
    $('#next').animate({
        opacity : "0.9"
      }, 200 );
  });
 
 $( "#carrousel" ).mouseout(function() {
    $('#prev').animate({
        opacity : "0.1"
      }, 200 );
    $('#next').animate({
        opacity : "0.1"
      }, 200 );
  });
 
});

Voici le code CSS du slider

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
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
#carrousel {
	position: relative;
	height: 500px;
}
 
#fix-row {
	margin-right:0px;
}
 
.carrousel img{
	width: auto;
	max-width: 100%;
}
 
.slide {
	position: absolute;
}
 
#prev , #next {
	position: relative;
	margin-top: 250px;
	z-index: 99999;
	cursor: pointer;
}
 
#prev:hover , #next:hover {
	opacity: 1;
}
 
@media (max-width: 1200px) {
	#prev , #next {
		position: relative;
		margin-top: 220px;
		z-index: 99999;
	}
}
 
@media (max-width: 992px) {
	#prev , #next {
		position: relative;
		margin-top: 165px;
		z-index: 99999;
	}
}
 
@media (max-width: 600px) {
	#prev , #next {
		position: relative;
		margin-top: 130px;
		z-index: 99999;
	}
}
 
@media (max-width: 480px) {
	#prev , #next {
		position: relative;
		margin-top: 100px;
		z-index: 99999;
	}
}
 
#next {
}
 
#prev {
	float: right;
}

Il est possible que ce décalage se fasse par rapport à un élément antérieur au slider, mais il n'y a que le menu.

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
<div class="container-fluid header ">
                <header>
                    <div class="container">
                    <div class="row header">
                        <div class="col-xs-8 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset-5 col-lg-5">
                            <p>
                                <span class="col-lg-5" ><img src="images/phone-sight-test-prep.png" alt="">+33(0)1 58 18 62 48</span> 
                                <span class="col-lg-7" ><img src="images/mail-sight-test-prep.png" alt="">contact@sighteducation.com</span>
                            </p>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-3 col-lg-2">
                            <p>
                                <span class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img src="images/logo-facebook.png" alt=""></span>
                                <span class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img src="images/logo-google+.png" alt=""></span>
                                <span class="col-xs-4 col-sm-4 col-md-4 col-lg-4"><img src="images/logo-linkedin.png" alt=""></span>
                            </p>
                        </div>
                    </div>
                </div>
                </header>
        </div>
        <div class="container-fluid navbar-default">
            <nav>
                <div class="container">
                    <div class="row ">
                        <div class = "navbar navbar-default navbar-static-top">
                            <div class="navbar-header">
                                <!-- LOGO -->
                                <a href = "#" class = "navbar-brand">
                                <div class="md-col-3">
                                    <img src="images/sight-test-prep-logo.png" alt="Logo Sigth Education"></a>
                                </div>
                                <div class="md-col-3">
                                    <button class = "navbar-toggle" data-toggle = "collapse" data-target=".navHeaderCollapse">
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                        <span class="icon-bar"></span>
                                    </button>
                                </div>
                            </div>
 
                            <div class="collapse navbar-collapse navHeaderCollapse">
                                <ul class="nav navbar-nav navbar-right">
                                    <li><a href = "#" class="menu-hover">Home</a></li>
                                    <li><a href = "#" class="menu-hover">Contact </a></li>
                                    <li><a href = "#" class="menu-hover">Blog</a></li>
                                    <li><a href = "#" class="menu-hover">Partenaires</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>
        </div>

J'ai déjà essayé de regarder si ce décalage se faisait au niveau d'un position: relative, mais rien n'y fait.
Suivant si l'on utilise Chrome ou Firefox, le résultat au niveau du slider peut changer énormément.

Merci pour l'aide que vous m'apportez.