同一页面中的两个纯CSS幻灯片

Question

所以我在互联网上发现了这个幻灯片，让它工作并适应它有点容易。 当我试图在页面上放置两个相同的幻灯片时，问题就开始了，好吧，＃34;实际上＆＃34;有效，但是当幻灯片（1）打开并显示图像时，第二个是＆＃34;隐形＆＃34; （实际上根本不存在）导航点中的一部分..如果我点击任何导航点，则会出现滑块，但滑块（2）消失等等。

所以我尝试更改幻灯片中的每个类名和每个ID，制作两个不同的CSS块，但没有成功。

这是Slider（1）的CSS

/ * --------------------------------------------- --------- SLIDESHOW1 ---------------------------------------- --- * /

.slides1 {
    padding: 0;
    width: 100%;
    min-width: 600px;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides1 input { display: none; }

.slide-container1 { display: block; }

.slide1 {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 470px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide1 img {
    width: 100%;
    min-width: 100%;
    height: 100%;

    margin: 0 auto;
}

.nav1 label {
    width: 15%;
    height: 100%;
    display: none;
    position: absolute;

    opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 30pt;
    text-align: center;
    line-height: 450px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide1:hover + .nav1 label { opacity: 0.5; }

.nav1 label:hover { opacity: 1; }

.nav1 .next1 { right: 0; }

.textlabel1 {
    width: 100%;
    height: 50px;
    position: absolute;
    display: block;
    z-index: 90;
    top: 350px;
    text-shadow: 0px 0px 15px rgb(119, 119, 119);

    padding: 0;
    margin: 0 auto;
}

.textlabel1 h2 {
    font-size: 24px;
    text-align: center;

    padding: 0;
    margin: 0 15px 0 15px;
}

input:checked + .slide-container1  .slide1 {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container1 .nav1 label { display: block; }

.nav-dots1 {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots1 .nav-dot1 {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots1 .nav-dot1:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#img-1:checked ~ .nav-dots1 label#img-dot-1, input#img-2:checked ~ .nav-dots1 label#img-dot-2, input#img-3:checked ~ .nav-dots1 label#img-dot-3, input#img-4:checked ~ .nav-dots1 label#img-dot-4, input#img-5:checked ~ .nav-dots1 label#img-dot-5, input#img-6:checked ~ .nav-dots1 label#img-dot-6, input#img-7:checked ~ .nav-dots1 label#img-dot-7 {
    background: rgba(0, 0, 0, 0.8);
}

这是Slider（2）的CSS

/ * --------------------------------------------- ---------幻灯片2 ---------------------------------- * /

.slides2 {
    padding: 0;
    width: 100%;
    min-width: 600px;
    height: 100%;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides2 input { display: none; }

.slide-container2 { display: block; }

.slide2 {
    top: 0;
    opacity: 0;
    width: 100%;
    height: 470px;
    display: block;
    position: absolute;

    transform: scale(0);

    transition: all .7s ease-in-out;
}

.slide2 img {
    width: 100%;
    min-width: 100%;
    height: 100%;

    margin: 0 auto;
}

.nav2 label {
    width: 15%;
    height: 100%;
    display: none;
    position: absolute;

    opacity: 0;
    z-index: 9;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 30pt;
    text-align: center;
    line-height: 450px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide2:hover + .nav2 label { opacity: 0.5; }

.nav2 label:hover { opacity: 1; }

.nav2 .next2 { right: 0; }

.textlabel2 {
    width: 100%;
    height: 50px;
    position: absolute;
    display: block;
    z-index: 90;
    top: 350px;
    text-shadow: 0px 0px 15px rgb(119, 119, 119);

    padding: 0;
    margin: 0 auto;
}

.textlabel2 h2 {
    font-size: 24px;
    text-align: center;

    padding: 0;
    margin: 0 15px 0 15px;
}

input:checked + .slide-container2  .slide2 {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container2 .nav2 label { display: block; }

.nav-dots2 {
    width: 100%;
    bottom: 9px;
    height: 11px;
    display: block;
    position: absolute;
    text-align: center;
}

.nav-dots2 .nav-dot2 {
    top: -5px;
    width: 11px;
    height: 11px;
    margin: 0 4px;
    position: relative;
    border-radius: 100%;
    display: inline-block;
    background-color: rgba(0, 0, 0, 0.6);
}

.nav-dots2 .nav-dot2:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

input#imga-1:checked ~ .nav-dots2 label#imga-dot-1, input#imga-2:checked ~ .nav-dots2 label#imga-dot-2, input#imga-3:checked ~ .nav-dots2 label#imga-dot-3, input#imga-4:checked ~ .nav-dots2 label#imga-dot-4, input#imga-5:checked ~ .nav-dots2 label#imga-dot-5 {
    background: rgba(0, 0, 0, 0.8);
}

这是我的页面，两者最外部的容器是班级＆＃34;房间＆＃34;

<div class="room"> 
                        <div style="height: 70px; width: 100%; line-height: 70px; border-bottom: 1px solid black; background-color: #242424; "> 
                            <h2 class="subtitle" style="color: #FFFFFF; text-align: left; padding: 0 0 0 40px;" > Camera Matrimoniale </h2>
                        </div>
                        <div style="height: 530px; width: 100%;">
                            <div style="height: 530px; width: 450px; float: left; padding: 25px 15px 25px 15px">

                            </div>
                            <div style="height: 530px; width: 690px; float: right; ">
                            <!------------------------------------------------------------------------------------------- SLIDESHOW ------------------------------------------------------>
                                <div style="height: 510px; width: 600px; padding: 10px 0; position: relative; left: 80px;">
                                    <ul class="slides1">
                                        <input type="radio" name="radio-btn" id="img-1" checked />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Letto_Matrimoniale_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Letto Matrimoniale" title="Camera Matrimoniale - Letto Matrimoniale" /> 
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Letto Matrimoniale </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-4" class="prev1">&#x2039;</label>
                                                <label for="img-2" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="img-2" />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Letto_Singolo_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Letto Singolo" title="Camera Matrimoniale - Letto Singolo"/> 
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Letto Singolo </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-1" class="prev1">&#x2039;</label>
                                                <label for="img-3" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="img-3" />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Bagno_Indipendente_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Bagno Indipendente" title="Camera Matrimoniale - Bagno Indipendente"/>
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Bagno Indipendente </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-2" class="prev1">&#x2039;</label>
                                                <label for="img-4" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="img-4" />
                                        <li class="slide-container1">
                                            <div class="slide1">
                                                <img src="../images/cameradouble/BedBreakfast_Bagno_Indipendente_Doccia_Camera_Matrimoniale.jpg" alt="Camera Matrimoniale - Doccia Bagno Indipendente" title="Camera Matrimoniale - Doccia Bagno Indipendente"/>
                                                <div class="textlabel1">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Matrimoniale - Doccia Bagno Indipendente </h2> 
                                                </div>
                                            </div>
                                            <div class="nav1">
                                                <label for="img-3" class="prev1">&#x2039;</label>
                                                <label for="img-1" class="next1">&#x203a;</label>
                                            </div>
                                        </li>
                                        <li class="nav-dots1">
                                          <label for="img-1" class="nav-dot1" id="img-dot-1"></label>
                                          <label for="img-2" class="nav-dot1" id="img-dot-2"></label>
                                          <label for="img-3" class="nav-dot1" id="img-dot-3"></label>
                                          <label for="img-4" class="nav-dot1" id="img-dot-4"></label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="clear: both; height: 20px; width: 100%; min-width: 1200px;"> </div>
                    <div class="room">
                        <div style="height: 70px; width: 100%; line-height: 70px; border-bottom: 1px solid black; background-color: #242424; "> 
                            <h2 class="subtitle" style="color: #FFFFFF; text-align: left; padding: 0 0 0 40px;" > Camera Doppia <i> (Anche Uso Singolo) </i> </h2>
                        </div>
                        <div style="height: 530px; width: 100%;">
                            <div style="height: 530px; width: 450px; float: left; padding: 25px 15px 25px 15px">

                            </div>
                            <div style="height: 530px; width: 690px; float: right; ">
                            <!------------------------------------------------------------------------------------------- SLIDESHOW ------------------------------------------------------>
                                <div style="height: 510px; width: 600px; padding: 10px 0; position: relative; left: 40px;">
                                    <ul class="slides2">
                                        <input type="radio" name="radio-btn" id="imga-1" checked />
                                        <li class="slide-container2">
                                            <div class="slide2">
                                                <img src="../images/camerasingle/BedBreakfast_Letto1_Camera_Doppia.jpg" alt="Camera Doppia - Letto Singolo (1)" title="Camera Doppia - Letto Singolo (1)" /> 
                                                <div class="textlabel2">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Letto Singolo (1) </h2> 
                                                </div>
                                            </div>
                                            <div class="nav2">
                                                <label for="imga-3" class="prev2">&#x2039;</label>
                                                <label for="imga-2" class="next2">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="imga-2" />
                                        <li class="slide-container2">
                                            <div class="slide2">
                                                <img src="../images/camerasingle/BedBreakfast_Letto2_Camera_Doppia.jpg" alt="Camera Doppia - Letto Singolo (2)" title="Camera Doppia - Letto Singolo (2)"/> 
                                                <div class="textlabel2">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Letto Singolo (2) </h2> 
                                                </div>
                                            </div>
                                            <div class="nav2">
                                                <label for="imga-1" class="prev2">&#x2039;</label>
                                                <label for="imga-3" class="next2">&#x203a;</label>
                                            </div>
                                        </li>
                                        <input type="radio" name="radio-btn" id="imga-3" />
                                        <li class="slide-container2">
                                            <div class="slide2">
                                                <img src="../images/camerasingle/BedBreakfast_Bagno_Indipendente_Camera_Doppia.jpg" alt="Camera Doppia - Bagno Indipendente" title="Camera Doppia - Bagno Indipendente"/>
                                                <div class="textlabel2">
                                                    <h2 style="color: #FFFFFF; text-shadow: 0 0 2px black;"> Camera Doppia - Bagno Indipendente </h2> 
                                                </div>
                                            </div>
                                            <div class="nav2">
                                                <label for="imga-2" class="prev2">&#x2039;</label>
                                                <label for="imga-1" class="next2">&#x203a;</label>
                                            </div>
                                        </li>
                                        <li class="nav-dots2">
                                          <label for="imga-1" class="nav-dot2" id="imga-dot-1"></label>
                                          <label for="imga-2" class="nav-dot2" id="imga-dot-2"></label>
                                          <label for="imga-3" class="nav-dot2" id="imga-dot-3"></label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

那是因为你正在使用input type radio，只允许你从它的组中选择一个选定的项目。

出现问题的原因是，您将slide1和slide2分组为同名name="radio-btn"

您需要做的只是更改2幻灯片的组名，以便在slide1和slide2，name="radio-btn"和name="radio-btn-2"之间有所不同DEMO