Updated Mozilla Firefox, it was 2 years ago and on the start page, the developers have done exactly the same slider, but entirely in JS. And if it's a long time to play, then he started terribly slow. I decided that I would be able to do the same only without JS. I made it, and I had the idea to write this website and the first to write an article about this slider. But I didn't like my slider because of the binding width.

Now when I heavily modified, we removed the reference to width, I can write an article about it, although it is already the 15th on my account.


The trick

If the elements (cells) of the slider is to do with display: inline-block, when developing transition, which is transition-timing-function ease, cells will not be able to expand/shrink and it will appear in the empty space (background slider). To avoid this, the slider should be display: tableand its cells - display: table-cell. Then, even if the cells are to catch, they will stretch in proportion, and this effect will be.

The following is an example of code that is a feature of the slider.

  1. #slider {
  2. display: table;
  3. height: 400px;
  4. width: 100%;
  5. }
  6. #slider > * {
  7. display: table-cell;
  8. height: 100%;
  9. width: 25%;
  10. overflow: hidden;
  11. transition: width 1s;
  12. }


Another trick

To increase the width of the induced cell and reduce the width of all the others, I need to track that the slider be under :hover. Next, an example of the same slider, which shows how to do it.

  1. #slider:hover > .slide {
  2. width: 10%;
  3. }
  4. #slider:hover > .slide:hover {
  5. width: 70%;
  6. }



  • Elements inside the slides had to do with position: absolute, otherwise the text when you reduce the width starts to increase height slide
  • The height of the slider can be changed via the media-queryin the example I change the height from 400px to 600pxand width to 600px
  • Background on slides is background-size: coverin order not to be attached to the height and width of images
  • transition has different meanings according to the appearing and disappearing blocks. This is achieved by overriding the property transition in the state of :hover (see example below)

  1. .slide-content {
  2. opacity: 0;
  3. transition: opacity .2s;
  4. }
  5. .slide:hover > .slide-content {
  6. opacity: 1;
  7. transition: opacity 1s ease 1s;
  8. }


More features

In response to the question, is it possible to change the number of slides, I then downloaded the file where I made a floating number of slides from 1 to 7. You can do more.

All on the basis of article

Immediately there was a trick.

To change the priority of application CSS (cascading), I made a selector on diminishing slides, like so:

  1. .slider:hover > .slide:nth-child(1n):nth-of-type(1n) {
  2. width: 10%;
  3. }


Also for ease of testing the slider in different number of slides, made a small interface (see example).

Example works a bit incorrect, as I hide elements with display: none;in the real project these elements will not be simple.

Live demo
Download ZIP

Found comments - 2

Козлов Андрей November 21, 2016
В ответ на Ваш вопрос, я переписал статью и изменил демо файл. Теперь в нем можно выбрать требуемое количество слайдов от 1 до 7. :-)
Буго November 18, 2016
Беда всех цсс слайдеров в том, что если надо добавить убавить слайд вся красота рушится. Можно ли этого избежать? Я смотрю на фиксированную ширину в 25%....
Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C

Designer avatar

Hairs/Hats Mouth
Eyes Glasses