Slideshows in CSS3

[Max Castril]

Hello CSS community!

 

I have a general question about slideshows with CSS3 and Javascript. The 'TryItEditor' examples all call http://www.w3schools.com/lib/w3.css which, when you look at it is a huge block of unintelligible (to me anyway) script. e.g.:

 

----------------------------------------------------------------------------------------------------------------------

"a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}

dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}
img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}"

--------------------------------------------------------------------------------------------------------------------------

(this is a small portion).

 

I use html instead of a website editor such as Joomla or Dreamweaver as I am a minimalist and don't like putting huge amounts of code onto the server (giving away my age here). Is there some way that I can produce slideshows myself without recourse to something like this stylesheet. Looking through it, it seems to have catered for every concievable slideshow arrangement that will ever be required. I'd prefer to simplify things if I can.

 

Thanks

 

Max

 

[dsonesuk]

That is the WHOLE w3css framework used for responsive layout, of all elements that could be used within a website page. if you want to minimise it, inspect the elements used to make slideshow, and retrieve classes/id styling properties and JavaScript that make up the slideshow.

[Max Castril]

Thanks for that dsonesuk. Interestingly, if you look at http://www.w3schools.com/howto/howto_js_slideshow.asp you will find that the code doesn't include a reference to the W3 CSS file. However, in Chrome and Oracle I get question marks instead of left/right arrows. The CSS doesn't seem to describe the arrows:

 

/* Next & previous buttons */

.prev, .next {

cursor: pointer;

position: absolute;

top: 50%;

width: auto;

padding: 16px;

margin-top: -22px;

color: white;

font-weight: bold;

font-size: 18px;

transition: 0.6s ease;

border-radius: 0 3px 3px 0;

}

If I could get the arrows to work, I feel that it would be a more elegant solution to the question.

Thanks again for your comment.

[Ingolme]

The arrows are in the HTML and they are unicode characters. Make sure your page is encoded in UTF8.

 

You could replace them with an image or web font icon.

[Max Castril]

Ok, thanks. Found it here:

 

<a class="prev" onclick="plusSlides(-1)">?</a>

<a class="next" onclick="plusSlides(1)">?</a>

 

....which I changed to:

 

<a class="prev" onclick="plusSlides(-1)">Prev</a>

<a class="next" onclick="plusSlides(1)">Next</a>

Seems an odd character to put in a demo though.

This also works:...

<a class="prev" onclick="plusSlides(-1)">❮</a>

<a class="next" onclick="plusSlides(1)"❱</a>

Max

[Ingolme]

The demo worked properly for me. It would break if you saved the file with the wrong encoding.

 

Unicode characters are useful so that the user doesn't have to download images or web fonts.

[Max Castril]

That is strange Ingolme. If I click on http://www.w3schools.com/howto/howto_js_slideshow.asp and then go down to the first "Try it yourself" (under the "add javascript" and above "Automatic slideshow") then it shows ?s instead of arrows. I now have it working in my program as I have changed the characters as seen in my post above. Thanks for your help on this everyone.