Question

对吧，尽管我编码正确，但有关旋转木马的特定原因-从下面的教程中可以看出，除了旋转木马之外，它的行为类似于其他东西？

导航按钮到处都是
其中一张图片是屏幕宽度的一半，而另一张是屏幕宽度的100％，
没有任何滑动动作，
按钮甚至不起作用
当您徒劳地单击按钮时，按钮会改变形状真正拥有这些教程之一不会浪费我时间。

所有这一切中唯一令人震惊的是，这些图像实际上已显示出来-坦率地说，如果也看不到它们，这也不会令我感到惊讶。

https://www.youtube.com/watch?v=0wvrlOyGlq0

下面是我的结果

真正开始失去对这些所谓教程的耐心。如果我编写某些代码，那么我不会期望它表现出它喜欢的行为-没有什么能让我更加生气。

.slides{
        width: 200%;
        display: block;
    }
    
    .slides input{
        display: none;
    }
    
    .slider{
        display: flex;
    }
    
    .slide{
        width: 100%;
        transition: 2s;
    }
    
    .slide img{
        width: 100%;
    }
    
    .navigation_manual{
        position: absolute;
        width: 800px;
        margin-top: -40px;
        display: flex;
        justify-content: center;
    }
    
    .navigation_auto{
        position: absolute;
        display: flex;
        width: 800px;
        justify-content: center;
        margin-top: 30px;
    }
    
    .navigation_auto div{
        border: 2px solid #0d0155;
        padding:5px;
        border-radius: 10px;
        transition: 1s;
    }
    
    .manual_btn{
        border:2px solid #0d0155;
        padding:5px;
        border-radius: 10px;
        cursor: pointer;
        transition: 1s;
    }
    
    .manual_btn:not(:last-child){
        margin-right: 40px;
    }
    
    .manual_btn:hover{
        background-color: red;
    }
    
    #radio-1 ~ .first{
        margin-left: -50%;
    }
    
    #radio-2 ~ .first{
        margin-left: -50%;
    }
  
  body{
    margin: 0px;
    padding:0px;
    font-family: como, sans-serif, Trebuchet MS;
    width: 100%;
    display: block;
    overflow-x: hidden;
}

<div class="slider">
        <div class="slides">
            <input type="radio" name="radio-btn" id="radio-1"/>
            <input type="radio" name="radio-btn" id="radio-2"/>
            <div class="slide first">
                <img src="../assets/binoculars_main_image.jpg" alt=""/>
            </div>
            <div class="slide">
                <img src="../assets/Observation_Deck_binoculars.jpg" alt=""/>
            </div>
            <div class="navigation_auto">
                <div class="auto_btn1"></div>
                <div class="auto_btn2"></div>
            </div>
            <div class="navigation_manual">
                <label for="radio-1" class="manual_btn"></label>
                <label for="radio-2" class="manual_btn"></label>
            </div>
        </div>
    </div>

为什么该旋转木马的行为不像旋转木马？

0 个答案: