jQueryのslickを使用したところ、スライド先のページにスライド前のページで入れたい画像が表示されてしまい、スライド前のページに画像が表示されません。
解決策をご教授ください。
以下は使用したコードになります。
※mypageStartで使用しているEnd_transition.pngはスライド前のページで表示されています。
スライド前のページで表示させたいlogoSで使用しているlogoS.pngがスライド後のページで表示されています。
<html>
<head>
<link rel="stylesheet" type="text/css" href="././css/slick-1.8.1/slick/slick-theme.css"/>
<link rel="stylesheet" type="text/css" href="././css/slick-1.8.1/slick/slick.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="././css/slick-1.8.1/slick/slick.min.js"></script>
<title>Mypage</title>
</head>
<style>
body {
font-family: 'Noto Sans JP', sans-serif;
font-size: 16pt; color: #696969;
background-color: #ffffff;
height:100%;
position:relative;
}
.mypageStart {
background-image: url("././images/End_transition.png");
background-repeat: no-repeat;
background-position: left 500px;
}
.mypageEnd {
background-image: url("././images/Start_transition.png");
background-repeat: no-repeat;
background-position: right 500px;
}
.topS {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 50px;
}
.logoS {
position: relative;
margin: 0 0 0 0;
height:100px;
background-image: url("././images/logoS.png");
background-repeat: no-repeat;
background-position: center 50px;
}
.logoS p {
margin: 0;
padding: 0;
}
.topE {
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 50px;
}
.logoE {
position: relative;
margin: 0 0 0 0;
height:100px;
background-image: url("././images/logoE.png");
background-repeat: no-repeat;
background-position: center 50px;
}
.logoE p {
margin: 0;
padding: 0;
}
</style>
<body>
<div class="single">
<div class="mypageStart">
<div class="topS">
<div class="logoS">
</div>
</div>
</div>
<div class="mypageEnd">
<div class="topE">
<div class="logoE">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.single').slick({
});
});
</script>
</body>
</html>
Q&A
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。