Простой адаптивный слайдер для сайта на чистом javascript

Содержание:

HTML5 Canvas Cover Flow
Краткое описание исходных кодов и принципа работы
Comparison (Before/After) Sliders
Multiple Slideshows on the Same Page
- Example
Шаблоны веб-сайтов для слайдеров
CSS
Images as Indicators
- Example
Шаг 2 – Основной код CSS
HTML:
Описание слайдера и принципа его работы
Manual Slideshow
Slideshow Indicators
- Example
- Example
Точки фиксации
2. HTML5 Gallery Slideshow
HTML структура Аккордеон СЛАЙДЕР
- CSS стили
- Анимируем отображение блоков

HTML5 Canvas Cover Flow

HTML5 Canvas Cover Flow — это трехмерная фотогалерея, создана на основании Mac Finder. У слайдера есть множество функций, которые позволяют демонстрировать изображения любым способом: горизонтальным, вертикальным, наклонным и т.д. Также, если необходимо, вы можете выбрать способ листания слайдов и стили по умолчанию.

Вдобавок, почти каждый аспект слайдера, включая цветовую гамму и графические элементы, может быть настроен под ваш сайт, а все параметры легко меняются в XML файле. Это значительно упрощает поддержку карусели.

Оптимизированный для мобильных устройств, он не только отлично отображается, но и действует как родное приложение, когда вы можете касаться, перетаскивать и поворачивать элементы управления.

Краткое описание исходных кодов и принципа работы

Адаптивный фон для сайта на css3

HTML структура слайдера:

<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__items">
      <div class="slider__item">
        ...
      </div>
      <div class="slider__item">
        ...
      </div>
      <div class="slider__item">
        ...
      </div>
      <div class="slider__item">
        ...
      </div>
    </div>
  </div>
  <a class="slider__control slider__control_prev" href="#" role="button"></a>
  <a class="slider__control slider__control_next" href="#" role="button"></a>
</div>

В разметке корневой элемент — это тег с классом .

Внутри него находятся:

— wrapper (обёртка для слайдов);
2 элемента — ссылки, оформленные в виде кнопок для перехода соответственно к предыдущему и следующему слайду;
точки или другими словами индикаторы — добавляются динамически посредством JavaScript кода;

Обертка содержит внутри , а он в свою уже очередь непосредственно сами item (слайды). Это элементы — .

Индикаторы () выполнены в виде нумерованного списка. Каждый элемент внутри него содержит атрибутом . В нём содержится индекс слайда. Он используется в JavaScript коде и определяет слайд на который нужно перейти в случае нажатия на него. Активный индикатор отмечается посредством класса .

Кнопки «назад» и «вперед» размечены с помощью элемента .

В определённый момент времени в слайдере отображается только один item, который не сдвинут относительно . Все другие слайды сдвинуты. Скрытие слайдов выходящих за пределы осуществляется с помощью свойства .

.slider__wrapper {
  overflow: hidden;
}

Перемещение item выполняется с помощью CSS трансформации. Для этого к и в нужные моменты времени добавляется CSS-свойство с нужным значением.

Например, когда к добавляется со значением , то браузер осуществляет переход к следующему слайду, а если наоборот, — то к предыдущему.

Анимация переход осуществляется помощью CSS свойства transition:

.slider__items {
  transition: transform 0.5s ease;
}

Скрипт слайдера написан на «чистом» JavaScript без использования jQuery и других каких-либо библиотек.

Он имеет следующую укрупнённую структуру:

// конструктор для создания экземпляров объектов типа SimpleAdaptiveSlider
function SimpleAdaptiveSlider(selector, config) { ... }
// добавляет класс к активным элементам и управляет видимостью кнопок управления
SimpleAdaptiveSlider.prototype._setActiveClass = function () { ... }
// выполняет смену слайдов
SimpleAdaptiveSlider.prototype._move = function () { ... }
// перемещает на слайд по его индексу
SimpleAdaptiveSlider.prototype._moveTo = function (index) { ... }
// включает таймер для автоматической смены слайдов и выключает его
SimpleAdaptiveSlider.prototype._autoplay = function (action) { ... }
// добавляет в разметку индикаторы
SimpleAdaptiveSlider.prototype._addIndicators = function () { ... }
// обновляет значения переменных, содержащих экстремальные значения слайдов
SimpleAdaptiveSlider.prototype._refreshExtremeValues = function () { ... }
// уравновешивает слайды (для зацикленности)
SimpleAdaptiveSlider.prototype._balancingItems = function () { ... }
// назначаем обработчики для событий
SimpleAdaptiveSlider.prototype._addEventListener = function () { ... }

// публичные методы
SimpleAdaptiveSlider.prototype.next = function () { ...  }
SimpleAdaptiveSlider.prototype.prev = function () { ... }
SimpleAdaptiveSlider.prototype.autoplay = function (action) { ... }

Comparison (Before/After) Sliders

Mario Duarte
August 14, 2017

HTML
CSS/SCSS
JavaScript/Babel (jquery.js)

About the code

Классы в javascript

A simple and clean image comparison slider, fully responsive and touch ready made with CSS and jQuery.

Matthew Steele
July 19, 2017

HTML
CSS/SCSS

About the code

Javascriptless Before/After Slider

A before and after slider with only html and css.

Huw Llewellyn
July 14, 2017

About the code

Before After Image Slider (Vanilla JS)

Vanilla JS, minimal, nice to look.
Made by Huw
July 3, 2017

download
demo and code

About the code

A «split-screen» slider element with JavaScript.

Demo Image: Before & After Slider Gallery With SVG Masks

Before & After Slider Gallery With SVG Masks

A little experiment for a before & after slider all inside a SVG. Masking makes it pretty simple. Since it’s all SVG, the images and captions scale nicely together. GreenSock’s Draggable and ThrowProps plugins were used for the slider control.
Made by Craig Roblewsky
April 17, 2017

download
demo and code

Demo Image: HTML5 Before & After Comparison Slider

HTML5 Before & After Comparison Slider

Uses customised range input for slider.
Made by Dudley Storey
October 14, 2016

download
demo and code

Demo Image: Responsive Image Comparison Slider

Responsive image comparison slider with HTML, CSS and JavaScript.
Made by Ege Görgülü
August 3, 2016

download
demo and code

Demo Image: HTML5 Video Before-and-After Comparison Slider

HTML5 Video Before-and-After Comparison Slider

HTML5, CSS3 and JavaScript video before-and-after comparison slider.
Made by Dudley Storey
April 24, 2016

download
demo and code

Demo Image: Image Comparison Slider

download
demo and code

Multiple Slideshows on the Same Page

Javascript

To operate multiple slideshows on one page, you must class the members of
each slideshow group with different classes:

Example

Шаблоны веб-сайтов для слайдеров

Многостраничные и одностраничные * шаблоны веб-сайтов Slider * могут быть основаны на адаптивном шаблоне начальной загрузки HTML, снабжать веб-страницы и целевые страницы современной витриной изображений карусели. Импортируйте галерею стоковых изображений в шаблон слайдера 3D-изображений и настройте анимированный вид для создания впечатляющего HTML-дизайна веб-сайта. Бесплатная загрузка html5 имеет простые бесплатные слайдеры для видео или музыки премиум-класса, чтобы увидеть полный блок функций и продуктов. Bootstrap 4, шаблон страницы вместе со слайдером контента. Шаблоны слайдера для демонстрации форм WordPress, отлично подходящие для журнала с полной параллакс-фотографией или шаблона слайдера контента для агентства современного веб-дизайна HTML5. Адаптивные к слайдерам шаблоны веб-сайтов используются в темах WordPress для заполнения сетки шаблонов страниц и создания уникальной навигации по списку меню.

Не каждый веб-разработчик может объяснить, как шаблоны начальной загрузки с помощью слайдера веб-сайта могут улучшить взаимодействие с пользователем. Бесплатный шаблон слайдера создает слайдер веб-сайта с помощью бесплатного веб-приложения bootstrap 4, в котором есть все необходимое для создания личного веб-сайта. Шаблоны CSS создают веб-дизайн, подходящий для вашего бизнеса. Если ваша компания зависит от аффилированного jquery, темы WordPress или изображений бесплатных шаблонов Joomla, например, веб-сайт-портфолио ресторана, журнала, организаторов свадеб, фотостудии, строительной компании, агентства шаблонов недвижимости bootstrap, новостей спортивных команд, студия моды или образовательные и туристические мероприятия, вы должны использовать одностраничные шаблоны и шаблоны веб-сайтов-слайдеров. Бесплатный шаблон целевой страницы Bootstrap 4 — это инструмент электронной коммерции и Woocommerce для продвижения вашего продукта. Используйте адаптивный одностраничный шаблон начальной загрузки 4, чтобы пропустить слайдер визуального контента и скомпилировать все под одним заголовком слайдера. Корпоративные шаблоны начальной загрузки уже содержат слайдер-витрину и справочный центр бесплатных шаблонов начальной загрузки в их базовом коде.

Предоставьте свои личные данные и купите сейчас и загрузите наш справочный центр, который научит вас создавать бесплатный HTML5-слайдер для веб-сайтов, шаблоны слайдеров с креативной каруселью, уникальные слайдеры-витрины или веб-сайты с слайдерами контента с партнерской программой, которая улучшит взаимодействие с пользователем. Прозрачный текст категорий или креативное описание программного обеспечения в шаблоне веб-сайта WordPress сделают ваш фоновый дизайн более отличительным и улучшат ваш маркетинговый статус. Бесплатный конструктор страниц тем WordPress с переключаемой навигацией отражает ваши популярные элементы и использует веб-шаблоны популярных категорий, чтобы сделать ваш блог-сайт простым, но лучше отображаемым благодаря эффекту параллакса и полностью адаптивным шаблонам дизайна для создания логотипов. Бесплатные плагины WordPress с помощью шаблонов могут создать лучший новый корпоративный бесплатный веб-сайт. Наш хостинг предоставляет учебные пособия по шаблонам WordPress для портфолио с онлайн-поддержкой из уроков на YouTube, которые вы можете скачать. Вы также можете связаться с нами через контактную форму CSS3 или прямо на нашу электронную почту Google. Однако обязательно ознакомьтесь с политикой конфиденциальности заранее. Мы предоставляем информацию о дизайне веб-сайтов, бесплатном бутстрапе 3, новейшем бутстрапе 4, шаблоне страницы, поэтому нажмите кнопку «Следуй за нами», чтобы получить его.

CSS

Для слайдера используются анимации CSS3 anim_slides и anim_titles. Первая применяется для отдельных слайдов, вторая — для текста описания. Для описания также изменяется положение и прозрачность.

/* Слайдер */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

Images as Indicators

An example of using images as indicators:

Example

Шаг 2 – Основной код CSS

На этом этапе мы создадим основной стиль слайдера. Для этого мы сбросим поля и отступы всех элементов слайдера, дадим им фиксированную ширину / высоту и положение.

.slider-wrapper ul,
.slider-wrapper li,
.slider-wrapper div,
.slider-wrapper img,
.slider-wrapper a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    list-style: none;
}
 
.slider-wrapper {
    width: 508px;
    overflow: hidden;
}
 
ul.s-thumbs li {
    float: left;
}
 
ul.s-slides,
ul.s-slides li,
ul.s-slides a,
ul.s-slides img {
    width: 500px;
    height: 350px;
    position: relative;
}
 
ul.s-slides {
    overflow: hidden;
    clear: both;
}
 
ul.s-slides li {
    position: absolute;
    z-index: 50;
}

HTML:

<div class=»slider-content»>
<div class=»header»>
<div class=»logo»>Пошаговый <span>слайдер</span></div>
</div>
<div class=»slider-wrapper»>
<div class=»slider-container»>
<div class=»control-nav»>
<ul></ul>
</div>
<div class=»next-button»>
<svg class=»arrow-right-5″ viewBox=»0 0 154 109″>
<symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″>
<g>
<polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/>
</g>
<g>
<polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/>
</g>
</symbol>
<use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» />
</svg>
</div>
<div class=»slide active»>
<div class=»slide-content «>
<div class=»clip-svg»>
<img class=»» src=»slide-1.jpg» alt=»» />
<div class=»title-wrapper»>
<div class=»title-1″>заголовок</div>
<div class=»title-2″>текст</div>
</div>
</div>
</div>
</div>
<!— еще слайды —>
<div class=»slide»>
<div class=»slide-content «>
<div class=»clip-svg»>
<img class=»» src=»slide-n.jpg» alt=»» />
<div class=»title-wrapper»>
<div class=»title-1″>заголовок</div>
<div class=»title-2″>текст</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=»footer-wrapper»>
<ul>
<li><a href=»#link»>ссылка</a></li>
<li><a href=»#link»>ссылка</a></li>
</ul>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<div class=»logo»>Пошаговый <span>слайдер</span></div>

</div>

</div>

<g>

</g>

<g>

</g>

</symbol>

</svg>

</div>

<div class=»title-1″>заголовок</div>

<div class=»title-2″>текст</div>

</div>

<!— еще слайды —>

<div class=»title-1″>заголовок</div>

<div class=»title-2″>текст</div>

</div>

<ul>

<li><a href=»#link»>ссылка</a></li>

</ul>

</div>

Описание слайдера и принципа его работы

ChiefSlider состоит из HTML, CSS и JavaScript кода.

HTML структура слайдера::

<div class="slider">
  <div class="slider__wrapper">
    <div class="slider__items">
      <div class="slider__item">
        <!-- Контент 1 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 2 слайда -->
      </div>
      <div class="slider__item">
        <!-- Контент 3 слайда -->
      </div>
    </div>
  </div>
  <!-- Кнопки -->
  <a href="#" class="slider__control" data-slide="prev"></a>
  <a href="#" class="slider__control" data-slide="next"></a>
</div>

Корневой элемент имеет класс .

В нём расположены:

– выступает в качестве обёртки;
– кнопки, для навигации по слайду (переход к предыдущим и следующим элементам).

Сдаиг слайдов в нужном направлении выполняется в JavaScript коде с помощью метода . Эта метод в зависимости от установленного свойства выполняет перемещение элемента в нужном направлении посредством CSS- трансформации.

Организация зацикленности слайдера выполняется также посредством CSS-трансформации, но не контейнера «», а уже самих элементов «».

Для того чтобы в коде можно было определить какой элемент нужно переместить, а какой не надо, к ним посредством JavaScript добавляются дополнительные data-атрибуты. Они содержат индекс слайда, его текущее положение и значение трансформации.

Добавление этих атрибутов при инициализации слайдера в коде реализовано так:

// $itemList – это элементы .slider__item
for (var i = 0, length = $itemList.length; i < length; i++) {
  $itemList.dataset.index = i;
  $itemList.dataset.order = i;
  $itemList.dataset.translate = 0;
}

Крайние индексы элементов, трансформаций и сами эти элементы в JavaScript хранятся в свойствах: , , , , и .

Обновление этих свойств осуществляется с помощью метода .

Перемещение слайдов для организации зацикленности выполняется с помощью метода .

Автоматическая смена слайдов через определённые промежутки времени осуществляется с помощью функции . Она запускает метод через указанные интервалы времени, которые определяются значением свойства :

this._intervalId = setInterval(function() {
    this._direction = 'next';
    this._move();
  }.bind(this),
  this._config.interval
);

Остановка автоматической смены слайдов при поднесении к нему курсора осуществлена следующим образом:

function onMouseEnter(e) {
  this._autoplay('stop');
}
function onMouseLeave(e) {
  this._autoplay();
}
$root.addEventListener('mouseenter', onMouseEnter.bind(this)); $root.addEventListener('mouseleave', onMouseLeave.bind(this));

Кроме этого, целесообразно также остановить автоматическую смену слайдов, когда страница переходит в фоновый режим (при переключении на другую вкладку).

В коде это выполнено с использованием события следующим образом:

function onVisibilityChange() {
  if (document.visibilityState === 'hidden') {
    this._autoplay('stop');
  } else if (document.visibilityState === 'visible') {
    if (this._config.loop) {
      this._autoplay();
    }
  }
}
document.addEventListener('visibilitychange', onVisibilityChange.bind(this));

В слайдере также реализована функция, которая позволяет переинициализировать слайдер при изменении ширины окна браузера. При этом обновление слайдера выполняется только тогда, когда при изменении ширины области просмотра (viewport) количество отображаемых элементов изменяется. Выполняется это с помощью функции .

function onResize() {
  window.requestAnimationFrame(this._refresh.bind(this));
}
window.addEventListener('resize', onResize.bind(this));

Manual Slideshow

Displaying a manual slideshow with W3.CSS is very easy.

Just create many elements with the same class name:

Example

And two buttons to scroll the images:

Example

And add a JavaScript to select images:

Example

JavaScript Explained

First, set the slideIndex to 1. (First picture)

Then call showDivs() to display the first image.

When the user clicks one of the buttons call plusDivs().

The plusDivs() function subtracts one or adds
one to the slideIndex.

The showDiv() function hides (display=»none»)
all elements with the class name «mySlides», and displays (display=»block»)
the element with the given slideIndex.

If the slideIndex is higher than the number of elements (x.length),
the slideIndex is set to zero.

If the slideIndex is less than 1 it is set to number of elements
(x.length).

Slideshow Indicators

An example of using buttons to indicate how many slides there are in the slideshow, and which slide the user is currently viewing.

❮ Prev
Next ❯

1
2
3

Example

Another example:

Example

Точки фиксации

Как заметил Майкл Шарнагль, некоторые браузеры, включая Safari и Firefox, поддерживают простой CSS-метод фиксации слайдов при прокрутке или использовании клавиш со стрелками. Так как Safari не поддерживает (уже поддерживается с , прим. переводчика), то это один из способов сделать удобнее пользователям этого браузера. Мешанина из проприетарных и стандартных свойств ниже: вот что сработало в нашем случае.

 {   -webkit-overflow-scrolling: touch;  -webkit-scroll-snap-type: mandatory;  -ms-scroll-snap-type: mandatory;  scroll-snap-type: mandatory;  -webkit-scroll-snap-points-x: repeat(100%);  -ms-scroll-snap-points-x: repeat(100%);  scroll-snap-points-x: repeat(100%);}

Фиксация прокрутки поддерживается в демо со связанным контентом, если хотите изучить этот способ. Совет: часть с относится к 100% ширины каждого слайда.

2. HTML5 Gallery Slideshow

HTML5 Gallery Slideshow — отличный выбор для демонстрации изображений и текста в виде слайдера. Главным преимуществом продаж карусели является ее невероятная простота в использовании. После внедрения в необходимое место, она адаптируется по размеру родительского контейнера, то есть к тегу div или другому тегу HTML.

Еще одна замечательная особенность заключается в возможности расположения нескольких галерей с разным набором изображений и настроек на одной и той же странице.

Плагин легко настраивается. Вы можете поменять цветовую гамму, изменить кнопки и другие элементы, а потом интегрировать в свой сайт. Слайдер оптимизирован для бесперебойной работы на мобильных устройствах.

HTML структура Аккордеон СЛАЙДЕР

Создаем блок DIV с классом .dws-wrapper, который будет являться нашей оберткой. В нутрии его размещаем UL с классом .accordion, далее списки LI в количестве 7 штук и в нутрии них располагаем картинки.

div.dws-wrapper>ul.accordion>li*7>img[src=img/bg1.jpg]

Прописываем путь к разным картинкам, как видим, они отобразились на страничке и теперь можно переходить к описанию стилей.

CSS стили

Открываем styles.css, верхней строкой задает задний фон к странице. Cделаем отступ, и разберем, какие есть варианты реализации данного аккордеона. Как вариант можно отфлотить списки LI, но не всегда такой вариант нам подойдет. Давайте лучше покажу на примере по чему.

Для этого отбираем ul.accordion li и пропишем им float:left;, зададим ширину в 80px, и при помощи overflow: hidden; скроем все лишнее. Данный способ хорош если страничка фиксированной ширины или адаптированная медиа запросами, так как если сейчас будем ее сжимать, то блоки с картинками будут съезжать в низ.

ul.accordion li{
 float:left;
 width: 80px;
 overflow: hidden;
}

Для того что бы это избежать можно задать фиксированную ширину блоку UL в 600пик.

ul.accordion {
 width: 600px;
}

Теперь списки у нас не съезжают, но и появляется полоса прокрутки. Можно конечно этого избежать при помощи дополнительного описания кода, но зачем ломать голову и утруждать себя лишней писаниной, когда у нас есть замечательное свойство display: flex;.

Удалим все и напишем повторно с помощью этого свойства.

Для начала присвоим обертке максимальный размер в 650 пик. и отцентруем блок по середине.

.dws-wrapper {
 max-width: 650px;
 margin: 0 auto;
}

Затем в место ширины которую мы до этого задавали блоку UL пропишем display: flex;.

Спискам LI устанавливаем ширину в свернутом виде width: 50px; и скрываем элементы, которые выходят за пределы блока при помощи overflow: hidden; . Теперь сжимая экран, они у нас ужимаются и растягиваются. Списки стали резиновыми, и теперь отцентруем их посередине экрана при помощи justify-content: center; , а сверху сделаем небольшой отступ и уберем padding в ноль.

ul.accordion{
 display: flex;
 justify-content: center;
 margin-top: 150px;
 padding: 0;
}

Установим ширину картинок в 300 пик.

ul.accordion img{
 width: 300px;
}

Перейдем к спискам, и пропишем им стили.

Зададим отступы padding: 1px 1px 0;, при наведении отобразим курсор cursor:pointer;, сделаем списки блочными элементами display:block; и добавим тени при помощи box-shadow:1px 3px 15px #7e807e;.

ul.accordion li{
width: 50px;
overflow: hidden;
padding: 1px 1px 0;
cursor:pointer;
display:block;
-moz-box-shadow:1px 3px 15px #7e807e;
-webkit-box-shadow:1px 3px 15px #7e807e;
box-shadow:1px 3px 15px #7e807e;
 }

Анимируем отображение блоков

Далее опишем стили при наведении, для этого устанавливаем ширину картинки в 300 пик., изменяем тень. Задаем, анимирование растяжения при помощи transition в одну секунду.

ul.accordion li:hover{
 width:300px;
 -moz-box-shadow:1px 3px 15px #36c5fa;
 -webkit-box-shadow:1px 3px 15px #36c5fa;
 box-shadow:1px 5px 15px #36c5fa;
 -webkit-transition: all 1s;
 -moz-transition: all 1s;
 -ms-transition: all 1s;
 -o-transition: all 1s;
 transition: all 1s;
}

Что бы не схлопывалась картинка, когда убираем курсор, присвоим списку transition, но теперь зададим продолжительность в 1.5 секунды, что бы картинка сживалась немного медленнее.

ul.accordion li{
width: 50px;
overflow: hidden;
padding: 1px 1px 0;
cursor:pointer;
display:block;
-moz-box-shadow:1px 3px 15px #7e807e;
-webkit-box-shadow:1px 3px 15px #7e807e;
box-shadow:1px 3px 15px #7e807e;
 -webkit-transition: all 1.5s;
 -moz-transition: all 1.5s;
 -ms-transition: all 1.5s;
 -o-transition: all 1.5s;
 transition: all 1.5s;
}

Зафиксируем в развернутом состоянии изображение посередине, для этого отбираем центральный элемент списка при помощи :nth-child(4) и назначаем ему ширину в 300 пик.

ul.accordion li:nth-child(4){
 width: 300px;
}

Далее нужно сделать так, что бы при наведении на другие элементы, данная картинка сворачивалась. Для этого просто указываем текущему списку при наведении 50 пик.

ul.accordion:hover li:nth-child(4){
 width: 50px;
}

И за тем, нужно полностью разворачивать центральную картинку если она была свернутой при наведении на нее. Отбираем картинку и задаем ей ширину в 300 пик.

ul.accordion li:nth-child(4):hover{
 width:300px;
}

В принципе и все, получилась довольно простой и симпатичный Аккордеон СЛАЙДЕР на чистом CSS. Как видите код простой, всего несколько строк и мы получаем интересный эффект при наведении. К тому же блоки резиновая и легко вписывается в страничку сайта.