こんにちは！
Oigamiです！
今日は以前からやってみたかった
透過した画像をスライドさせる方法を試してみます
bxslider
数あるJQueryスライダーの中でも、比較的初心者向けのbxsliderを使用して
作成していきます
bxsliderの導入方法はこちら
まずは基本的なoptionの設定
<script type=”text/javascript”>
$(document).ready(function(){
$(‘.bxslider’).bxSlider({
pager:false,<!–ページ送りを表示するかどうか–>
auto:true,<!–自動スライドの設定–>
controls:false,<!–コントロールを表示するかどうか–>
pause:4000 <!–ページ送りの秒数–>
});
});
</script>
横スライドで、その他の装飾は無しになるように設定します
ただこのままですと、妙な枠線やドロップシャドウがデフォルトで付いていますので
bxsliderのCssを少しいじります
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
left: -5px
background: #fff;
}
この赤字部分ですね。ここをコメントアウトします。
次に透過ですが、上記を見ていただけると分かるのですが、デフォルトの設定では
background: #fff;
で背景色が白になっていますので、
background-color:transparent;
に変えて透過させます。
.bx-wrapper .bx-viewport {
/*-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
left: -5px;*/
background-color:transparent;｝
こんな感じにします
次にベースとなる部分を入れていきます
ｈｔｍｌで
<div id=”mainvisual”>
<ul class=”bxslider”>
<li class=”main”><img src=”images/mainvusual01.png” alt=”メインの写真01″></li>
<li class=”main”><img src=”images/mainvusual02.png” alt=”メインの写真02″></li>
</ul>
</div>
<!–#Mainvisual end–>
スライドする部分をこの様にマークアップしていますので、
このmainvisualの部分に背景画像でベースとなる画像を入れます
CSSで
#mainvisual {
background: url(../images/mainvusual.jpg) center no-repeat;
}
これでベースの部分は固定で透過して画像がスライドするようになります。
企業実習が終わるまでにはなんとか公開出来る様にがんばります！
ここまで見てくださってありがとうございます
by Oigami