Question

我想构建一个简单的图像滑块，在单击上一个/下一个按钮时可以在图像之间平滑切换。不幸的是，我没有任何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

Answer 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>

如何使用prev / next按钮构建纯CSS3图像滑块？

1 个答案: