Is there a better way to create my slider using HTML5 and CSS3 exclusively?

Report · Sep 05, 2017

Hi,

I have been continuing my quest to hand code my own website by adding an HTML/CSS slider to the homepage. I have getting the slider to work and have added some placeholder images from Google but I am really not happy with it.

Sometimes the animation is jerky
I dont like how abrupt the animation is
The last slide doesn't display for the correct length of time

I am convinced that there is a better way to create the slider. The information on W3Schools about sliders all relates to using javascript, which I really don't want to do. I want to stay away from javascript as much as possible and code only in HTML5 and CSS3. The reason for this, is that I want to eventually move onto coding a mobile first site according to the principles of progressive enhancement and so I would much rather learn to code active, responsive sites without relying on any 3rd party libraries.

Anyway; as I said, I am sure there is a better way for me to create the slider. Could someone please take a look at my code and tell me how I can improve it.

A live page can be found at: ARCNET

My code is hosted in a public repo on Github.

index.html source code: arcnet.io/index.html at master · jaygtel/arcnet.io · GitHub

global.css: arcnet.io/global.css at master · jaygtel/arcnet.io · GitHub

custom.css: arcnet.io/custom.css at master · jaygtel/arcnet.io · GitHub this is where I have coded the keyframes and set the style rules for the slider

Thanks so much to everyone who takes the time to help me out

Jay

Report · Sep 05, 2017

When you say slider, do you mean a range slider or an image slider?

Range - <input type="range"> - HTML | MDN

Image - Bootstrap Carousel | WOW : jQuery Slider w/o Coding : jQuery Slideshow

Range sliders are easy to do with HTML5.

Image Sliders are a bit more tricky. I'm not saying you can't do it manually but I'm of the opinion that jQuery library is already loaded in most people's browser cache because practically every website in the world uses it for one thing or another. If it's already there, you may as well use it.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 05, 2017

Thanks for your reply @Nancy OShea

I should have been more specific. I was referring to an image slider.

To be a bit more specific though, I am referring to an automated slide show of images - something akin to a carousel.

Thanks

Jay

Report · Sep 05, 2017

Right. If you want backwards support for older & lesser browsers you must use some jQuery /Javascript. CSS3 alone is not going to fulfill your requirements.

Building for the modern web is something of a tightrope walk between the best user experience you can provide for the vast majority of users without breaking the bandwidth bank for people on slow connections.

My solution has been to offer a really nice experience to the devices that can handle it and keep it away from those that can't.

IMO, it's naive to think you can do everything you need to do without some help from jQuery/Javascript.

Just my 2 cents.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 05, 2017

Hi Nancy, I had a look at the links and i still dont understand, im new to this, i just got the range slider to show in photoshop but it doesnt do anything, please help me

Report · Dec 05, 2017

For a simple range slider, copy & paste the following code into a new, blank document. Save & preview in browsers.

<!doctype html>

<head>

<title>HTML5 Range Slider Demo</title>

<style>

#slidecontainer { width: 100%; }

.slider {

-webkit-appearance: none;

width: 100%;

height: 15px;

border-radius: 5px;

background: #d3d3d3;

outline: none;

opacity: 0.7;

-webkit-transition: .2s;

transition: opacity .2s;

}

.slider:hover { opacity: 1; }

.slider::-webkit-slider-thumb {

-webkit-appearance: none;

appearance: none;

width: 25px;

height: 25px;

border-radius: 50%;

background: #4CAF50;

cursor: pointer;

}

.slider::-moz-range-thumb {

width: 25px;

height: 25px;

border-radius: 50%;

background: #4CAF50;

cursor: pointer;

}

</style>

</head>

<body>

<h1>Custom Range Slider</h1>

<p>Drag the slider to display the current value.</p>

<p>Value: <span id="demo"></span></p>

</div>

var slider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = slider.value;

slider.oninput = function() {

output.innerHTML = this.value;

}

</script>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 05, 2017

naeema79951470 wrote
i just got the range slider to show in photoshop but it doesnt do anything, please help me

You need some JavaScript to make your range slider interactive.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Sep 06, 2017

Have a look at the css keyframes version at the link below. Very similar to the one you are using but the slides reverse once the end slide of the animation is reached, making it a smoother workflow, rather than jumping to the first slide:::

Simple CSS Content Slider! [VOICE TUTORIAL] - YouTube

Report · Sep 06, 2017

You can certainly use just html and css for an image or content slider, but if you wish it to work in IE9 and below it will not work, any browser after IE9 should not have any problems, including smartphone/tablet mobile device browsers.

Can you tell us which browsers/devices you intend to support, and more importantly how advanced you yourself think your knowledge of css is, as this is not a beginner coding project.

Report · Sep 06, 2017

Hi pziecina

When I began my project, I made the decision to only support support browser versions >IE9 initially. This was to make it easier for me when learning to hand code.

My coding skills are probably equal to a second year college/university student as I studied web design and development at university for my first two years. However, it has been going on 10 years now since I have applied those skills directly and hand coded anything myself.

Which is why I started this project. One that was just for myself, with no real commercial value. So it doesn't matter if I screw it up or how long I take. I can spend the time to get back into coding again and familiarizing myself with the latest practices and who knows LOL I might not get yelled at as much by the developers complaining I have screwed up their code WYSIWIG to make things look pretty LOL.

Cheers

Jay

Report · Sep 06, 2017

You will find much has changed in the last 10 years, and what was the exclusive domain of javascript being an absolute requirement, no longer applies.

You should forget everything older than html 5, as older versions are now being considered by the W3C for marking as obsolete. css has also changed dramatically, and much can be achived just by using many of the newer css features without any js being required.

As an example, whilst old this demo i created 5 years ago for the use of css animations can now be done completely using just css -

http://www.pziecina.com/Adobe/3d_lightbox/3dcarousel_withLightbox.html

The best place to start would in my opinion be a good book on css3, such as -

https://www.amazon.co.uk/Book-CSS3-Developers-Future-Design/dp/1593275803/ref=sr_1_8?s=books&ie=UTF8...

As trying to build something as simple as an image slider, (simple being a relative term) without thouroughly understanding the newer css possibilities is never going to be easy.

For examples of css only image sliders see -

https://corpocrat.com/2015/12/09/20-cool-pure-css-sliders-without-jqueryjavascript/

Most of the examples do still require some work in order for them to work smoothly, which the book on css3 will help with, (or post back here). Jon's comments about your use of keyframes and timing are very valid, and we know that it is not an easy subject to learn.

Report · Sep 06, 2017

The odd timing issue is caused by the keyframe % and your animation duration.

You start out with 20% of the animation duration for the first slide. (two keyframes set to 0 and 20% with no left movement)
The next slide moves in over 5% of the animation duration, then sits for 20%.
The next slide comes in over 5%, sits for 20%.
The next comes in over 5%, sits for 20%.
The final slide comes in over 5%, but has no "sit" duration so the whole show snaps to the beginning again as soon as it comes into view.

You could do one of a couple things here...

You could even out the keyframe durations, and add a "sit" keyframe to the end, if you want the animation to spend the same amount of time on each. Increase the duration of your animation property, then change the % values in the keyframes so each slide moves in over the same % and then sits for the same %.

It would be easier, with your current code, to duplicate the first image at the end of the slideshow instead. It would essentially trick the user into thinking the slideshow is a carousel, and ends where it begins, when in reality it snaps back to the beginning (but transitioned smoothly into a duplicate image before snapping to that same image).

Basically, get rid of the green image at the end, and replace it with a duplicate of the slideshow's first image, without touching your keyframes.

Is there a better way to create my slider using HTML5 and CSS3 exclusively?

1 Correct answer