Question

我有一个包含多张图片的幻灯片。我的问题是所有图像都必须在一行上。但我的图像正在下降。我该如何解决这个问题。图像必须在一行上，不能越过显示屏。

我添加了工作代码。我真的找不到问题。

HTML：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <script src="/js.js"></script>
    <title>Shop</title>
  </head>

  <body>
<!-------------------------- viewing window for the FIRST slideshow ------------------------->
      <div class="cssSlider">
          <h3 id="#mica">Test</h3>

          <!-- inputs to control the slider -->
          <input class="none" type="radio" name="slider" id="slide1" checked="checked">
          <input class="none" type="radio" name="slider" id="slide2">
          <input class="none" type="radio" name="slider" id="slide3">
          <input type="radio" name="slider" id="slide4">

          <!-- single slides are created as lists -->
          <ul class="sliderElements">
              <li><!---------------------- add more products within the ul-tag ---------->
                  <figure><!--------------------- figure-tag shows the products and the details ---------->
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product1" class="product" >
                  </figure>
              </li>

              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product2" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product3" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product4" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product2" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product3" class="product">
                  </figure>
              </li>
              <li>
                  <figure>
                      <figcaption>Name</figcaption>
                      <img src="/blume.jpg" alt="Product4" class="product">
                  </figure>
              </li>
          </ul>

          <!-- Control  buttons-->
          <ul class="sliderControls">
              <li><label for="slide1">1</label></li>
              <li><label for="slide2">2</label></li>
              <li><label for="slide3">3</label></li>
              <li><label for="slide4">4</label></li>
          </ul>
      </div>
      <!-------------------------------------- ENDING of the FIRST slideshow -------------------------------------->

  </body>    
</html>

CSS：

 *{ /* valid for everything */
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: #FAFAFA;
}

html,body{
width: 100%;
height: 100%;
margin:0;
padding: 0;
box-sizing: border-box;
letter-spacing: 2px;
}
h3{
text-align: left;
padding: 1.5%;
margin-left: 10%;
border-bottom: 3px solid #A4A4A4;
width: 15%;
}

li{
text-decoration: none;
list-style: none;
margin: 1%;
padding: 1%
}


/* slideshow for the products */
.cssSlider{
width: 100%;
}

.sliderElements {
list-style: none;
position: relative;
left: 0%;
right: 0;
width: 2000px; /* use the width if u want to place more Product images; if u 
remove images go down with the width number */
transition: left .8s ease-in-out;
}
.sliderElements:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
font-size: 0;
overflow: auto;
}
/* Product details text slide */
.sliderElements > li {
float: left;
width: 8%;
margin-left: 6%;
height: 100px; /* figcaption move up & down here */
position: relative;
display: inline-block;
}
/*important to use the input-buttons; change the value to slide more or less 
*/
#slide2:checked ~ .sliderElements {
left: -30%;
}

#slide3:checked ~ .sliderElements {
left: -60%;
}
#slide4:checked ~ .sliderElements {
left: -80%;
}

#slide6:checked ~ .sliderElements {
left: -30%;
}

#slide7:checked ~ .sliderElements {
left: -60%;
}

#slide8:checked ~ .sliderElements {
left: -80%;
}
#slide10:checked ~ .sliderElements {
left: -30%;
}

#slide11:checked ~ .sliderElements {
left: -60%;
}
#slide12:checked ~ .sliderElements {
left: -80%;
}

/* Captiom of the picture position set */
.sliderElements figcaption {
display: block;
color: #000;
position: absolute;
left: 1;
top: -1%;
padding: .2em;
font-size: .8em;
}
/* Images responsive */
.sliderElements img {
width: 100%;
border: 4px solid #7F7F7F;
}
/* inputs pushing out of the view */
.cssSlider input {
position: absolute;
}

 /* centering the controls - works in conjunction with inline-block */
.sliderControls {
text-align: center;
}
/* Controls next to each other */
.sliderControls li {
display: inline-block;
}

/* Controls identical and round off the corners  */
.sliderControls label {
width: 15px;
height: 15px;
text-align: center;
margin: 1%;
border-radius: 50%;
display: block;
cursor: pointer;
background: #FFCC00;
color: #FFCC00;
font-size: 0.0em;
}
/* attribute selector and indirect descendant to control the labels  */
.sliderControls label:hover,
#slide1:checked ~ .sliderControls label[for="slide1"],
#slide2:checked ~ .sliderControls label[for="slide2"],
#slide3:checked ~ .sliderControls label[for="slide3"],
#slide4:checked ~ .sliderControls label[for="slide4"] {
background: #ddd;
color: #ddd;
}

JavaScript的：

//this is the coe for the slideshow on the index.html
var index = 1;

function plusIndex(n){
index = index + n;
showImage(index);
}

showImage(1);

function showImage(n){
var i;
var x = document.getElementsByClassName("slides");
if(n > x.length) {index = 1};
if(n < 1){ index = x.length};
for(i=0;i<x.length;i++)
    {
        x[i].style.display ="none";
    }
x[index-1].style.display = "block";
}
autoSlide();
function autoSlide(){
var i;
var x = document.getElementsByClassName("slides");
for(i=0;i<x.length;i++)
    {
        x[i].style.display ="none";
    }
if(index > x.length){ index = 1}
x[index-1].style.display = "block";
index++;
setTimeout(autoSlide,2000);
}

Answer 1

更改.sliderElements {width: 100%; display: -webkit-box; }

小提琴：https://jsfiddle.net/bxgh4x02/3/

幻灯片无效

1 个答案: