CSS Slideshows

by | Jun 21, 2020 | 0 comments

CSS Slideshows

by | Jun 21, 2020 | CSS Tips and Tricks | 0 comments



http://billthegeek.com/members
CSS Slideshows

It’s about time. Now it is possible to make pure CSS Slideshows for your web site. You can make basic small image CSS Slideshows, full screen width CSS Slideshows, or even partial page CSS Slideshows.

Oh, I forgot to tell you the best part. These are purely Responsive CSS Slideshows, so when you create your lovely images and use the code, they will show up well on a big screen monitor or on a tiny little iPhone.

In this video you will see the CSS Slideshows that I have created. I have created two types. One of my CSS Slideshows swipes from one image to the next with the images moving from left to right. When you hit the last slide, all of the images “swish” before your eyes back to the original slide.

http://billthegeek.com/members

I added some other goodies to my CSS Slideshows. At the lower left hand side of all images, you will see text descriptions in a box. These descriptions fade in and out as you go from slide to slide. Another addition are the little buttons you see at that very bottom of the page so that you can click and go from one slide to the next.

I have made each of the CSS Slideshows downloadable so that you can plug in your own images and change the text descriptions at the bottom of the page. You can also replace the “hover” image that shows up when you hover over the buttons at the bottom of the page to go from slide to slide.

http://billthegeek.com/members

CSS Slideshows Challenges

These CSS Slideshows work well, but it seems that the one that fades and moves works in all modern browsers except for Opera. Opera fades the images, but does not move the image with the fade.

With the downloads, there are step by step video tutorials to show you how to edit image sizes and change the background colors of the text boxes that display the description text. Also, the videos show you how to take the existing code and files that you will download and place the code and the related CSS documents in to another Html document.

So there Ya Go! Enjoy and enjoy our CSS Slideshows.

http://billthegeek.com/members

source

[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-1">First name or full name</label> <input class="tnp-name" type="text" name="nn" id="tnp-1" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-2">Email</label> <input class="tnp-email" type="email" name="ne" id="tnp-2" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>