質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3899閲覧

jQueryで縦方向に移動するスライダーを作成したい

ky_46

総合スコア92

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/03/13 08:09

###前提・実現したいこと
縦方向に手動で移動するスライダーを作成したいです。

HTML

1<!doctype html> 2<html> 3<head> 4 <style type="text/css"> 5 .slider .slide { 6 width: 498px; 7 height: 198px; 8 border: 1px solid #f00; 9 float: left; 10 } 11 .slider .slideSet { 12 position: absolute; 13 } 14 .slider { 15 width: 500px; 16 height: 200px; 17 overflow: hidden; 18 position: relative; 19 } 20 </style> 21<meta charset="utf-8"> 22<title>jQueryを使ったスライダー</title> 23<script src="../common/jquery/jquery-3.1.1.min.js"></script> 24</head> 25 26<body> 27 28<!-- ここにHTML --> 29 30<div class="slider"> 31 <div class="slideSet"> 32 <div class="slide">slide1</div> 33 <div class="slide">slide2</div> 34 <div class="slide">slide3</div> 35 <div class="slide">slide4</div> 36 <div class="slide">slide5</div> 37 </div> 38</div> 39<button class="slider-prev">前へ</button> 40<button class="slider-next">次へ</button> 41<!-- ここにjQuery --> 42 <script> 43 var slideWidth = $('.slide').outerWidth(); // .slideの幅を取得して代入 44 var slideNum = $('.slide').length; // .slideの数を取得して代入 45 var slideSetWidth = slideWidth * slideNum; // .slideの幅×数で求めた値を代入 46 $('.slideSet').css('width', slideSetWidth); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 47 var slideCurrent = 0; // 現在地を示す変数 48 49 // アニメーションを実行する独自関数 50 var sliding = function(){ 51 // slideCurrentが0以下だったら 52 if( slideCurrent < 0 ){ 53 slideCurrent =0 ; 54 55 // slideCurrentがslideNumを超えたら 56 }else if( slideCurrent > slideNum - 1){ // slideCUrrent >= slideNumでも可 57 slideCurrent = slideNum - 1; 58 59 } 60 61 $('.slideSet').stop().animate({ 62 left: slideCurrent * -slideWidth 63 }); 64 65 $('.slideSet').animate({ 66 left: slideCurrent * -slideWidth 67 }); 68 } 69 70 // 前へボタンが押されたとき 71 $('.slider-prev').click(function(){ 72 slideCurrent--; 73 sliding(); 74 }); 75 76 // 次へボタンが押されたとき 77 $('.slider-next').click(function(){ 78 slideCurrent++; 79 sliding(); 80 }); 81 </script> 82</body> 83</html> 84

ネットで検索した結果、jQueryを使ったスライダーの作り方とその仕組みというサイトに行き着き、習作としてこのサイトのコードを打ち込んで動作を確認してみました。
http://apoc.jp/jquery-slider-howto/

これを90°変換して、縦方向のスライダーにして、上下にコンテンツがスライドしてくれればと思います。

###試したこと

html

1<!doctype html> 2<html> 3<head> 4 <style type="text/css"> 5 .slider .slide { 6 width: 498px; 7 height: 198px; 8 border: 1px solid #f00; 9 } 10 .slider .slideSet { 11 position: absolute; 12 } 13 .slider { 14 width: 500px; 15 height: 200px; 16 overflow: hidden; 17 position: relative; 18 19 } 20 21 </style> 22<meta charset="utf-8"> 23<title>jQueryを使ったスライダー</title> 24<script src="../common/jquery/jquery-3.1.1.min.js"></script> 25</head> 26 27<body> 28 29<!-- ここにHTML --> 30 31<div class="slider"> 32 <div class="slideSet"> 33 <div class="slide">slide1</div> 34 <div class="slide">slide2</div> 35 <div class="slide">slide3</div> 36 <div class="slide">slide4</div> 37 <div class="slide">slide5</div> 38 </div> 39</div> 40<button class="slider-next">次へ</button> 41<!-- ここにjQuery --> 42 <script> 43 var slideheight = $('.slide').outerheight(); // .slideの高さを取得して代入 44 var slideNum = $('.slide').length; // .slideの数を取得して代入 45 var slideSetheight = slideheight * slideNum; // .slideの幅×数で求めた値を代入 46 $('.slideSet').css('height', slideSetheight); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 47 48 // アニメーションの実行 49 var sliding = function(){ 50 $('.slideSet').animate({ 51 height: +slideheight 52 }); 53 } 54 55 $('.slider-next').click(function(){ 56 sliding(); 57 }); 58 59 </script> 60</body> 61</html>

のように、CSSの高さ指示の heightを書き換えれば、縦方向に移動するのでは?と考えたのですが、何か思い違いをしているのか、これではうまく動作しません。

元の横方向では、ボタンでスライドするので、縦方向に移動するスライダで、なにか間違っている事がありましたらご指摘いただければと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  1. $.outerheight ではなく $.outerHeight

エラーを見ましょう。 http://eng-entrance.com/javascript-display-error
0. $.animate で動かすべきは height ではなく top
0. $.animate+slideheight とか指定しても加算されない。
0. slideCurrent が実装されていないのでそもそも動かない。

このあたりを見直してください。

投稿2017/03/14 02:33

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ky_46

2017/03/14 15:14

ご回答ありがとうございました。 今回の情報は正直助かりました。 JavaScriptはいくつか組んだ事があるのですが、エラーの確認の仕方を知らなかった為、試行錯誤の繰り返しでしたので、大変助かりました。 エラー画面で確認しつつ、サンプルページを見ながら変数などを追加した結果、縦スクロールできるようになりました。 ありがとうございました。 <!doctype html> <html> <head> <style type="text/css"> .slider .slide { width: 498px; height: 198px; border: 1px solid #f00; } .slider .slideSet { position: absolute; } .slider { width: 500px; height: 200px; overflow: hidden; position: relative; } </style> <meta charset="utf-8"> <title>jQueryを使ったスライダー</title> <script src="../common/jquery/jquery-3.1.1.min.js"></script> </head> <body> <!-- ここにHTML --> <div class="slider"> <div class="slideSet"> <div class="slide">slide1</div> <div class="slide">slide2</div> <div class="slide">slide3</div> <div class="slide">slide4</div> <div class="slide">slide5</div> </div> </div> <button class="slider-prev">前へ</button> <button class="slider-next">次へ</button> <!-- ここにjQuery --> <script> var slideheight = $('.slide').outerHeight(); // .slideの高さを取得して代入 var slideNum = $('.slide').length; // .slideの数を取得して代入 var slideSetheight = slideheight * slideNum; // .slideの幅×数で求めた値を代入 $('.slideSet').css('height', slideSetheight); // .slideSetのスタイルシートにwidth: slideSetWidthを指定 var slideCurrent =0; // 現在地を示す変数 // アニメーションを実行する独自関数 var sliding = function(){ // slideCurrentが0以下だったら if( slideCurrent < 0 ){ slideCurrent = 0; // slideCurrentがslideNumを超えたら }else if( slideCurrent > slideNum - 1){ slideCurrent = slideNum - 1; } $('.slideSet').stop().animate({ top: slideCurrent * -slideheight }); } // 前へボタンが押されたとき $('.slider-prev').click(function(){ slideCurrent--; sliding(); }); // 次へボタンが押されたとき $('.slider-next').click(function(){ slideCurrent++; sliding(); }); </script> </body> </html>
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問