Jump to content

Slideshows in CSS3


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...