Question

当我将第七张幻灯片添加到我创建的画廊时，第一张和第七张幻灯片有严重问题，我无法弄清。基本上，当您单击缩略图时，我只需要它，它们会转到相关的幻灯片。

我创建了一个js小提琴：

代码如下：

.slider {
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.slider input {
  display: none;
}

/*---- SLIDER STYLING----*/
.slider__slides {
  width: 100%;
  overflow: hidden;
  background: #fff;
  transition: all 300ms ease-out;
}

.slider__slides-inner {
  transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 600%;
  line-height: 0;
}

.slider__slide-item {
  width: 16.66667%;
  float: left;
  position: relative;
}

.slider__slide-img {
  width: 100%;
}

/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider__slides .slider__slides-inner {
  margin-left: 0%;
}

#slide2:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -100%;
}

#slide3:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -200%;
}

#slide4:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -300%;
}

#slide5:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -400%;
}

#slide6:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -500%;
}

#slide7:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -600%;
}

/*---- SET UP PREV / NEXT CONTROL ----*/
.slider__prev-next-ctrl {
  height: 40px;
  position: absolute;
  top: 42.94%;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none
}

.slider__prev-next-ctrl label {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #777;
  opacity: 0.7;
  transition: opacity 300ms ease-out;
  position: relative;
  pointer-events: auto
}

.slider__prev-next-ctrl label:hover {
  opacity: 1;
  cursor: pointer;
}

#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2), 
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3), 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4), 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5), 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7),
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1) {
  display: block;
  float: right;
  margin-right: 6px;
  transform: rotate(-45deg);
}


#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1), 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2), 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3), 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5), 
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)

{
  display: block;
  float: left;
  margin-left: 6px;
  transform: rotate(135deg);
}

#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after, 
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after, 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after, 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after, 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after, 
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after,
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after,

#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after, 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after, 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after, 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after, 
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after, 
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after,
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after{
  display: block;
  position: absolute;
  top: 11px;
  left: 11px;
  width: 15px;
  height: 15px;
  content: "";
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

/*---- SET UP PIC THUMBNAIL CONTROL ----*/
.slider__pic-ctrl {
  text-align: center;
  margin-top: 6px
}

.slider__pic-ctrl::after {
  display: table;
  clear: both;
  content: '';
}

.slider__pic-ctrl label {
  cursor: pointer;
  display: block;
  float: left;
  width: calc(16.66667% - 5px);
  position: relative;
  border: 2px solid;
  border-color: #fff;
  transition: all .3s ease-out;
  margin-left: 3px;
  margin-right: 3px;
  position: relative;
}

.slider__pic-ctrl label.video-icon svg {
  width: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
}

.slider__pic-ctrl label:nth-child(1) {
  margin-left: 0
}

.slider__pic-ctrl label:nth-child(7) {
  margin-right: 0
}

.slider__pic-ctrl img {
  display: block;
}

.slider__pic-ctrl label:hover {
  border-color: #777;
}

#slide1:checked ~ .slider__pic-ctrl label:nth-child(1), 
#slide2:checked ~ .slider__pic-ctrl label:nth-child(2), 
#slide3:checked ~ .slider__pic-ctrl label:nth-child(3), 
#slide4:checked ~ .slider__pic-ctrl label:nth-child(4), 
#slide5:checked ~ .slider__pic-ctrl label:nth-child(5),
#slide6:checked ~ .slider__pic-ctrl label:nth-child(6),
#slide7:checked ~ .slider__pic-ctrl label:nth-child(7),
 {
  border-color: #777;
}

.slider__responsive-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 125%;
}

.slider__responsive-box iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; 
  top: 0;
}

在第一张幻灯片上，我有第一张和第七张幻灯片，在最后一张上我什么都没有？

非常感谢

Answer 1

您需要更新width的值以容纳7个元素，而不是6个。

内部滑动容器的宽度变为700％，而7个元素的每个宽度变为14.285，而不是16.66％。

http://jsfiddle.net/mzs50pck/9/

.slider {
  max-width: 60em;
  max-width:50vh;/* demo purpose to see it on smaller résolution */
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.slider input {
  display: none;
}

/*---- SLIDER STYLING----*/
.slider__slides {
  width: 100%;
  overflow: hidden;
  background: #fff;
  transition: all 300ms ease-out;
}

.slider__slides-inner {
  transition: all 500ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 700%;
  line-height: 0;
}

.slider__slide-item {
  width: 14.285%;
  float: left;
  position: relative;
}

.slider__slide-img {
  width: 100%;
}

/*---- SET POSITION FOR SLIDE ----*/
#slide1:checked ~ .slider__slides .slider__slides-inner {
  margin-left: 0%;
}

#slide2:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -100%;
}

#slide3:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -200%;
}

#slide4:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -300%;
}

#slide5:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -400%;
}

#slide6:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -500%;
}

#slide7:checked ~ .slider__slides .slider__slides-inner {
  margin-left: -600%;
}

/*---- SET UP PREV / NEXT CONTROL ----*/
.slider__prev-next-ctrl {
  height: 40px;
  position: absolute;
  top: 42.94%;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none
}

.slider__prev-next-ctrl label {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #777;
  opacity: 0.7;
  transition: opacity 300ms ease-out;
  position: relative;
  pointer-events: auto
}

.slider__prev-next-ctrl label:hover {
  opacity: 1;
  cursor: pointer;
}

#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2), 
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3), 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4), 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5), 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7),
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1) {
  display: block;
  float: right;
  margin-right: 6px;
  transform: rotate(-45deg);
}

 
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1), 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2), 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3), 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4),
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5), 
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6),
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)

{
  display: block;
  float: left;
  margin-left: 6px;
  transform: rotate(135deg);
}

#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after, 
#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after, 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after, 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after, 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after, 
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after,
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after,

#slide2:checked ~ .slider__prev-next-ctrl label:nth-child(1)::after, 
#slide3:checked ~ .slider__prev-next-ctrl label:nth-child(2)::after, 
#slide4:checked ~ .slider__prev-next-ctrl label:nth-child(3)::after, 
#slide5:checked ~ .slider__prev-next-ctrl label:nth-child(4)::after, 
#slide6:checked ~ .slider__prev-next-ctrl label:nth-child(5)::after, 
#slide7:checked ~ .slider__prev-next-ctrl label:nth-child(6)::after,
#slide1:checked ~ .slider__prev-next-ctrl label:nth-child(7)::after{
  display: block;
  position: absolute;
  top: 11px;
  left: 11px;
  width: 15px;
  height: 15px;
  content: "";
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}

/*---- SET UP PIC THUMBNAIL CONTROL ----*/
.slider__pic-ctrl {
  text-align: center;
  margin-top: 6px
}

.slider__pic-ctrl::after {
  display: table;
  clear: both;
  content: '';
}

.slider__pic-ctrl label {
  cursor: pointer;
  display: block;
  float: left;
  width: calc(16.66667% - 5px);
  position: relative;
  border: 2px solid;
  border-color: #fff;
  transition: all .3s ease-out;
  margin-left: 3px;
  margin-right: 3px;
  position: relative;
}

.slider__pic-ctrl label.video-icon svg {
  width: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
}

.slider__pic-ctrl label:nth-child(1) {
  margin-left: 0
}

.slider__pic-ctrl label:nth-child(7) {
  margin-right: 0
}

.slider__pic-ctrl img {
  display: block;
}

.slider__pic-ctrl label:hover {
  border-color: #777;
}

#slide1:checked ~ .slider__pic-ctrl label:nth-child(1), 
#slide2:checked ~ .slider__pic-ctrl label:nth-child(2), 
#slide3:checked ~ .slider__pic-ctrl label:nth-child(3), 
#slide4:checked ~ .slider__pic-ctrl label:nth-child(4), 
#slide5:checked ~ .slider__pic-ctrl label:nth-child(5),
#slide6:checked ~ .slider__pic-ctrl label:nth-child(6),
#slide7:checked ~ .slider__pic-ctrl label:nth-child(7),
 {
  border-color: #777;
}

.slider__responsive-box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 125%;
}

.slider__responsive-box iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; 
  top: 0;
}

<div class="slider">
  <input checked type=radio name="slider" id="slide1" />
  <input type=radio name="slider" id="slide2" />
  <input type=radio name="slider" id="slide3" />
  <input type=radio name="slider" id="slide4" />
  <input type=radio name="slider" id="slide5" />
  <input type=radio name="slider" id="slide6" />
  <input type=radio name="slider" id="slide7" />

  <div class="slider__slides">
    <div class="slider__slides-inner">
      
      <div class="slider__slide-item">
        <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_01.jpg" />
      </div>

      <div class="slider__slide-item">
        <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_02.jpg" />
      </div>

      <div class="slider__slide-item">
        <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_03.jpg" />
      </div>

      <div class="slider__slide-item">
        <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_04.jpg" />
      </div>

       <div class="slider__slide-item">
        <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_05.jpg" />
      </div>

      <div class="slider__slide-item">
        <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_06.jpg" />
      </div>

       <div class="slider__slide-item">
        <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_07.jpg" />
      </div>

      
    </div>
  </div>

  <div class="slider__pic-ctrl">
    <label for=slide1>
      <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_01.jpg" />
    </label>
    <label for=slide2>
      <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_02.jpg" />
    </label>
    <label for=slide3>
      <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_03.jpg" />
    </label>
    <label for=slide4>
      <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_04.jpg" />
    </label>
    <label for=slide5>
      <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_05.jpg" />
    </label>
    <label for=slide6>
      <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_06.jpg" />
    </label>
    <label for=slide7>
      <img class="slider__slide-img" src="https://s3-eu-west-1.amazonaws.com/realbuzzregistrations/rr3/lmel/Backpack_07.jpg" />
    </label>
 
  </div>

  <div class="slider__prev-next-ctrl">
    <label for=slide1></label>
    <label for=slide2></label>
    <label for=slide3></label>
    <label for=slide4></label>
    <label for=slide5></label>
    <label for=slide6></label>
    <label for=slide7></label>
  </div>

</div>

添加第7张幻灯片时，纯CSS幻灯片库出错了

1 个答案: