日: 2016年1月8日 | みやこデザイン｜京都のWEB＆SEOコンサルティングオフィス

非レスポンシブスライダー

動いたのでとりあえずメモ。 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 [crayon-68508…

2016年1月8日カスタマイズBy takaomi

Daily Archives: 2016年1月8日

非レスポンシブスライダー