Has anyone built an image slider like this

I am thinking about building an image slider, where for instance the middle image would be in colour and the 2 to the side greyed out, and the user can use left right arrows.

It will be like the carousel in the link below, which is at the bottom of the page.


Any ideas?

1 Like

Is Javascript dependency a requirement? :slight_smile:

Not really, I just thought it would probably be done that way

Well this is the link to the slider used

Centre Mode

Comes down to CSS in the end and styling the ‘slick-active’ or ‘slick-current’ class differently to the other slides

New one to me but I see in CSS you can use a filter for the black and white vs colour.

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

See link

If you wanted something a bit more lightweight, I have used gliderjs recently (No Jquery needed). I am sure with the right CSS you could achieve similar results.


Slick is a good slider and its best not to re-invent the wheel unless you want something very basic and lightweight. :slight_smile:


I want that house :slight_smile:


lol ye me too, there some unbelievable houses on there, but ye slick looks good, will go with that.

Thanks guys

1 Like

Used to live and work in Chiswick years ago. Nice area too :slight_smile: