サイトで jQuery Cycle2 プラグインを使用しようとしていますが、jQuery を初めて使用するため、トラブルシューティングが非常に困難です。JavaScript コンソールにエラーは表示されません。私のコードは以下にあり、検証に合格した jsfiddle here も作成しました。ローカルで動作しますが、OpenCMS にプラグインすると、カルーセル内のスライドがコンテナーから外れて 100% のサイズになり、何もクリックできなくなります (つまり、特大のカルーセル画像をクリックしても、最初の div のスライドは変更されません)。すべての後ろに座っている）。
これをプラグインしているサイトは jQuery 1.3.2 を実行しており、それを変更または更新する機能がないため、noConflict を使用しました。noConflict を使用する前は、サイトの他の部分が壊れていて、スライダーが機能しませんでした。サイトの他の部分は問題ありませんが、スライダーはまだ機能しません。
スライダーは div の data 属性を使用してオプションを渡しますが、サイトの doctype が XHTML 1.0 であるため、機能していないのではないかと思いました。しかし、作業しているサイトに合わせてローカル ファイルのドキュメント タイプを変更しても、スライダーは引き続き機能します。
また、こちらの手順に従ってオプションをプログラムで設定しようとしましたが、ローカル マシンでも機能しませんでした...コードを適切に記述するのに十分な JavaScript を知らないと思います。
私は困惑しており、経験が浅すぎて、助けなしでこれをトラブルシューティングする方法を知ることができません. 何か案は？
ありがとうございました。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Soleil Cycle2 Carousel Pager</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.cycle2.js"></script>
<script type="text/javascript" src="../js/jquery.cycle2.carousel.js"></script>
<script type="text/javascript">
var jQuery_1_9_0 = $.noConflict(true);
jQuery_1_9_0(document).ready(function($){
var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
slideshows.not(this).cycle('goto', opts.currSlide);
});
$('#cycle-2 .cycle-slide').click(function(){
var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
slideshows.cycle('goto', index);
});
});
</script>
<style type="text/css">
#soleil-intro * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#soleil-intro #cycle-1 div { width:950px; }
#soleil-intro #cycle-2 .cycle-slide { border:3px solid #fff; }
#soleil-intro #cycle-2 .cycle-slide-active { border:3px solid #f6d609; }
#soleil-intro #soleil-slideshow-1 { max-width: 980px; margin: auto; z-index: 1; position: relative; }
#soleil-intro #soleil-slideshow-2 { max-width: 940px; margin: auto; z-index: 1; position: relative; margin-top: 10px; }
#soleil-intro .cycle-slideshow img { width: 100%; height: auto; display: block; }
#soleil-intro .arrow {float: left; width: 15px; position: relative; top: 200px;}
</style>
</head>
<body>
<div id="soleil-intro">
<div id="soleil-slideshow-1">
<p class="arrow">
<a href="#" class="cycle-prev">«</a>
</p>
<div style="float: left;" id="cycle-1" class="cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="0"
data-cycle-prev="#soleil-slideshow-1 .cycle-prev"
data-cycle-next="#soleil-slideshow-1 .cycle-next"
data-cycle-fx="scrollHorz"
>
<div><img src="../soleil1.jpg" width="980" height="425"></div>
<div><a href="test.html"><img src="../soleil2.jpg" width="980" height="425"></a></div>
<div><img src="../soleil3.jpg" width="980" height="425"></div>
<div><img src="../soleil4.jpg" width="980" height="425"></div>
<div><img src="../soleil5.jpg" width="980" height="425"></div>
<div><img src="../soleil3.jpg" width="980" height="425"></div>
<div><img src="../soleil4.jpg" width="980" height="425"></div>
</div>
<p class="arrow">
<a href="#" class="cycle-next"><img src="../arrow.gif" style="display:inline;" alt="arrow" height="12" width="16" border="0" /></a>
</p>
</div>
<div style="clear: both;"></div>
<div id="soleil-slideshow-2" style="clear: both;">
<div id="cycle-2" class="cycle-slideshow"
data-cycle-slides="> div"
data-cycle-timeout="0"
data-cycle-prev="#soleil-slideshow-2 .cycle-prev"
data-cycle-next="#soleil-slideshow-2 .cycle-next"
data-cycle-fx="carousel"
data-cycle-carousel-visible="3"
data-cycle-carousel-fluid="true"
data-allow-wrap="false"
>
<div><img src="../soleil1.jpg" width="100" height="100"></div>
<div><img src="../soleil2.jpg" width="100" height="100"></div>
<div><img src="../soleil3.jpg" width="100" height="100"></div>
<div><img src="../soleil4.jpg" width="100" height="100"></div>
<div><img src="../soleil5.jpg" width="100" height="100"></div>
<div><img src="../soleil3.jpg" width="100" height="100"></div>
<div><img src="../soleil4.jpg" width="100" height="100"></div>
</div>
</div>
</div> <!-- #soleil-intro -->
</body>
</html>