Pure CSS Image Sliders

[Jerba]

Recently, I made a widget that uses Angular to make an API request to a website which advertises local digital / tech events to make a little slider of the events from the date you load the page to the specified date (2 days by default, so today, tomorrow and the following days events will populate the slider), which if you’re interested you can see here http://goo.gl/EKCxw3

I populated the slides based on the $index of the ng-repeat i.e ng-attr-id="slide-{{$index}}" and used a sass loop to create a bunch of slide-# elements to accommodate for a reasonable amount of slides.

Anyway, since that works well I figured why not build just a generic image / content slider, and I did… Here’s the pen:

http://codepen.io/Responsive/pen/RWPvdd

It works and in an environment where you can use dynamic content to populate the slides, it works honestly better than I expected.

Do you think pure CSS sliders are worth using in a live website, or is it JS all the way? I figured that it might be worth while for School websites perhaps, considering most (in the UK at least) tend to disable Javascript in the browser.

[Senff]

considering most (in the UK at least) tend to disable Javascript in the browser.

That’s news to me! Interesting.

Do you think pure CSS sliders are worth using in a live website, or is it JS all the way?

I think any “pure CSS” solution has more to do with the fact that the creator wants to show it can be done without JS, than being more functional/efficient. Sometimes it’s about showing off what someone can do with just CSS.

Although I admire those examples (most of the time), I’m not a believer that it necessarily should be done without JS. There are cases where it’s better, but I believe they’re rare.

It’s like going from Paris to Rome: just because you can walk it (the more primitive method), doesn’t mean you should. In most cases, taking a car (the more advanced method) is the way to go.

[Jerba]

@Sneff & @Beverleyh

I should perhaps clarify a little regarding the disabling of Javascript. This is based mostly (if not completely) on personal experience with being at and working with local schools, However, I think the word ‘disable’ is perhaps somewhat inaccurate i’d probably lean more towards restrict. The school / college I have recently left disallowed javascript on all sites other than a select few such as the school website and other verified learning / teaching resource websites.

To conclude, I may be completely wrong (most likely), however, from personal experience it was my understanding that it was ‘common practice’ for javascript to be limited in schools.

[Author]

Posts