楽天トラベルのカスタマイズページで画像スライダーを使う方法

楽天トラベルのカスタマイズページでは、外部のjQueryが使えません。

「本サイトと同じようにトップページにはスライダーを使いたいのに！」という人もいるのではないでしょうか…。

実装できるやり方があるのでご紹介します！

実は、楽天トラベル内で使用できるjQueryライブラリがあります。

https://img.travel.rakuten.co.jp/share/common/js/lib/jquery/jquery.js

jQueryバージョン1.5.2ですが。。。

これを使って、Javascriptを記述します。

JavascriptとHTML

<script type="text/javascript" charset="Shift_JIS" src="https://img.travel.rakuten.co.jp/share/common/js/lib/jquery/jquery.js"></script>
<script type="text/javascript">
    var flg=1;
    $(function(){

        setInterval(function() {
        	$(".img0"+flg).fadeOut(3000);
        	if(flg == 7){
        		$(".img01").fadeIn(3000);
        	}else{
        		$(".img0"+(flg+1)).fadeIn(3000);
        	}
        	flg++;
        	if(flg > 7){
        		flg=1; 
        	}
        }, 5000);
    });
    $(function(){
    var biggestHeight = "0";
    $("#slider *").each(function(){
        if ($(this).height() > biggestHeight ) {
            biggestHeight = $(this).height()
        }
    });
    $("#slider").height(biggestHeight);
})
</script>

<div id="slider">
  <div class="inner">
    <div><img class="img01" src="https://www.example.com/images/slider_01.jpg" alt=""></div>
    <div><img class="img02" src="https://www.example.com/images/slider_02.jpg" alt=""></div>
    <div><img class="img03" src="https://www.example.com/images/slider_03.jpg" alt=""></div>
    <div><img class="img04" src="https://www.example.com/images/slider_04.jpg" alt=""></div>
    <div><img class="img05" src="https://www.example.com/images/slider_05.jpg" alt=""></div>
    <div><img class="img06" src="https://www.example.com/images/slider_06.jpg" alt=""></div>
    <div><img class="img07" src="https://www.example.com/images/slider_07.jpg" alt=""></div>
  </div>
</div>
<!-- /#slider -->

CSS

#slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
#slider .inner {
  width: 100%;
  overflow: hidden;
}
#slider .inner img {
  display: none;
  position: absolute;
  left: 0;
}
#slider .inner .img01 {
  display: block;
}

画像のパスは環境に合わせて変更してください。

2017年7月から、楽天トラベル全体がSSL化されるため、画像のパスもhttpsでないと登録できなくなりました。

自分のサイトにSSLを契約して画像やCSSを読み込むか、楽天トラベル内にアップロードして使用してくださいね。