初心者で初めて質問します。
下記のURLのcodepenによるCSS のみでサムネイルナビ付きスライダーをコピペしたのですが
画像に隙間ができてしまう原因をご教示頂ければ幸いです。他の動作には問題は有りません。
宜しくお願いします。
https://digipress.info/tech/pure-css-slider-with-thumbnails/
body {
background-color: #333;
color: #ccc;
text-align: center;
}
body a,
body a:visited {
color: #ccc;
text-decoration: none;
}
body a:hover {
color: #aaa;
}
.container {
position: relative;
margin: 0 auto;
height: 40vw;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
opacity: 0;
-webkit-animation: mainFadeIn 2s forwards 1.8s;
animation: mainFadeIn 2s forwards 1.8s;
}
.main-slider {
position: relative;
width: calc(100vw - 26vw);
height: 100%;
overflow: hidden;
}
.main-slider .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-slider .slide:target {
z-index: 3;
-webkit-animation: show 1.2s;
animation: show 1.2s;
}
.main-slider .slide:target:first-of-type {
z-index: 3;
}
.main-slider .slide:target:first-of-type .meta {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0;
}
.main-slider .slide:target .meta {
-webkit-animation: showMeta 1.2s ease .9s forwards;
animation: showMeta 1.2s ease .9s forwards;
}
.main-slider .slide:not(:target):not(:first-of-type) {
-webkit-animation: hide 1.2s ease;
animation: hide 1.2s ease;
}
.main-slider .slide:not(:target):not(:first-of-type) .meta {
-webkit-animation: hideMeta 1s ease forwards;
animation: hideMeta 1s ease forwards;
}
.main-slider .slide:first-of-type {
z-index: 1;
}
.main-slider .slide:first-of-type .meta {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
.main-slider .slide .meta {
position: absolute;
top: calc(50% - 19px);
left: 0;
padding: 0 40% 0 2.4vw;
color: #fff;
text-align: left;
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0;
}
.main-slider .slide .meta .title {
font-size: 38px;
font-weight: 800;
}
.main-slider .slide .meta .desc {
margin-top: 20px;
font-size: 15px;
}
.thumbnail-slider {
position: relative;
width: 26vw;
height: 100%;
line-height: 0;
overflow-y: auto;
}
.thumbnail-slider::-webkit-scrollbar {
width: 5px;
}
.thumbnail-slider::-webkit-scrollbar-track {
background-color: rgba(255, 255, 255, 0.28);
}
.thumbnail-slider::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.44);
}
.thumbnail-slider .slide {
position: relative;
height: 20%;
overflow: hidden;
}
.thumbnail-slider .slide:hover figure img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.thumbnail-slider .slide figure img {
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.slide figure {
height: 100%;
}
.slide figure img {
position: relative;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@-webkit-keyframes mainFadeIn {
to {
opacity: 1;
}
}
@keyframes mainFadeIn {
to {
opacity: 1;
}
}
@-webkit-keyframes show {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes show {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@-webkit-keyframes hide {
0% {
z-index: 2;
}
100% {
z-index: 2;
}
}
@keyframes hide {
0% {
z-index: 2;
}
100% {
z-index: 2;
}
}
@-webkit-keyframes showMeta {
0% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@keyframes showMeta {
0% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
}
@-webkit-keyframes hideMeta {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0;
}
}
@keyframes hideMeta {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-filter: blur(0);
filter: blur(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
-webkit-filter: blur(5px);
filter: blur(5px);
opacity: 0;
}
}
<div class="container">
<ul class="main-slider">
<li class="slide" id="slide-1">
<figure><img src="https://drive.google.com/uc?export=view&id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
<div class="meta">
<p class="title">Elisa Cannon</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-2">
<figure><img src="https://drive.google.com/uc?export=view&id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
<div class="meta">
<p class="title">Salvatore Wilson</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-3">
<figure><img src="https://drive.google.com/uc?export=view&id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
<div class="meta">
<p class="title">Suzanne Flowers</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-4">
<figure><img src="https://drive.google.com/uc?export=view&id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
<div class="meta">
<p class="title">Evelyn Sanchez</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-5">
<figure><img src="https://drive.google.com/uc?export=view&id=1VxA3ZpBI4MiIu11-6isv4KRNSxxoWtis" /></figure>
<div class="meta">
<p class="title">Kathleen Barton</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-6">
<figure><img src="https://drive.google.com/uc?export=view&id=1HjtSyCgF-2i2uBFq6wT6DYe2Bu93WNLl" /></figure>
<div class="meta">
<p class="title">Eloise Harmon</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
<li class="slide" id="slide-7">
<figure><img src="https://drive.google.com/uc?export=view&id=1m893qZj1ahmSXoChntbPQ8FynsF1fRTi" /></figure>
<div class="meta">
<p class="title">Jackie Butler</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</li>
</ul>
<nav role="navigation">
<ul class="thumbnail-slider">
<li class="slide">
<a href="#slide-1">
<figure><img src="https://drive.google.com/uc?export=view&id=1sRjMAeYv2axSKgRPtLHyk7LaHne8K4oq" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-2">
<figure><img src="https://drive.google.com/uc?export=view&id=1Ido1e59DT4GltXbmnTEmfJjkGdLwslZK" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-3">
<figure><img src="https://drive.google.com/uc?export=view&id=1eGcqYmliPjIdxGXxyk2BrC4-KtOtFXK9" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-4">
<figure><img src="https://drive.google.com/uc?export=view&id=1p7Akjvwh-yMhErDMvDFKb7YxpERMMXtX" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-5">
<figure><img src="https://drive.google.com/uc?export=view&id=1VxA3ZpBI4MiIu11-6isv4KRNSxxoWtis" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-6">
<figure><img src="https://drive.google.com/uc?export=view&id=1HjtSyCgF-2i2uBFq6wT6DYe2Bu93WNLl" /></figure>
</a>
</li>
<li class="slide">
<a href="#slide-7">
<figure><img src="https://drive.google.com/uc?export=view&id=1m893qZj1ahmSXoChntbPQ8FynsF1fRTi" /></figure>
</a>
</li>
</ul>
</nav>
</div>
テキストエディタ Dreamweaver CS6
ブラウザ Chrome