質問編集履歴

4 リンク忘れをなおしました

2lm_ykd

2lm_ykd score 2

2016/08/20 11:23  投稿

Swiper.jsのアニメーションが動かない
###前提・実現したいこと
初めて質問させていただきます。
いつもプラグインをコピーペーストしてサイトに使用している初心者なのですが、
Swiper.jsの紹介ページを読み、
[http://on-ze.com/archives/4213](http://on-ze.com/archives/4213)
で紹介されていたソースをコピペして
自身のサイトに入れたいのですが、うまく動きません。
現状は
[http://ratum.web.fc2.com/demo10.html](http://ratum.web.fc2.com/demo10.html)
![イメージ説明](989b7440e8407984836b9cefb915d5e4.png)
となっているのですが、何を直せばいいのかわからない状態です。
他にも、プラグインを紹介ページから
コピーペーストをしているのですが、動かなくて頭を抱えています。
よろしければ初心者がコピペをして起こり得る
動かない失敗の原因なども教えていただけたら幸いです。
よろしくお願いいたします。
###発生している問題・エラーメッセージ
左右に青いバーが出るのですが
クリックしてもアニメーションができません。
フレームワークは
https://github.com/jalxob/cool-kitten
[https://github.com/jalxob/cool-kitten](https://github.com/jalxob/cool-kitten)
を使用しています。
スライド2のclass内にSwiper.jsを使用したいです。
###該当のソースコード
```ここに言語を入力
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
       <div class="container clearfix">
       
         <div id="content" class="grid_12">
                                         <script src="swiper.min.js"></script>
                                          <script>
                                           var swiper = new Swiper('.swiper-container');
                                           </script>
                                                       
                                           <div class="swiper-container">
                               <div class="swiper-wrapper">
                               
                                   <div class="swiper-slide">
                                       <img src="css/demo116.gif" width="600" height="380">   </div>
                               
                                   <div class="swiper-slide">
                                       <img src="css/demo116.gif" width="600" height="380">
                                   </div>
                               
                                   <div class="swiper-slide">
                                       <img src="css/demo116.gif" width="600" height="380">
                                   </div>
                               
                               </div>
                               
                                   <div class="swiper-pagination"></div>
                                   <div class="swiper-button-prev"></div>
                                   <div class="swiper-button-next"></div>
                                   <div class="swiper-scrollbar"></div>
                               
                               </div>
           </div>
       </div>
   </div>
```
###試したこと
```
<script src="swiper.min.js"></script>
                                          <script>
                                           var swiper = new Swiper('.swiper-container');
                                           </script>
```
の位置が間違っているような気がして<head>の中に入れたり...してみたのですが...
###補足情報(言語/FW/ツール等のバージョンなど)
Dwで製作しています。
headは
```
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
   <title>ratum</title>
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
   <link href='https://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
   <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
   <link rel="stylesheet" href="css/demo2.css" type="text/css" media="screen">
   <link rel="stylesheet" href="css/swiper.min.css">
   <!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
   <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
```
となっています。
  • JavaScript

    21025 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8374 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    627 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

3 修正依頼で指摘していただいた部分を幾つか直しました。

2lm_ykd

2lm_ykd score 2

2016/08/20 11:21  投稿

Swiper.jsのアニメーションが動かない
###前提・実現したいこと
初めて質問させていただきます。
いつもプラグインをコピーペーストしてサイトに使用している初心者なのですが、
Swiper.jsの紹介ページを読み、
http://on-ze.com/archives/4213
[http://on-ze.com/archives/4213](http://on-ze.com/archives/4213)
で紹介されていたソースをコピペして
自身のサイトに入れたいのですが、うまく動きません。
現状は
http://ratum.web.fc2.com/demo10.html
[http://ratum.web.fc2.com/demo10.html](http://ratum.web.fc2.com/demo10.html)
![イメージ説明](989b7440e8407984836b9cefb915d5e4.png)
となっているのですが、何を直せばいいのかわからない状態です。
他にも、プラグインを紹介ページから
コピーペーストをしているのですが、動かなくて頭を抱えています。
よろしければ初心者がコピペをして起こり得る
動かない失敗の原因なども教えていただけたら幸いです。
よろしくお願いいたします。
###発生している問題・エラーメッセージ
```  
左右に青いバーが出るのですが
クリックしてもアニメーションができません。
フレームワークは
https://github.com/jalxob/cool-kitten
を使用しています。
スライド2のclass内にSwiper.jsを使用したいです。
```
###該当のソースコード
```ここに言語を入力
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
       <div class="container clearfix">
       
         <div id="content" class="grid_12">
                                         <script src="swiper.min.js"></script>
                                          <script>
                                           var swiper = new Swiper('.swiper-container');
                                           </script>
                                                       
                                           <div class="swiper-container">
                               <div class="swiper-wrapper">
                               
                                   <div class="swiper-slide">
                                       <img src="css/demo116.gif" width="600" height="380">   </div>
                               
                                   <div class="swiper-slide">
                                       <img src="css/demo116.gif" width="600" height="380">
                                   </div>
                               
                                   <div class="swiper-slide">
                                       <img src="css/demo116.gif" width="600" height="380">
                                   </div>
                               
                               </div>
                               
                                   <div class="swiper-pagination"></div>
                                   <div class="swiper-button-prev"></div>
                                   <div class="swiper-button-next"></div>
                                   <div class="swiper-scrollbar"></div>
                               
                               </div>
           </div>
       </div>
   </div>
```
###試したこと
```  
<script src="swiper.min.js"></script>
                                          <script>
                                           var swiper = new Swiper('.swiper-container');
                                           </script>
```  
の位置が間違っているような気がして<head>の中に入れたり...してみたのですが...
###補足情報(言語/FW/ツール等のバージョンなど)
Dwで製作しています。
headは
```  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
   <title>ratum</title>
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
   <link href='https://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
   <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
   <link rel="stylesheet" href="css/demo2.css" type="text/css" media="screen">
   <link rel="stylesheet" href="css/swiper.min.css">
   <!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
   <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
   
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
```  
となっています。
  • JavaScript

    21025 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8374 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • jQueryプラグイン

    627 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

2 タグの追加

2lm_ykd

2lm_ykd score 2

2016/08/20 08:43  投稿

Swiper.jsのアニメーションが動かない
###前提・実現したいこと
初めて質問させていただきます。
いつもプラグインをコピーペーストしてサイトに使用している初心者なのですが、
Swiper.jsの紹介ページを読み、
http://on-ze.com/archives/4213
で紹介されていたソースをコピペして
自身のサイトに入れたいのですが、うまく動きません。
現状は
http://ratum.web.fc2.com/demo10.html
となっているのですが、何を直せばいいのかわからない状態です。
他にも、プラグインを紹介ページから
コピーペーストをしているのですが、動かなくて頭を抱えています。
よろしければ初心者がコピペをして起こり得る
動かない失敗の原因なども教えていただけたら幸いです。
よろしくお願いいたします。
###発生している問題・エラーメッセージ
```
左右に青いバーが出るのですが
クリックしてもアニメーションができません。
フレームワークは
https://github.com/jalxob/cool-kitten
を使用しています。
スライド2のclass内にSwiper.jsを使用したいです。
```
###該当のソースコード
```ここに言語を入力
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container');
</script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="css/demo116.gif" width="600" height="380"> </div>
<div class="swiper-slide">
<img src="css/demo116.gif" width="600" height="380">
</div>
<div class="swiper-slide">
<img src="css/demo116.gif" width="600" height="380">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</div>
```
###試したこと
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container');
</script>
の位置が間違っているような気がして<head>の中に入れたり...してみたのですが...
###補足情報(言語/FW/ツール等のバージョンなど)
Dwで製作しています。
headは
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<title>ratum</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/demo2.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/swiper.min.css">
<!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
となっています。
  • jQueryプラグイン

    627 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

  • JavaScript

    21025 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8374 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 タイトルの編集

2lm_ykd

2lm_ykd score 2

2016/08/20 08:39  投稿

Swiper.jsのプラグインをコンテンツの中で使用したい。
Swiper.jsのアニメーションが動かない
###前提・実現したいこと
初めて質問させていただきます。
いつもプラグインをコピーペーストしてサイトに使用している初心者なのですが、
Swiper.jsの紹介ページを読み、
http://on-ze.com/archives/4213
で紹介されていたソースをコピペして
自身のサイトに入れたいのですが、うまく動きません。
現状は
http://ratum.web.fc2.com/demo10.html
となっているのですが、何を直せばいいのかわからない状態です。
他にも、プラグインを紹介ページから
コピーペーストをしているのですが、動かなくて頭を抱えています。
よろしければ初心者がコピペをして起こり得る
動かない失敗の原因なども教えていただけたら幸いです。
よろしくお願いいたします。
###発生している問題・エラーメッセージ
```
左右に青いバーが出るのですが
クリックしてもアニメーションができません。
フレームワークは
https://github.com/jalxob/cool-kitten
を使用しています。
スライド2のclass内にSwiper.jsを使用したいです。
```
###該当のソースコード
```ここに言語を入力
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
<div class="container clearfix">
<div id="content" class="grid_12">
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container');
</script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="css/demo116.gif" width="600" height="380"> </div>
<div class="swiper-slide">
<img src="css/demo116.gif" width="600" height="380">
</div>
<div class="swiper-slide">
<img src="css/demo116.gif" width="600" height="380">
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
</div>
```
###試したこと
<script src="swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container');
</script>
の位置が間違っているような気がして<head>の中に入れたり...してみたのですが...
###補足情報(言語/FW/ツール等のバージョンなど)
Dwで製作しています。
headは
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
<title>ratum</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Fredoka+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/demo2.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/swiper.min.css">
<!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
となっています。
  • jQueryプラグイン

    627 questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る