※ ChatGPTを利用し、要約された質問です(原文:Jqueryスライダーが動きません。)
Jqueryスライダーが動かない! FlexSlider2を使った簡単な解決方法
このQ&Aのポイント
Jqueryスライダーが動かない原因として、FlexSlider2の設定に問題がある可能性があります。
画像は表示されるがスライドにならず、上下に出てしまう現象が発生しています。
解決方法としては、FlexSlider2の設定にanimationプロパティを追加することでスライドが可能になります。
WEB制作の素人です。
簡単といわれている「FlexSlider2」ですが、私がやったところ、
画像は出たもののスライドにならず、そのまま上下に出てしまいます。
一度見ていただき、間違えを教えていただけますか?
(ちなみにスムーススクロールは動きます)
<!-- TemplateEndEditable -->
<link href="../common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/smoothScroll.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="../js/jquery.flexslider-min.js"></script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
pauseOnAction: false,
slideshowSpeed: 3000
});
});
</script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<!-- TemplateParam name="id" type="text" value="index_page" -->
</head>
<body id="@@(id)@@">
<div id="wrapper">
<!---ヘッダー--->
<div id="header">
<h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1>
</div>
<p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p>
<!---トップ画像--->
<div id="main_visual">
<div class="flexslider">
<ul class="slides">
<li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li>
<li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li>
</ul>
</div>
</div>
よろしくお願いします。
お礼
ありがとうございました