Max Castril Posted January 24, 2017 Share Posted January 24, 2017 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted January 24, 2017 Share Posted January 24, 2017 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. Link to comment Share on other sites More sharing options...
Max Castril Posted January 25, 2017 Author Share Posted January 25, 2017 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. Link to comment Share on other sites More sharing options...
Ingolme Posted January 25, 2017 Share Posted January 25, 2017 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. Link to comment Share on other sites More sharing options...
Max Castril Posted January 26, 2017 Author Share Posted January 26, 2017 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 26, 2017 Share Posted January 26, 2017 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. Link to comment Share on other sites More sharing options...
Max Castril Posted January 27, 2017 Author Share Posted January 27, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now