非レスポンシブスライダー | 京都でホームページ制作『みやこデザイン』

動いたのでとりあえずメモ。
HTML

<div class="slidercontainer">
<ul id="slider">
<li class="slide selected"><img src="" alt="" width="" height="" /></li>
<li class="slide"><img src="" alt="" width="" height="" /></li>
<li class="slide"><img src="" alt="" width="" height="" /></li>
<li class="slide"><img src="" alt="" width="" height="" /></li>
</ul>
<button id="prev">前のスライド</button>
<button id="next">次のスライド</button>
<div style="clear:both"></div>
</div>

</ul>

<button id="prev">前のスライド</button>

<button id="next">次のスライド</button>

</div>

スタイル

.slidercontainer {
   margin:100px auto;
   padding:10px;
   width:487px;/*スライド幅+22ピクセル*/
   border:1px solid #ccc;
   }
 
#slider {
   display:block;
   width:100%;
   height:261px;/*スライド高さ*/
   padding:0;
   margin:0 0 10px;
   overflow:hidden;
   }  
 
#prev, #next {
   bottom:0;
   display:block;
   width:120px;
   background-color:#00ABFF;
   padding:5px;
   border:none;
   font-size:17px;
   color:#fff;
   }
 
#prev {
   float:left;
   }
 
#next {
   float:right;
   }

.slidercontainer {

margin:100px auto;

padding:10px;

width:487px;/*スライド幅+22ピクセル*/

border:1px solid #ccc;

}

#slider {

display:block;

width:100%;

height:261px;/*スライド高さ*/

padding:0;

margin:0 0 10px;

overflow:hidden;

}

#prev, #next {

bottom:0;

display:block;

width:120px;

background-color:#00ABFF;

padding:5px;

border:none;

font-size:17px;

color:#fff;

}

#prev {

float:left;

}

#next {

float:right;

}

jQuery

$(function(){
var $first = $('li:first', 'ul#slider'),
    $last = $('li:last', 'ul#slider');

$("#next").click(function () {
     var $next,
        $selected = $(".selected");
    $next = $selected.next('li').length ? $selected.next('li') : $first;
    $selected.removeClass("selected").fadeOut('fast');
    $next.addClass('selected').fadeIn('fast');
});

$("#prev").click(function () {
    var $prev,
        $selected = $(".selected");
    $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
    $selected.removeClass("selected").fadeOut('fast');
    $prev.addClass('selected').fadeIn('fast');
});
});

$(function(){

var $first = $('li:first', 'ul#slider'),

$last = $('li:last', 'ul#slider');

$("#next").click(function () {

var $next,

$selected = $(".selected");

$next = $selected.next('li').length ? $selected.next('li') : $first;

$selected.removeClass("selected").fadeOut('fast');

$next.addClass('selected').fadeIn('fast');

});

$("#prev").click(function () {

var $prev,

$selected = $(".selected");

$prev = $selected.prev('li').length ? $selected.prev('li') : $last;

$selected.removeClass("selected").fadeOut('fast');

$prev.addClass('selected').fadeIn('fast');

});

ulで高さを設定しているので、レスポンシブにしようと思えば、スライドの高さを取得してインラインに書き足せばいいってことか。もうちょっとスマートにできないかなお調査。レスポンシブじゃなかったら動くよ～。幅狭めると、コンテナにマックスウィドス設定しても縦がでちゃう。
あ、なるほど。ということは、スライドを横一列にして非表示にさせるって方法があるね。4枚のスライドをCSSで横に並べる。それなら動くかも。。。でも今日は別の仕事あるからやるなら明日だす。