UPDATE：2017.6.12
- CATEGORY
- ホームページのこと
よくあるスライダーエラー
Contents
よくあるスライダーのエラーの解決策をここに書いておきます。
まずスプリクトをfooter.phpのbodyの閉じタグの上に持ってきておきましょう。
ページ読み込み時、本来隠れる部分が一瞬だけ表示されるてしまう
#mainimgをどうにかしたい場合#mainimg {
display: none;
}$('#mainimg').fadeIn(1000)↓続く場合$(function() {
$('#mainimg').fadeIn(1000);
…以下続くbxsliderで最後のスライダーが最初に表示されてしまう
jquery.bxslider.jsに106行目らへんに「var imgWidth = el.width();」を追記。
var windowWidth = $(window).width();というコードの下に。
var windowHeight = $(window).height();
if (slider.settings.mode == 'horizontal') setPositionProperty(-position.left, 'reset', 0);を
if (slider.settings.mode == 'horizontal') setPositionProperty(-imgWidth, 'reset', 0);に修正。
slider proで画像クリックでリンク先に飛ばない場合
要素に「sp-selectable」のclassを付けることです。追加で
<script>
$(function(){
if($(window).width() > 767) { // ウインドウサイズの幅が767ピクセルよりも大きい場合
$("#my-slider .sp-slide a").each(function(){
$(this).addClass("sp-selectable").css("cursor","pointer");
});
}
});
</script>
スライダーより先に画像が読み込まれてしまって一瞬崩れて見えてしまう
headerに記述<style>
/* JavaScriptが有効な場合、対象を隠す */
html.enable-javascript .slider-pro{
visibility: hidden;
}
/* 画像すべてを読み終えたら、対象を表示する */
html.enable-javascript.window-load .slider-pro{
visibility: visible;
}
</style>
