It's called 'Block-slider' not very original I know, I've never been very good at naming things, anyway there's thousands of very capable sliders out in the wild, and in many cases sliders are not great in terms of UX and conversion yada yada..

 

On a project I was working on however I had a very specific use case, but one that I've come across numerous times..

 

We had a list of company logos, companies our client has worked with - there's 9 of them in total, that number could increase or decrease via the CMS and rather than put them tiled layout, I wanted them to all remain on a single row and not to tile at smaller screens.

 

This has a few issues

• At very small screens the logos will be too small
• We can't set % width columns that will fit on a single row without knowing the number of items.

So I built this slider that enables this.

You can use CSS to dictate how many logos to be visible in the screen at any given moment using media querys and % widths on the items - if you have 12 items and you set the width to 25% you will have 4 visible items, with a total of 3 slides.

You can alternatively use whatever responsive grid system you are using on the items to set the widths.

 

The slider slides one item at a time as opposed to an entire slide. On a screen resize event the slider resets to the beginning and readjusts to the new item dimensions.

 

You can control the interval and transition timing and classnames easily via the API. There are no user controls for this slider as the use case is very specific and I wanted the code to remain minimal (2.1k minified)

 

It does not require jQuery or any other library, however if it detects jQuery's presence it will register itself as a plugin.

 

You can see a quick demo I put up here: http://codepen.io/rbrtsmith/pen/ZbeXqa

 

And read more about how to use this in the repository on GitHub https://github.com/rbrtsmith/BlockSlider

 

There is a bug that I'm working to fix in Safari, but as yet I've had no luck, if anybody fancies lending a hand with testing out the issue in safari please feel free to do so

 

What's the bug exactly?

 

Edit: argh, annoying!

 

You saw it! when screen resizes it miscalculates the widths.

Really strangely when I add a debugger breakpoint and step through it in Safari everything works, even when you resize the screen. Remove the breakpoint and it bugs! very very odd.

Like I say Safari the new IE. Even in IE9 it worked first time!

I think I've fixed the Safari bug, it seems that Safari takes longer to complete a layout, and my calculations on safari were running too early.

So I've had to add in a delay for Safari of 500ms on the screen resize event.. It's a bit hacky, but I've tried to make it as painless as possible by hiding the slider momentarily when the screen resizes. I've also improved the resize function, going from a debounce to only being called once the screen has ceased resizing.

Thankfully there's no such delay on the decent browsers.

Edited October 3, 201510 yr by rbrtsmith

Looks great! Well done!

 

Thanks. Down to 1.8kb now too

 

But upto 2.5k as I added a load of error handling, that logs out useful warnings to the console and allows the module to fail gracefully.

Edited October 4, 201510 yr by rbrtsmith