Q&A
プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）また、エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error
宜しくお願い致します。
owlCarouselを使用して画像が横にスライドするケースを作ってみたいと思っています。
何度もやってみたのですが、owlCarouselのスライダーが動かなくて困っています。
コードのどこかに間違いがありましたら教えて頂けると幸いです。
宜しくお願い致します。
HTML
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5<meta charset="UTF-8"> 6<title>Ａサイト</title> 7<meta name="keywords" content=""> 8<meta name="description" content=""> 9<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 10 11<link rel="stylesheet" href="normalize.css"> 12<link rel="stylesheet" href="style.css"> 13<link rel="stylesheet" href="owl.carousel.css"> 14<link rel="stylesheet" href="owl.theme.default.min.css"> 15 16<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 17<script type="text/javascript" src="owl.carousel.js"></script> 18 19<script> 20 $(document).ready(function() { 21 $("#slider1").owlCarousel(); 22}); 23</script> 24 25 </head> 26<body> 27 28 <ul id="slider1"> 29 30 <li><img src="sample.png.png" /></li> 31 <li><img src="sample.png.png" /></li> 32 <li><img src="sample.png.png" /></li> 33 <li><img src="sample.png.png" /></li> 34 35 36 </ul> 37 38</body> 39</html> 40
回答3件
0
スライド自体が全く動作しないのであればどこかで致命的なエラーが発生している可能性が高いです。
GoogleChromeでページを開き、F12でDevToolsを開き、下部「Console」を見てみてください。
ソースを見た感じではowl.carousel.jsが読み込めていない感じがします。
また、スライド化するDOMオブジェクトはID指定（#slide1）ではなくクラス指定（.slide1）に変更したほうがよいでしょう。
投稿2018/06/26 01:27
総合スコア128
0
ベストアンサー
動くサンプル：https://jsfiddle.net/3auershg/
owl.carousel.js の読み込みに失敗していなければ、 class="owl-carousel"を付ければ動きます。
投稿2018/06/25 18:06
総合スコア69407
0
投稿2018/06/25 17:38
総合スコア351
あなたの回答
tips
プレビュー
