Question

编辑

我认为问题在这里：

 .sp-slider {
     width: 500%;
}

更改为

 .sp-slider {
     width: auto;
}

您可以看到图像试图适应div的范围。

https://jsfiddle.net/cnvre387/

仍然不确定如何进行适当的修复。...

原始帖子

JSFiddle真实地说明了一切。

https://jsfiddle.net/cuov5fr1/

我只能获得5张图像以显示在幻灯片上。请注意，一旦您单击第五张图像后的箭头，它就会显示空白。

仔细研究一下，也就是在div overflow:hidden上注释掉sp-content风格

您可以看到正在发生的事情，以及为什么它没有显示任何图像。 5号后，由于某种原因，图像会换行。

https://jsfiddle.net/0ayhwkbt/

查看和处理JSFiddle可能更容易，但是为此，这里是HTML：

<div class="sp-slideshow">
    <input checked="checked" class="sp-selector-1" id="button-1" name="radio-set" type="radio">
    <label class="button-label-1" for="button-1"></label>
    <input class="sp-selector-2" id="button-2" name="radio-set" type="radio">
    <label class="button-label-2" for="button-2"></label>
    <input class="sp-selector-3" id="button-3" name="radio-set" type="radio">
    <label class="button-label-3" for="button-3"></label>
    <input class="sp-selector-4" id="button-4" name="radio-set" type="radio">
    <label class="button-label-4" for="button-4"></label>
    <input class="sp-selector-5" id="button-5" name="radio-set" type="radio">
    <label class="button-label-5" for="button-5"></label>
    <input class="sp-selector-6" id="button-6" name="radio-set" type="radio">
    <label class="button-label-6" for="button-6"></label>
    <input class="sp-selector-7" id="button-7" name="radio-set" type="radio">
    <label class="button-label-7" for="button-7"></label>
    <label class="sp-arrow sp-a1" for="button-1"></label>
    <label class="sp-arrow sp-a2" for="button-2"></label>
    <label class="sp-arrow sp-a3" for="button-3"></label>
    <label class="sp-arrow sp-a4" for="button-4"></label>
    <label class="sp-arrow sp-a5" for="button-5"></label>
    <label class="sp-arrow sp-a6" for="button-6"></label>
    <label class="sp-arrow sp-a7" for="button-7"></label>
    <div class="sp-content">
        <div class="sp-parallax-bg"></div>
        <ul class="sp-slider clearfix">
            <li><img alt="image01" src="https://source.unsplash.com/random/500x500"></li>
            <li><img alt="image02" src="https://source.unsplash.com/random/501x500"></li>
            <li><img alt="image03" src="https://source.unsplash.com/random/502x500"></li>
            <li><img alt="image04" src="https://source.unsplash.com/random/503x500"></li>
            <li><img alt="image05" src="https://source.unsplash.com/random/504x500"></li>
            <li><img alt="image06" src="https://source.unsplash.com/random/505x500"></li>
            <li><img alt="image07" src="https://source.unsplash.com/random/506x500"></li>
        </ul>
    </div>
</div>

和CSS：

 .rwd-table {
     background: #34495E;
     color: #fff;
     border-radius: 0.4em;
     overflow: hidden;
     margin: 3em auto 0em auto;
    /*font-family: 'Alegreya Sans SC', sans-serif;
    */
     font-family: 'Barlow Condensed', sans-serif;
     font-size: 16px;
     width: auto;
     min-width: 300px;
}
 .rwd-table tr {
     border-top: 1px solid #ddd;
     border-bottom: 1px solid #ddd;
}
 .rwd-table th {
     display: none;
}
 .rwd-table td {
     display: block;
}
 .rwd-table td:first-child {
     padding-top: 0.5em;
}
 .rwd-table td:last-child {
     padding-bottom: 0.5em;
}
 .rwd-table td:before {
     content: attr(data-th) ": ";
     font-weight: bold;
     width: 6.5em;
     display: inline-block;
}
 @media (min-width: 480px) {
     .rwd-table td:before {
         display: none;
    }
}
 .rwd-table th, .rwd-table td {
     text-align: left;
}
 @media (min-width: 480px) {
     .rwd-table th, .rwd-table td {
         display: table-cell;
         padding: 0.25em 0.5em;
    }
     .rwd-table th:first-child, .rwd-table td:first-child {
         padding-left: 0;
    }
     .rwd-table th:last-child, .rwd-table td:last-child {
         padding-right: 0;
    }
}
 .rwd-table tr {
     border-color: #46637f;
}
 .rwd-table th, .rwd-table td {
     margin: 0.5em 1em;
}
 @media (min-width: 480px) {
     .rwd-table th, .rwd-table td {
         padding: 1em !important;
    }
}
 .rwd-table th, .rwd-table td:before {
     color: #dd5;
}
 .sp-slideshow {
     position: relative;
     margin: 1em auto 4em auto;
     width: 100%;
    /* max-width: 1000px;
     */
     max-width: 70.6%;
     padding: 0em 0em 0em 0em;
     min-width: 260px;
     height: 460px;
     box-shadow: 0 5px 14px rgba(0, 0, 0, 0.82);
}
 .sp-content {
     position: relative;
     width: 100%;
     height: 100%;
     background: url('galbg.jpeg') center center repeat;
     background-size: cover;
     overflow:hidden;
}
 .sp-content::before {
     content: '';
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-image: linear-gradient(to bottom right,#202020,#202020);
     opacity: .6;
}
 .sp-parallax-bg {
     background: #2e2b2a40 repeat-x scroll 0 0;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     background-size: cover;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
}
 .sp-slideshow input {
     position: absolute;
     bottom: 15px;
     left: 50%;
     width: 9px;
     height: 9px;
     z-index: 1001;
     cursor: pointer;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
     filter: alpha(opacity=0);
     opacity: 0;
}
 .sp-slideshow input + label {
     position: absolute;
     bottom: 15px;
     left: 50%;
     width: 10px;
     height: 10px;
     display: block;
     z-index: 1000;
     border: 2px solid rgba(255, 255, 255, 0.5);
     border-radius: 50%;
     -webkit-transition: all 0.1s linear;
     -moz-transition: all 0.1s linear;
     -o-transition: all 0.1s linear;
     -ms-transition: all 0.1s linear;
     transition: all 0.1s linear;
}
 .sp-slideshow input:checked + label {
     background-color: #fff;
     background-color: rgba(255,255,255,0.9);
}
 .sp-selector-1, .button-label-1 {
     margin-left: -36px;
}
 .sp-selector-2, .button-label-2 {
     margin-left: -18px;
}
 .sp-selector-4, .button-label-4 {
     margin-left: 18px;
}
 .sp-selector-5, .button-label-5 {
     margin-left: 36px;
}
 .sp-selector-6, .button-label-6 {
     margin-left: 54px;
}
 .sp-selector-7, .button-label-7 {
     margin-left: 72px;
}
 .sp-arrow {
     position: absolute;
     top: 50%;
     width: 28px;
     height: 38px;
     margin-top: -19px;
     display: none;
     opacity: 0.8;
     cursor: pointer;
     z-index: 1000;
     background: transparent url(https://i.postimg.cc/90G1CWd2/arrows.png) no-repeat;
     -webkit-transition: opacity linear 0.3s;
     -moz-transition: opacity linear 0.3s;
     -o-transition: opacity linear 0.3s;
     -ms-transition: opacity linear 0.3s;
     transition: opacity linear 0.3s;
}
 .sp-arrow:hover{
     opacity: 1;
}
 .sp-arrow:active{
     margin-top: -18px;
}
 .sp-selector-1:checked ~ .sp-arrow.sp-a2, .sp-selector-2:checked ~ .sp-arrow.sp-a3, .sp-selector-3:checked ~ .sp-arrow.sp-a4, .sp-selector-4:checked ~ .sp-arrow.sp-a5, .sp-selector-5:checked ~ .sp-arrow.sp-a6, .sp-selector-6:checked ~ .sp-arrow.sp-a7 {
     right: 15px;
     display: block;
     background-position: top right;
}
 .sp-selector-2:checked ~ .sp-arrow.sp-a1, .sp-selector-3:checked ~ .sp-arrow.sp-a2, .sp-selector-4:checked ~ .sp-arrow.sp-a3, .sp-selector-5:checked ~ .sp-arrow.sp-a4, .sp-selector-6:checked ~ .sp-arrow.sp-a5, .sp-selector-7:checked ~ .sp-arrow.sp-a6 {
     left: 15px;
     display: block;
     background-position: top left;
}
 .sp-slideshow input:checked ~ .sp-content {
     -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
     -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
     -o-transition: background-position linear 0.6s, background-color linear 0.8s;
     -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
     transition: background-position linear 0.6s, background-color linear 0.8s;
}
 .sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
     -webkit-transition: background-position linear 0.7s;
     -moz-transition: background-position linear 0.7s;
     -o-transition: background-position linear 0.7s;
     -ms-transition: background-position linear 0.7s;
     transition: background-position linear 0.7s;
}
 input.sp-selector-1:checked ~ .sp-content {
     background-position: 0 0;
    /*background-color: #727b7f;
    */
}
 input.sp-selector-2:checked ~ .sp-content {
     background-position: -100px 0;
    /*background-color: #7f7276;
    */
}
 input.sp-selector-3:checked ~ .sp-content {
     background-position: -200px 0;
    /*background-color: #737f72;
    */
}
 input.sp-selector-4:checked ~ .sp-content {
     background-position: -300px 0;
    /*background-color: #79727f;
    */
}
 input.sp-selector-5:checked ~ .sp-content {
     background-position: -400px 0;
    /*background-color: #7d7f72;
    */
}
 input.sp-selector-6:checked ~ .sp-content {
     background-position: -500px 0;
    /*background-color: #7d7f72;
    */
}
 input.sp-selector-7:checked ~ .sp-content {
     background-position: -600px 0;
    /*background-color: #7d7f72;
    */
}
 input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
     background-position: 0 0;
}
 input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
     background-position: -200px 0;
}
 input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
     background-position: -400px 0;
}
 input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
     background-position: -600px 0;
}
 input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
     background-position: -800px 0;
}
 input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
     background-position: -1000px 0;
}
 input.sp-selector-7:checked ~ .sp-content .sp-parallax-bg {
     background-position: -1200px 0;
}
 .sp-slider {
     position: relative;
     left: 0;
     width: 500%;
     height: 100%;
     list-style: none;
     margin: 0;
     padding: 0;
     -webkit-transition: left ease-in 0.8s;
     -moz-transition: left ease-in 0.8s;
     -o-transition: left ease-in 0.8s;
     -ms-transition: left ease-in 0.8s;
     transition: left ease-in 0.8s;
}
 .sp-slider > li {
     color: #fff;
     width: 20%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
     height: 100%;
     padding: 0 60px;
     float: left;
     text-align: center;
     opacity: 0.9;
     -webkit-transition: opacity ease-in 0.4s 0.8s;
     -moz-transition: opacity ease-in 0.4s 0.8s;
     -o-transition: opacity ease-in 0.4s 0.8s;
     -ms-transition: opacity ease-in 0.4s 0.8s;
     transition: opacity ease-in 0.4s 0.8s;
}
 .sp-slider > li img{
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -o-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
     display: block;
     margin: 0 auto;
     padding: 40px 0 50px 0;
     max-height: 100%;
     max-width: 100%;
}
 input.sp-selector-1:checked ~ .sp-content .sp-slider {
     left: 0;
}
 input.sp-selector-2:checked ~ .sp-content .sp-slider {
     left: -100%;
}
 input.sp-selector-3:checked ~ .sp-content .sp-slider {
     left: -200%;
}
 input.sp-selector-4:checked ~ .sp-content .sp-slider {
     left: -300%;
}
 input.sp-selector-5:checked ~ .sp-content .sp-slider {
     left: -400%;
}
 input.sp-selector-6:checked ~ .sp-content .sp-slider {
     left: -500%;
}
 input.sp-selector-7:checked ~ .sp-content .sp-slider {
     left: -600%;
}
 input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child, input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2), input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3), input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4), input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5), input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6), input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(7) {
     opacity: 1;
}
 @media screen and (max-width: 840px){
     .sp-slideshow {
         height: 345px;
    }
}
 @media screen and (max-width: 680px){
     .sp-slideshow {
         height: 285px;
    }
}
 @media screen and (max-width: 560px){
     .sp-slideshow {
         height: 235px;
    }
}
 @media screen and (max-width: 320px){
     .sp-slideshow {
         height: 158px;
    }
}

为什么该代码将第1张图像下方的第6张图像击倒，如何修改它以在幻灯片中获得任意数量的所需图像？

纯CSS滑块仅适合5张图片（其他图片以网格形式向下移动吗？）

0 个答案: