在一页上创建2张照片幻灯片

Question

我目前正试图在首页上放两个带有灯箱背景的照片幻灯片放映。第一个单击一次就可以正常工作，但是第二个只显示没有照片的背景。代码完全用html和css编写。

我觉得问题的一部分可能与ID不了解的部分有关。 如果有人知道出了什么问题，我将非常感谢您的投入。

代码如下

HTML

        <div class="drawings flex column">
        <h3 class="roman">Drawings</h3>
        <ul class="flex between">
            <li class="flex a-center center">
                <a href="#img1">
                    <img src="./img/dead_space_lurker_main.jpg" class="thumbnail">
                </a>
            </li>
            <li class="flex a-center center">
                <a href="#img2">
                    <img src="./img/dead_space_slasher_main.jpg" class="thumbnail">
                </a>
            </li>
            <li class="flex a-center center">
                <a href="#img3">
                    <img src="./img/dead_space_infector_main.jpg" class="thumbnail">
                </a>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li>
                <a href="#_" class="lightbox fix none z4 grid10 h10" id="img1">
                    <ul class="slides flex rel">
                        <input type="radio" name="radio-btn" id="img-1" class="none" checked />
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-6" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-2" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-2" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-1" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-3" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-3" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-2" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-4" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-4" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-3" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-5" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-5" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-4" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-6" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-6" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-5" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-1" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <li class="nav-dots flex center abs grid10">
                            <label for="img-1" class="nav-dot flex rel" id="img-dot-1"></label>
                            <label for="img-2" class="nav-dot flex rel" id="img-dot-2"></label>
                            <label for="img-3" class="nav-dot flex rel" id="img-dot-3"></label>
                            <label for="img-4" class="nav-dot flex rel" id="img-dot-4"></label>
                            <label for="img-5" class="nav-dot flex rel" id="img-dot-5"></label>
                            <label for="img-6" class="nav-dot flex rel" id="img-dot-6"></label>
                        </li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
    <div>
        <ul>
            <li>
                <a href="#_" class="lightbox fix none z4 grid10 h10" id="img2">
                    <ul class="slides flex rel">
                        <input type="radio" name="radio-btn" id="img-7" class="none" checked />
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-12" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-8" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-8" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-7" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-9" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-9" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-8" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-10" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-10" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-9" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-11" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-11" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-10" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-12" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <input type="radio" name="radio-btn" id="img-12" class="none"/>
                        <li class="slide-container flex">
                            <div class="slide flex abs opc0">
                                <img class="grid10 h10" src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
                            </div>
                            <div class="nav">
                                <label for="img-11" class="prev abs none z5 h10 varela a-center opc0">&#x2039;</label>
                                <label for="img-7" class="next abs none z5 h10 varela a-center opc0">&#x203a;</label>
                            </div>
                        </li>
                        <li class="nav-dots flex center abs grid10">
                            <label for="img-7" class="nav-dot flex rel" id="img-dot-7"></label>
                            <label for="img-8" class="nav-dot flex rel" id="img-dot-8"></label>
                            <label for="img-9" class="nav-dot flex rel" id="img-dot-9"></label>
                            <label for="img-10" class="nav-dot flex rel" id="img-dot-10"></label>
                            <label for="img-11" class="nav-dot flex rel" id="img-dot-11"></label>
                            <label for="img-12" class="nav-dot flex rel" id="img-dot-12"></label>
                        </li>
                    </ul>
                </a>
            </li>
        </ul>

CSS

           .lightbox {
            @include positioning(0, 0, inherit, inherit);
            background: rgba(0,0,0,0.8);
        }

        .lightbox:target {
            outline: none;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .slides {
            @include gearCircle(900px, 700px, 0);
            padding: 0;
            margin: 0 auto;
        }

        .slide {
            @include gearCircle(900px, 700px, 0);
            top: 0;
            transform: scale(0);
            transition: all .7s ease-in-out;
        }

        .nav > label {
            width: 200px;
            transition: opacity .1s;
            color: $pureWhite;
            font-size: 156pt;
            line-height: 380px;
            background-color: rgba(255, 255, 255, .3);
            text-shadow: 0px 0px 15px rgb(119, 119, 119);
        }

        .slide:hover + .nav label { 
            opacity: 0.5;
        }

        .nav label:hover { 
            opacity: 1;
        }

        .nav .next { 
            right: 0; 
        }

        input:checked + .slide-container  .slide {
            opacity: 1;
            transform: scale(1);
            transition: opacity 1s ease-in-out;
        }

        input:checked + .slide-container .nav label { 
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .nav-dots {
            bottom: 9px;
            height: 11px;

            .nav-dot {
                @include gearCircle(11px, 11px, 100%);
                top: -5px;
                margin: 0 4px;
                background-color: rgba(119, 0, 20, 0.6);
            }
        }

        .nav-dots .nav-dot:hover {
            background-color: rgba(245, 0, 41, 0.8);
        }

        input#img-1:checked ~ .nav-dots label#img-dot-1,
        input#img-2:checked ~ .nav-dots label#img-dot-2,
        input#img-3:checked ~ .nav-dots label#img-dot-3,
        input#img-4:checked ~ .nav-dots label#img-dot-4,
        input#img-5:checked ~ .nav-dots label#img-dot-5,
        input#img-6:checked ~ .nav-dots label#img-dot-6 {
            background: $pureWhite;
        }

        input#img-7:checked ~ .nav-dots label#img-dot-7,
        input#img-8:checked ~ .nav-dots label#img-dot-8,
        input#img-9:checked ~ .nav-dots label#img-dot-9,
        input#img-10:checked ~ .nav-dots label#img-dot-10,
        input#img-11:checked ~ .nav-dots label#img-dot-11,
        input#img-12:checked ~ .nav-dots label#img-dot-12 {
            background: $pureWhite;
        }