Q&A
ずっと縦になっている際には、コンソールでエラーは表示されていますか？されている場合、エラー内容を教えていただきたいです。
【困っていること】
slick.jsを利用して、5枚の写真を横スクロールできるようにしています。
ただ時々、縦に表示されてしまうページがあります。
よく、一瞬縦になってしまうという症状に関して記載しているページはありますが、
一瞬ではなく、F5で更新をかけるまでずっと縦になっている状態です。
【ページの表示のさせ方】
iframeのload.jsで、slick.jsを記載しているhtml(※slick用HTML)を読み込みし、表示
全ページの上部で、上記のiframeを表示
※以降、slick用HTMLと記載
(イメージ)
下記のエラーが出ています。
Failed to load resource: the server responded with a status of 404 ()
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
ちなみに、iframeのリンクを直打ちして表示させるときは、縦になることはありません。
iframeを入れたページを表示したときだけ、発生します。
slickに関連するスタイルを当てているCSSでMIMEタイプの指定をせずに読み込んでいるものがあったりするのかなと思ったのですが、あっっているのか断定はできないですね。
できればコードをのせていただけないでしょうか。
ありがとうございます。載せられない部分はカットして載せます。
【slick用HTML】
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="slick/slick.js"></script>
<style>
.slick-initialized{
display: block; /*slick-initializedが付与されたら表示*/
}
#slider_event .draggable {
width: 980px;
margin: 0 auto !important;
}
#slider_event {
margin: 10px 0 20px;
width: 1045px;
}
#slider_event div {
margin-right: 13px;
}
#slider_event div img {
width: 185px;
}
#slider_event div img:hover {
opacity: 0.8;
}
#slider_event .slick-prev span {
display: block;
width: 44px;
height: 52px;
left: -15px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 60px;
position: absolute;
background-repeat: no-repeat;
top: 41%;
}
#slider_event .slick-next span {
display: block;
width: 44px;
height: 52px;
left: -15px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 60px;
position: absolute;
background-repeat: no-repeat;
top: 41%;
}
#slider_event .slick-prev, .slick-next {
width: 28px;
}
#slider_event .slick-prev span:hover,
#slider_event .slick-next span:hover {
opacity:0.8;
}
@media screen and (max-width: 599px){
#slider_event {
display: -ms-flexbox;
display: flex;
margin: 0 auto;
width: 95%;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
#slider_event div {
margin: 0 5px 20px 0;
text-align: center;
position:relative;
list-style-type: none;
}
#slider_event div:last-child {
margin-right: 0;
}
#slider_event div img {
margin: 0;
width: 110px;
height: 110px;
}
}
</style>
<body>
<div id="slider_event" class="bon">
<!--タイマー-->
<div class="slick-slide img1"><a href="XXX" target="_blank"><img src="XXX"></a></div>
<div class="slick-slide img2"><a href="XXX" target="_blank"><img src="XXX"></a></div>
<div class="slick-slide img3"><a href="XXX" target="_blank"><img src="XXX"></a></div>
<div class="slick-slide img4"><a href="XXX" target="_blank"><img src="XXX"></a></div>
</div>
<script type="text/javascript">
var startday =[];
var endday = [];
startday[1] = new Date('2020/11/09 00:00');
endday[1] = new Date('2020/11/09 23:59');
startday[2] = new Date('2020/10/04 20:00');
endday[2] = new Date('2020/11/11 09:59');
startday[3] = new Date('2020/11/04 20:00');
endday[3] = new Date('2020/11/11 01:59');
startday[4] = new Date('2020/10/01 00:00');
endday[4] = new Date('2020/10/01 23:59');
var today = new Date();
for(i=1;i<=15;i++){
if(startday[i] > today || today > endday[i] ){
$('.img'+i).remove();
}
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.bon').slick({
infinite: true,
autoplay: false,
slidesToShow: 5,
slidesToScroll: 1,
dots: false,
centerMode: false,
variableWidth: true,
arrows:true,
prevArrow: '<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button"><span>Previous</span></button>',
nextArrow: '<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button"><span>Next</span></button>',
draggable: true,
fade:false,
respondTo: 'window',
responsive: [
{
breakpoint: 599,
settings: 'unslick'
}
]
});
});
</script>
【iframe】
<link rel="stylesheet" href="style_all.css?a" hreflang="ja" media="all">
<script type="text/javascript" src="js/openwin.js"></script>
<script type="text/javascript" src="js/search.js" charset="euc-jp"></script>
<script type="text/javascript" src="js/random.js" language="JavaScript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/pointTimer.js"></script>
<link rel="stylesheet" type="text/css" href="slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" media="screen" />
<script src="slick/slick.js"></script>
</head>
<body>
<div id="header_1045" style="margin:0 auto;background-color:#fff;">
<div id="box"></div>
</div>
<script>
$(function() {
$("#box").load("slick用HTML");
});
</script>
</body>
</html>
【全頁】
<iframe src="iframe" id="XXX" class="for_rms" name="ヘッダー" frameborder="0" scrolling="no">この部分はインラインフレームで表示しています</iframe>
回答1件
0
1つだけtype指定があります。
こちらにtypeを追加することで変化ないでしょうか。
diff
1-<link rel="stylesheet" href="style_all.css?a" hreflang="ja" media="all"> 2+<link rel="stylesheet" type="text/css" href="style_all.css?a" hreflang="ja" media="all">
投稿2020/11/10 03:04
総合スコア1135
ご回答ありがとうございます。いただいた内容を修正して、少し改善した気もするのですが、
まだ縦に表示されることがございます。
そのとき必ずコンソールに下記エラーがでます。
Failed to load resource: the server responded with a status of 404 ()
もし改善できることがあれば教えてください。
>Failed to load resource: the server responded with a status of 404 ()
こちらのエラーの右端にファイル名が表示されていないでしょうか？あれば教えていただきたいです。
エラーの内容的には、そのファイルが読み込めていないというものです。
あなたの回答
tips
プレビュー
