###前提・実現したいこと
縦方向に手動で移動するスライダーを作成したいです。
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を書き換えれば、縦方向に移動するのでは?と考えたのですが、何か思い違いをしているのか、これではうまく動作しません。
元の横方向では、ボタンでスライドするので、縦方向に移動するスライダで、なにか間違っている事がありましたらご指摘いただければと思います。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/03/14 15:14