CSS3，多个滑块一次只会显示1个主图

Question

让我首先声明我是网页设计的绝对菜鸟，我主要只是将它用于我的游戏美术作品集。我对 HTML 和 CSS3 有点熟悉，但那是我的编码技能几乎戛然而止的地方。

我想要一个带有缩略图的漂亮简单滑块用于我的作品集，我在网上找到了 this one，它似乎对我来说大部分都适用。

我希望能够在我的网页上复制这个滑块，这样我就可以为我拥有的每个项目专用一个完整的滑块，并用图像填充它。

但是这个滑块不允许我这样做。当我复制它时，它一次只显示与单击的缩略图对应的 1 个主图像。

这是 HTML：

<div id="project2">

        <!-- Project slider -->
        <div class="p-slider">
            <input type="radio" name="slide_switch" id="id1"/>
            <label for="id1">
                <img src="images/content/3D/turtleneck_staf_2.jpg"/>
            </label>
            <img src="images/content/3D/turtleneck_staf_2.jpg"/>

            <!--Lets show the second image by default on page load-->
            <input type="radio" name="slide_switch" id="id2" checked="checked"/>
            <label for="id2">
                <img src="images/content/3D/turtleneck_staf_1.jpg"/>
            </label>
            <img src="images/content/3D/turtleneck_staf_1.jpg"/>

            <input type="radio" name="slide_switch" id="id3"/>
            <label for="id3">
                <img src="images/content/3D/turtleneck_staf_3.jpg"/>
            </label>
            <img src="images/content/3D/turtleneck_staf_3.jpg"/>

            <input type="radio" name="slide_switch" id="id4"/>
            <label for="id4">
                <img src="images/content/3D/turtleneck_staf_4.jpg"/>
            </label>
            <img src="images/content/3D/turtleneck_staf_4.jpg"/>

            <input type="radio" name="slide_switch" id="id5"/>
            <label for="id5">
                <img src="images/content/3D/turtleneck_staf_5.jpg"/>
            </label>
            <img src="images/content/3D/turtleneck_staf_5.jpg"/>
        </div>

      </div>


      <div id="project3">

        <!-- Project slider -->
        <div class="p-slider">
            <input type="radio" name="slide_switch" id="id6"/>
            <label for="id6">
                <img src="images/content/3D/keep_it_low_poly_2.jpg"/>
            </label>
            <img src="images/content/3D/keep_it_low_poly_2.jpg"/>

            <!--Lets show the second image by default on page load-->
            <input type="radio" name="slide_switch" id="id7" checked="checked"/>
            <label for="id7">
                <img src="images/content/3D/keep_it_low_poly_1.jpg"/>
            </label>
            <img src="images/content/3D/keep_it_low_poly_1.jpg"/>

            <input type="radio" name="slide_switch" id="id8"/>
            <label for="id8">
                <img src="images/content/3D/keep_it_low_poly_3.jpg"/>
            </label>
            <img src="images/content/3D/keep_it_low_poly_3.jpg"/>

            <input type="radio" name="slide_switch" id="id9"/>
            <label for="id9">
                <img src="images/content/3D/keep_it_low_poly_4.jpg"/>
            </label>
            <img src="images/content/3D/keep_it_low_poly_4.jpg"/>

            <input type="radio" name="slide_switch" id="id10"/>
            <label for="id10">
                <img src="images/content/3D/keep_it_low_poly_5.jpg"/>
            </label>
            <img src="images/content/3D/keep_it_low_poly_5.jpg"/>
        </div>

      </div>

每个滑块都嵌入在它自己的 "project" div 中，因为我想让每个项目的背景颜色略有不同。

然后我当然还有一个 CSS sheet 两个滑块都链接到：

.p-slider{
width: 83%; 
position: relative;
padding-top: 41.8%; 
margin: 20px auto;
margin-bottom: 150px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}

.content .p-slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
width:100%;
}

.p-slider input[name='slide_switch'] {
display: none;
}

.p-slider label {
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.6;
}

.p-slider label img{
display: block;
width: 200px;   
}

.p-slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}

.p-slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}

.p-slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}

@media screen and (max-width: 800px) {

.p-slider label img{
/*display: block;*/
width: 100px;
}

}

尽量忽略那些古怪的百分比，那是因为我使用的图像有一个奇怪的宽高比 (1920 x 966)，更多内容见下文。

这是第一个问题。我有 2 个滑块，在任何时候单击缩略图时，只有其中 1 个会显示主图像。我希望能够复制它几十次并让每个滑块显示一个相应的主图像。

我的第二个问题是当我发现这个滑块时它并没有真正响应。我通过使用百分比而不是像素部分解决了它，但我真的不知道如何将它应用到缩略图。

网页也需要能够在移动设备上查看，因此这是一个重要的功能。

是的，我意识到可能有更好更聪明的方法来创建响应式 CSS 滑块，但就像我说的，我完全是个菜鸟。这对我有用。

Answer 1

<div class="slider-wrapper">
<ul class="s-thumbs">
    <li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
    <li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
    <li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
    <li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
    <li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
    <li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
    <li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
</ul>
</div><ul class="s-slides">
    <li id="slide-1" class="slideLeft"><img src="img/slide1.png" alt="" /></li>
    <li id="slide-2" class="slideRight"><img src="img/slide2.png" alt="" /></li>
    <li id="slide-3" class="slideTop"><img src="img/slide3.png" alt="" /></li>
    <li id="slide-4" class="slideBottom"><img src="img/slide4.png" alt="" /></li>
    <li id="slide-5" class="zoomIn"><img src="img/slide5.png" alt="" /></li>
    <li id="slide-6" class="zoomOut"><img src="img/slide6.png" alt="" /></li>
    <li id="slide-7" class="rotate"><img src="img/slide7.png" alt="" /></li>
</ul>
</div>

我只给你 HTML 代码 & 在这个 link 你可以查看 CSS 代码。因此，通过使用 css，您可以制作幻灯片，也可以根据需要进行更改。

请检查这个link:-http://designmodo.com/slider-css3/ & https://www.sanwebe.com/2012/08/pure-css3-tutorials-examples

Answer 2

您不能对所有输入使用相同的名称 "slide_switch"。它将它们组合在一起，因此只能检查其中一个。您必须为每个项目使用不同的名称。

CSS3，多个滑块一次只会显示1个主图

CSS3, multiple sliders will only display 1 main image at a time

html

css

slider

responsive