如何使用上一个/下一个按钮构建一个纯 CSS3 图像滑块？答案

【问题标题】：How to build a pure CSS3 image slider with prev/next buttons?如何使用上一个/下一个按钮构建一个纯 CSS3 图像滑块？
【发布时间】：2015-11-27 06:55:39
【问题描述】：

我想构建一个简单的图像滑块，它可以在单击上一个/下一个按钮时在图像之间平滑切换。不幸的是，我没有任何 JS 知识，我希望这项任务在不使用它的情况下是可行的，基于纯 CSS。虽然，我确实实现了一些复制/粘贴 JS 元素，但我不知道如何用这种语言编写代码。具体来说，它将是一个意见滑块，我看起来是动态的。

这里是 HTML/CSS 和最终效果的图片：

/*HTML*/

<section id="opinions_wrapper">
    <img id="left_arrow" src="img/left_arrow.jpg">

    <div id="opinions_slider">

    <img class="photo_opinions" src="img/theface.png">
    <h4>Joe Doe</h4> 
    <h4 class="position">President of BlueBlue/h4>
    <img id="decoration_line" src="img/decoration-line.png">
    <p class="opinion">ILorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt erat tempor lectus     

placerat fermentum. Pellentesque ac malesuada nisl. Suspendisse elementum odio nunc, non gravida leo fermentum  nec. 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>

    </div>        

    <img id="right_arrow" src="img/right_arrow.jpg">   
 </section>



/*CSS*/



#opinions_wrapper {

width: 690px;
height: 390px;
margin: 0 auto;
display: flex;
flex-direction: row;

    }

#opinions_slider {

width: 600px;
height: 390px;  


    }

#left_arrow,#right_arrow {

width: 45px;
height: 46px;
padding-top: 170px;
opacity: 0.8;
transform: scale(0.9,0.9);
transition: all .3s;
    }

#left_arrow:hover,#right_arrow:hover {

opacity: 1;
transform: scale(1,1);

    }

.foto_opinions {

display: block;
margin: 0 auto;
    }

h4 {

width: 290px;
font-size: 2.5em;
color: #3a383a;
text-align: center;
margin: 0 auto;
padding-top: 15px;


    }

h4.position {

font-size: 2em; 
color: #c11a67;
padding: 0;
    }

#decoration_line {

width: 415px;
height: 11px;
margin: 0 auto;
display:block;
padding-top: 15px;
    }


.opinion {

width: 490px;
height: 150px;
color: #3a383a;
text-align: center;
margin: 0 auto;
font-size: 1.8em;
padding-top: 15px;

    }

Example

【问题讨论】：

标签： html css slider gallery

【解决方案1】：

查看我创建的这个链接 http://codepen.io/shreya7/pen/XmLBEY

 <input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
    <div class="slide">
      <img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
    </div>
    <div class="nav">
        <label for="img-2" class="prev">&#x2039;</label>
        <label for="img-4" class="next">&#x203a;</label>
    </div>
</li>

【讨论】：