Pure CSS Slideshow with transform fadein fadeout effects - CSS-Tricks

This topic is empty.

Viewing 1 post (of 1 total)

Author

Posts

April 3, 2014 at 4:07 pm #167541

Participant

I’m not able to make the transition of this slideshow to work with buttons, do you know how I could do?
I have this live example jsfiddle with this HTML:

<!DOCTYPE html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>myPage</title>
</head>
<body>
   <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
   <label for="button-1" class="button-label-1"></label>
   <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
   <label for="button-2" class="button-label-2"></label>
   <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
   <label for="button-3" class="button-label-3"></label>
   <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
 
   <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>
</body>
</html>

See live example for css.

Author

Posts

Viewing 1 post (of 1 total)

The forum ‘CSS’ is closed to new topics and replies.