前提・実現したいこと
bxsliderで写真のスライドを作っています。
実装はされるのですが、サイト読み込み時に画像がずれてしまい、通常最後の画像が最初に来てしまいます。
発生している問題・エラーメッセージ
毎回ということはなく、一度サイトをどこか移動してまた読み込み直すと正常に動きますが、二回に一回は読み込み時、画像がずれる、且つサイズが少し縮小され2枚目の画像が見切れている。 常時正常に動いて欲しいので困っています。 ```![エラー時の状態]() ![正常の状態]()
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="apple-mobile-web-app-capable" content="yes"/> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.fitvids.js"></script> <script src="js/jquery.bxslider.min.js"></script> <link rel="stylesheet" href="css/jquery.bxslider.css"/> <style type="text/css"> body { /* 画像ファイルの指定 */ background-image: url(images/ilust/sato.png); /* 画像を常に天地左右の中央に配置 */ background-position: center center; /* 画像をタイル状に繰り返し表示しない */ background-repeat: no-repeat; /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */ background-attachment: fixed; /* 表示するコンテナの大きさに基づいて、背景画像を調整 */ background-size: cover; /* 背景画像が読み込まれる前に表示される背景のカラー */ background-color: #ffffff; } .slider { position: relative; margin-top: 10p; vertical-align: middle; background-color: rgba(255,0,0,0); } .bx-wrapper { margin: 0 !important; position: relative; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: none !important; background: none !important; } .balloon1 { position: relative; display: inline-block; margin-top: 100px; margin-left: 50px; padding: 10px 10px; min-width: 120px; max-width: 100%; line-height: 100px; max-height: 100%; color: #555; background: #fff; border-radius: 30px; text-align: center; border: solid 3px #000000; transition: 1s; -webkit-transition: 1s; transform-origin: bottom; } .balloon1:before{ content: ""; position: absolute; top: 99%; left: 30%; margin-left: -15px; border: 12px solid transparent; border-top: 12px solid #fff; z-index: 2; } .balloon1::after { display: block; content: ""; padding-top: 100%; position: absolute; bottom: -30px; top: 100%; left: 30%; margin-left: -17px; border: 14px solid transparent; border-top: 14px solid #000000; z-index: 1; } .balloon1 p { position: relative; display: inline-block; text-align: center; vertical-align: middle; color:#d36a15; } .balloon1:hover{ transform: scale(2); font-size: 7px; } .first, .second { width: 100%; position: absolute; top: 0; left: 0; } .first { opacity: 1; font-size: 16px; } .second { opacity: 0; } .balloon1:hover .first { opacity: 0; } .balloon1:hover .second { opacity: 1; } .gif { margin-top: 10px; margin-bottom: 10px; margin-right: 50px; } </style> <script> var roomSt = "sato"; $(document).ready(function(){ $.get("kick.php", {room:roomSt, num:0}); $('.slider').bxSlider({ auto: false, pause: 5000, speed: 1000, mode: 'horizontal', pager:false,//下の●●●● slideWidth: 600, slideHeight: 700, onSliderLoad: function() { }, onSlideAfter: function($slideElement, oldIndex, newIndex) { console.log(newIndex); $.get("kick.php", {room:roomSt, num:newIndex}); } }); }); </script> </head> <body> <script type="text/javascript"> $(function(){ // サイトアクセス時にbodyを非表示にしてから、フェードインさせる $('#wrapper').hide(); $('#wrapper').fadeIn(2000); // リンククリック時にフェードアウトしてから、画面遷移する $('a.fadelink').click(function(){ // URLを取得する var url = $(this).attr('href'); // URLが空ではない場合 if (url != '') { // フェードアウトしてから、取得したURLにリンクする $('#wrapper').fadeOut(1000); setTimeout(function(){ location.href = url; }, 1000); } return false; }); }); </script> <div id="wrapper"> <div style="float: left; margin-top: 25px;"> <ul class="slider"> <li><img src="images/photo/sato/0.png"></li> <li><img src="images/photo/sato/1.png"></li> <li><img src="images/photo/sato/2.png"></li> <li><img src="images/photo/sato/3.png"></li> </ul> </div>
試したこと
sliderのcssに
padding: 0;
margin: 0;
を入れてみたが変わらず。
補足情報(FW/ツールのバージョンなど)
sliderとは関係ないコードもありますが、それが関係してる可能性も踏まえて全て入れています。