Code https://jsfiddle.net/ ne marche pas

**kate59** · 27/06/2017, 10h36

Bonjour,

J'ai améliorer un code ici :

http://jsfiddle.net/elodie66/DcpdT/283/

et les récupérer pour mon site mais cela ne marche pas comme si le jquery ne marche pas.

http://test3.webcreation66.com/transats.php

j'ai même tenter de le recopier collier ici

https://jsfiddle.net/elodie66/Lur924ms/1/

mais le code ne marche pas j'ai bien pris les ressources externes pourtant.

Merci.

**kate59** · 27/06/2017, 11h08

on m' a conseiller de modifier le code ainsi enlevant les $j par $ mais le resultat n'est pas celui de mon http://jsfiddle.net/elodie66/DcpdT/283/:

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
	<script type="text/javascript">
		 var $ = jQuery.noConflict();
 
var realSlider= $("ul#bxslider").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);
 
      }
 
    });
 
    var realThumbSlider=$("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 156,
      slideMargin: 12,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*$("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */
 
      }
    });
 
    linkRealSliders(realSlider,realThumbSlider);
 
    if($("#bxslider-pager li").length<5){
      $("#bxslider-pager .bx-next").hide();
    }
 
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
 
  $("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=$(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}
 
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
 
  var $thumbS=$("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
 
  if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-4);
 
}
 
</script>

voici ma page :
http://test3.webcreation66.com/transats.php

merci

**SpaceFrog** · 27/06/2017, 11h16

En console tu as l'erreur suivante :

TypeError: $(...).bxSlider is not a function

**kate59** · 27/06/2017, 11h19

je ne comprend pas que cela fonctionne sur :
http://jsfiddle.net/elodie66/ffer2nc4/
voici mon html j'ai bien #bxslider

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
<ul id="bxslider">
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt="">
				<div class="content">
					<h3>MGMT</h3>
					<h4>Congratulations</h4>
					<p>Recording the follow-up to your critically-acclaimed debut album has to be a nerve-wracking affair. As a band, do you go with the same sound/formula you used on the first record? On MGMT’s sophomore album Congratulations, they successfully manage to do both.</p>
				</div>
				<div class="clear"></div>
</li>
<li><img src="http://dummyimage.com/600x400/000/ff0099.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/ff0000.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff000.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
    </ul>
 
    <!-- The thumbnails -->
    <ul id="bxslider-pager">
<li data-slideIndex="0"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
<li data-slideIndex="1"><a href=""><img src="http://dummyimage.com/200x200/000/ff0099.png"></a></li>
<li data-slideIndex="2"><a href=""><img src="http://dummyimage.com/200x200/000/ff0000.png"></a></li>
<li data-slideIndex="3"><a href=""><img src="http://dummyimage.com/200x200/000/fff000.png"></a></li>
    <li data-slideIndex="4"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
    <li data-slideIndex="5"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
    </ul>

**kate59** · 27/06/2017, 11h34

nouveau lien http://jsfiddle.net/elodie66/ffer2nc4/

**SpaceFrog** · 27/06/2017, 11h44

http://jsfiddle.net/ffer2nc4/2/

**SpaceFrog** · 27/06/2017, 11h46

http://jsfiddle.net/ffer2nc4/3/

**kate59** · 27/06/2017, 11h49

merci mais le probléme est toujours le même ce n'est pas du puces en bas de navigation que j'avais mais des images thumbnail relié a l'image principal cela s'affiche bien en test en agrandissant la zone on a bien l'image le texte a droit et le carrosuel en bas sur http://jsfiddle.net/elodie66/ffer2nc4/ mais sur mon site http://test3.webcreation66.com/transats.php les thumbnail sont vertical et non horizontal et quand clic sur suivant rien ne se passe.

**SpaceFrog** · 27/06/2017, 11h51

Heu quelle est la question au juste ????

**kate59** · 27/06/2017, 11h53

ne peut on pas recuperer le code source complet d'un projet http://jsfiddle.net merci

**kate59** · 27/06/2017, 11h54

quand je vais sur ton lien j'ai des puces en dessous de l'image et mes imaGes thmbnail vertical plutot qu'en carousel, ce n'est pas cela que tu m'a envoyer ?MERCI

**SpaceFrog** · 27/06/2017, 11h58

Je n'ai toujours pas compris ce que tu cherches a faire ....
pourrait-t-on avoir une vraie question avec des vrais morceaux de point d'interrogation entier dedans ???

S'agit il d'un problème de mise en page ?

**kate59** · 27/06/2017, 12h08

j'ai résolu le problème merci.

J'ai enlevé dans l'header : <script src="https://unpkg.com/jquery" type="text/javascript"></script>

Merci.

**kate59** · 28/06/2017, 08h31

J'ai parlé trop vite l'initialisation multiple ne doit pas être correct car en bas cela defile. En haut ca défile mais refait pas pareil pouvez vous regarder si je m'y suis bien pris elle est bas de la page
http://test3.webcreation66.com/piscines.php

Merci

**kate59** · 28/06/2017, 09h45

après plusieurs recherche je constaste que le diaporama du bas inox colour ne prend pas en compte deja le float left pour le contenu-text a droite de l'image quand on affiche les blocks on voit qu'i ne s'affiche pas comme l'autre.

je ne comprend pourquoi voila mon css:

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
.clear {
	clear: both;
}
#bxslider {
overflow: hidden;
  width:100%;
 
}
 
#bxslider li {
	list-style: none;
	width: 60%;
}
#bxslider .content-text {
	float: left;
	width: 30%;
	padding-left: 21px;
}
#bxslider .content-text h3{
color:#4800FF;
font-weight:bold;
}
#bxslider .content-text p{
color:black;
}
#bxslider .content-text .important{
font-weight:bold;
}
#bxslider li img {
	float: left;
}
 
 
#bxslider2{
overflow: hidden;
  width:100%;
 
}
 
#bxslider2 li {
	list-style: none;
	width: 60%;
}
#bxslider2.content-text {
	float: left;
	width: 30%;
	padding-left: 21px;
}
#bxslider2 .content-text h3{
color:#4800FF;
font-weight:bold;
}
#bxslider2 .content-text p{
color:black;
}
#bxslider2 .content-text .important{
font-weight:bold;
}
#bxslider2 li img {
	float: left;
}

je vais mettre un nouveau sujet car ce n'est plus le même probleme.

merci.

Code https://jsfiddle.net/ ne marche pas

jQuery

Discussions similaires

Partager

Partager