ne marche pas

Version imprimable

27/06/2017, 10h36
kate59

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

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.

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:

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

27/06/2017, 11h16
SpaceFrog

En console tu as l'erreur suivante :

Citation:

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

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

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
<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>

27/06/2017, 11h34
kate59

nouveau lien http://jsfiddle.net/elodie66/ffer2nc4/
27/06/2017, 11h44
SpaceFrog

http://jsfiddle.net/ffer2nc4/2/
27/06/2017, 11h46
SpaceFrog

http://jsfiddle.net/ffer2nc4/3/
27/06/2017, 11h49
kate59

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.
27/06/2017, 11h51
SpaceFrog

Heu quelle est la question au juste ????
27/06/2017, 11h53
kate59

ne peut on pas recuperer le code source complet d'un projet http://jsfiddle.net merci
27/06/2017, 11h54
kate59

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
27/06/2017, 11h58
SpaceFrog

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 ?
27/06/2017, 12h08
kate59

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.
28/06/2017, 08h31
kate59

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

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:

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.