具有动画延迟淡入淡出效果的纯 CSS 幻灯片答案

【问题标题】：Pure CSS Slideshow with animation delay fadein fadeout effects具有动画延迟淡入淡出效果的纯 CSS 幻灯片
【发布时间】：2014-04-10 19:56:15
【问题描述】：

我有这个纯 CSS 幻灯片在“自动播放”中工作：jsfiddle。我想将此幻灯片转换为使用按钮，仅使用 CSS，使用此 HTML：

   <label for="button-4" class="button-label-4"></label>
   <label for="button-1" class="sp-arrow sp-a1"></label>
   <label for="button-2" class="sp-arrow sp-a2"></label>
   <label for="button-3" class="sp-arrow sp-a3"></label>
   <label for="button-4" class="sp-arrow sp-a4"></label>

   <ul class="cb-slideshow">
      <li>
         <span>Image 01</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 02</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 03</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
      <li>
         <span>Image 04</span>
         <div>
            <p class="text_products">Some Text</p>
         </div>
      </li>
   </ul>

你知道我该怎么做吗？我已经尝试过，但不起作用。

请参阅jsfiddle 了解 css。

【问题讨论】：

基本可以使用tabindex + 伪元素来绘制箭头：codepen.io/gc-nomade/pen/akIht
去这个 - creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/#sl_i3
@PravinVaichal 事情是 想要的淡入/淡出效果，它只是简单地添加到我的基本示例中，在图像上设置不透明度codepen.io/gc-nomade/pen/qHFbv tabindex 可以是在 div 或 figure 上设置并获取任意大小。该方法必须保留，但风格取决于您的想象:) 您的示例甚至可以在没有动画的情况下运行，只需转换：codepen.io/gcyrillus/pen/vqkgf，但这不是问题:)
好的，我知道这些例子，它们都是使用保证金规则进行的正常过渡。不像我的，他也有两个“幻灯片”同时显示，有两种不同的效果。带有图像，
带有文本。
好吧，我迷路了，你展示了 HTMl 的一部分并链接到一个更复杂的滑块。所以他的这就是你要找的codepen.io/gc-nomade/pen/CJpsd 还是别的东西而不仅仅是上一个/下一个箭头？使用 javascript 作为滑块没有问题 :)