Слайдер для сайта на css и javascript

Содержание:

HTML:
Меню
Настройка слайдера
HTML:
2. HTML5 Gallery Slideshow
Создание галереи слайд-шоу
Images as Indicators
- Example
Адаптивность
Comparison (Before/After) Sliders
Simple Sliders
JavaScript:
JavaScript слайд шоу на базе разработанной библиотеки
Что использовать при создании only css слайдера без js?
- Недостатки такого css слайдера?
- Преимущества
HTML:

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>

Панель значковЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полной страницыВверх НавигацияОтзывчивый TopnavПанель поискаИсправлена боковая панельБоковая навигацияПолноэкранная навигацияМеню Off-CanvasНаведение с помощью кнопокМеню горизонтальной прокруткиВертикальное менюНижняя навигацияОтзывчивый снимок NavСсылки на нижнюю границуСсылки справаЦентрированные ссылки менюИсправлено менюСлайд-шоу в прокруткеСкрыть Navbar в прокруткеПрикрепленное NavbarВыпадающие окна HoverНажмите «Раскрывающиеся окна»Раскрытие в ТопнавеРаспространение в СиденеОткроется панель NavbarDropupMega MenuпагинацияПанировочные сухариГруппа кнопокГруппа вертикальных кнопокВажная социальная панельОтзывчивый заголовок

Настройка слайдера

Количество одновременно отображаемых элементов, как уже было отмечено выше, задаётся с помощью CSS. По умолчанию слайдер отображает в активной области только один слайд.

Пример 1. Инициализация chiefSlider с одним активным слайдом (без зацикливания):

new ChiefSlider($slider, {
  loop: false // без зацикливания
});

Пример 2. Слайдер с одновременным отображением 3 слайдов на всех устройствах (без зацикливания):

<!-- Настройка в CSS -->
<style>
.slider__item {
  flex: 0 0 33.3333333333%; /* ширина слайда */
  max-width: 33.3333333333%;
}
</style>

<!-- JavaScript -->
<script>
  const $slider = document.querySelector('');
  new ChiefSlider($slider, {
    loop: false // без зацикливания
  });
</script>

Пример 3. С зацикливанием:

new ChiefSlider($slider, {
  loop: true // с зацикливанием (по умолчанию)
});

Пример 4. С автоматической сменой слайдов и индикаторами:

<div class="slider" data-slider="chiefslider">
  ...
  <!-- индикаторы -->
  <ol class="slider__indicators">
    <li data-slide-to="0"></li>
    <li data-slide-to="1"></li>
    <li data-slide-to="2"></li>
    <li data-slide-to="3"></li>
    <li data-slide-to="4"></li>
  </ol>
</div>
...

<script>
document.addEventListener('DOMContentLoaded', function() {
  // получаем корневой элемент слайдера
  const $slider = document.querySelector('');
  new ChiefSlider($slider, {
    loop: true,
    autoplay: true, // включение автоматической смены слайдов
    interval: 5000, // интервал в мс
  });
});
</script>

Пример 5. Использование слайдера для статей или постов (обновляющий своё состояние при изменении размеров окна браузера):

<style>
  /* ... */
  .slider__item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  @media (min-width: 768px) {
    .slider__item {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }
  @media (min-width: 1200px) {
    .slider__item {
      flex: 0 0 33.3333333333%;
      max-width: 33.3333333333%;
    }
  }
</style>

...

<script>
document.addEventListener('DOMContentLoaded', function() {
  // ...
  const slider = new ChiefSlider($slider, {
    loop: true,
    autoplay: true,
    interval: 5000,
    refresh: true, // обновление состояния при изменении размеров окна браузера
  });
});
</script>

HTML:

Для начало нам нужно сделать подходящий HTML файл.

XHTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>

<head>

<title>Слайдер</title>

</head>
<body>

</div>

<button class=»btnRight»>Right</button>

</body>
</html>

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

2. HTML5 Gallery Slideshow

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

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

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

Создание галереи слайд-шоу

Шаг 1) добавить HTML:

Пример

<!— Container for the image gallery —><div class=»container»> <!— Full-width images with number text —> <div class=»mySlides»>
<div class=»numbertext»>1 / 6</div>      <img src=»img_woods_wide.jpg»
style=»width:100%»> </div> <div class=»mySlides»>
<div class=»numbertext»>2 / 6</div>      <img src=»img_5terre_wide.jpg»
style=»width:100%»> </div> <div class=»mySlides»>
<div class=»numbertext»>3 / 6</div>      <img src=»img_mountains_wide.jpg»
style=»width:100%»> </div> <div class=»mySlides»>
<div class=»numbertext»>4 / 6</div>      <img src=»img_lights_wide.jpg»
style=»width:100%»> </div> <div class=»mySlides»>
<div class=»numbertext»>5 / 6</div>      <img src=»img_nature_wide.jpg»
style=»width:100%»> </div> <div class=»mySlides»>
<div class=»numbertext»>6 / 6</div>      <img src=»img_snow_wide.jpg»
style=»width:100%»> </div> <!—
Next and previous buttons —> <a class=»prev» onclick=»plusSlides(-1)»>❮</a>
<a class=»next» onclick=»plusSlides(1)»>❯</a> <!— Image text —> <div
class=»caption-container»>    <p id=»caption»></p>
</div> <!— Thumbnail images —> <div class=»row»>    <div
class=»column»>      <img class=»demo cursor» src=»img_woods.jpg»
style=»width:100%» onclick=»currentSlide(1)» alt=»The Woods»>
</div>    <div class=»column»>
<img class=»demo cursor» src=»img_5terre.jpg» style=»width:100%» onclick=»currentSlide(2)»
alt=»Cinque Terre»>    </div>
<div class=»column»>      <img class=»demo
cursor» src=»img_mountains.jpg» style=»width:100%» onclick=»currentSlide(3)»
alt=»Mountains and fjords»>    </div>
<div class=»column»>      <img class=»demo
cursor» src=»img_lights.jpg» style=»width:100%» onclick=»currentSlide(4)»
alt=»Northern Lights»>    </div>    <div
class=»column»>      <img class=»demo cursor» src=»img_nature.jpg»
style=»width:100%» onclick=»currentSlide(5)» alt=»Nature and sunrise»>
</div>     <div class=»column»>
<img class=»demo cursor» src=»img_snow.jpg» style=»width:100%» onclick=»currentSlide(6)»
alt=»Snowy Mountains»>    </div> </div></div>

Шаг 2) добавить CSS:

Стиль галереи изображений, кнопки Далее и назад, текст заголовка и точки:

Пример

* { box-sizing: border-box;}/* Position the image container
(needed to position the left and right arrows) */.container {
position: relative;}/* Hide the images by default */.mySlides {
display: none;}/* Add a pointer when hovering over the thumbnail
images */.cursor { cursor: pointer;}/* Next & previous
buttons */.prev,.next { cursor: pointer; position:
absolute; top: 40%; width: auto; padding: 16px;
margin-top: -50px; color: white; font-weight: bold;
font-size: 20px; border-radius: 0 3px 3px 0; user-select:
none; -webkit-user-select: none;}/* Position
the «next button» to the right */.next { right: 0;
border-radius: 3px 0 0 3px;}/* On hover, add a black background color with a
little bit see-through */.prev:hover,.next:hover {
background-color: rgba(0, 0, 0, 0.8);}/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2; font-size: 12px;
padding: 8px 12px; position: absolute; top: 0;}/* Container for
image text */.caption-container { text-align: center;
background-color: #222; padding: 2px 16px; color: white;
}.row:after
{ content: «»; display: table; clear: both;}/* Six
columns side by side */.column { float: left; width:
16.66%;}/* Add a transparency effect for thumnbail images */.demo {
opacity: 0.6;}.active,.demo:hover { opacity: 1;}

Шаг 3) добавить JavaScript:

Пример

❮ Назад
Дальше ❯

Images as Indicators

An example of using images as indicators:

Example

Адаптивность

Если на сайте адаптивная верстка, то слайдер можно подстроить под ширину экрана. Для этого используйте свойство «responsive». Оно позволяет установить для разных разрешений индивидуальные настройки. Рассмотрим пример.

$('.slick-example').slick({
	infinite: true,
	dots: true,
	slidesToShow: 3,
	slidesToScroll: 1,
	responsive: 
});

Здесь по умолчанию устанавливается отображение в ряд 3 слайда. Если ширина видимой области браузера от 768 до 481 пикселя — 2. И один, если ширина менее 480 пикселей.

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

Comparison (Before/After) Sliders

Mario Duarte
August 14, 2017

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

About the code

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

Simple Sliders

TharenaMelishka
March 13, 2020

About a code

Parallax Horizontal Image Scroller — No JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

ycw
December 9, 2019

HTML (Pug) / CSS (Less)

About a code

Checkbox Hack

No checkbox at all. But classic plus combo.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

Steffen
July 18, 2019

About a code

CSS Only Slider

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

Demo Image: Image Overlay Slider

Image Overlay Slider

Image overlay slider with HTML, CSS and vanilla JavaScript.
Made by Yugam
June 7, 2017

download
demo and code

Demo Image: Pure CSS Featured Image Slider

Pure CSS Featured Image Slider

HTML and CSS featured image slider.
Made by Joshua Hibbert
June 16, 2016

download
demo and code

MAHESH AMBURE
March 9, 2016

About the code

Simple pure CSS slider made with

Demo Image: Feature Slider

Feature Slider

Feature slider with HTML, CSS and JavaScript.
Made by Andy Lorimer
October 23, 2015

download
demo and code

Demo Image: Animated Cube Slider

CSS only.
Made by Alberto Hartzet
May 6, 2015

download
demo and code

Demo Image: Simple Image Slider

Simple Image Slider

Features: — automatic slideshow — pause on hover — dynamic slide counter — show/hide controls on hover.
Made by André Cortellini
August 14, 2014

download
demo and code

Demo Image: Multi Axis Image Slider

Multi Axis Image Slider

Multi axis image slider with HTML, CSS and JavaScript.
Made by Burak Can
July 22, 2013

download
demo and code

Demo Image: 3D Cube Slider. Pure CSS

3D Cube Slider. Pure CSS

Cube slider, a small experiment with HTML5/CSS3 3d transforms.
Made by Ilya K.
June 26, 2013

download
demo and code

About a code

CSS Image Slider with Next/Prev Buttons

A 100% pure CSS image slider with previous/next buttons and image transitions.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: —

JavaScript:

Суть программы будет в том что при нажатие на кнопку Right будет удалятся класс block за счёт чего скрывается картинка а следующему элементу добавляется класс block.

JavaScript

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

// Берём кнопку вперёд

let btnRight=document.querySelector(«.btnRight»);

// Берём слайды

let slides=document.querySelectorAll(«img»);

// Объявляем переменную i

leti=;

// Объявляем событие нажатия на кнопку вперёд

btnRight.addEventListener(«click»,function(){

// Увеличиваем переменную i

++i

// Условие если переменная i больше или равна количеству слайдов

if(i>=slides.length){

// Удаляем класс block предыдущему слайду

slidesi-1.classList.remove(«block»);

// Присваиваем переменной i ноль

i=;

// Добавляем класс block следующему слайду

slidesi.classList.add(«block»);

}else{// Иначе

// Удаляем класс block предыдущему слайду

slidesi-1.classList.remove(«block»);

// Добавляем класс block следующему слайду

slidesi.classList.add(«block»);

}

})

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

JavaScript слайд шоу на базе разработанной библиотеки

Иногда на практике может потребоваться сделать JS карусель с прокруткой, которую часто называют слайд шоу. В моём случае этого не требовалось, но я всё же решил сделать такую на базе итогового кода библиотеки для случая, когда это может пригодиться.

На самом деле, реализация JavaScript слайд шоу отличается от обычного слайдера совсем незначительно. Разница заключается лишь в том, что в слайд шоу слайды переключаются автоматически с заданным временным интервалом, а в случае обычной JS карусели они меняются вручную с помощь элементов навигации.

Для автоматической прокрутки слайдов я добавил в самый конец своего класса следующий метод:

slideShow: function (timeout) {
    var sliderCount = this.links.length;
    var self = this;

    this.slideCycle = setInterval(function () {
        var currentSlideNumber = document.querySelector('#slider-nav a.current').getAttribute("data-slide");
        var slideId = parseInt(currentSlideNumber, 10) + 1;
        self.slide(document.querySelector(''));
    }, timeout);
}

Что здесь происходит — думаю, понятно. Для создания данного метода я скопировал код из события клика на кнопки ручного переключения слайдов и разместил его внутри вызова JavaScript функции setInterval(), которая выполняет указанное действие через заданный промежуток времени.

Сценарий действия передаётся первым аргументом в виде анонимной функции, а временной интервал — вторым, который я решил сделать в виде переменной, значение которой передаётся при вызове slideShow().

Единственная модификация кода внутри setInterval(), которая потребовалась, — это определение количества слайдов и сравнение с ним индекса текущего слайда для зацикленности автоматического переключения.

Ну, и для того, чтобы данный код заработал, сам метод необходимо вызвать. Я решил сделать это всё в том же navigate(), который как раз и является сборником всяких сценариев. Вызов я разместил в самом конце, передав в качестве аргумента значение временного интервала для автоматической смены слайдов в нашем JS слайд шоу (я выбрал 2000 милисекунд или 2 секунды, вы можете по необходимости изменять это число):

self.slideShow(2000);

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

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

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

Для прерывания автоматического показа слайдов JavaScript карусели я решил воспользоваться стандартной JS функцией clearInterval(), которой в качестве аргумента передаю идентификатор временного интервала, возвращаемого функцией setInterval() при его установке.

В итоге, получился следующий код, который я решил не оформлять отдельным методом:

clearInterval(self.slideCycle);

И разместил его в местах описания действий при кликах на различные элементы навигации, т.е. в следующих:

link.addEventListener("click", function (e) {...});

self.prevBtn.addEventListener('click', function (e) {...});

self.nextBtn.addEventListener('click', function (e) {...});

Вызов clearInterval() лучше делать поближе к самому событию клика, главное, чтобы перед ним, а не после.

Что использовать при создании only css слайдера без js?

В первую очередь если присмотреться к коду, то можно увидеть, что мы использовали всего лишь 5 классов:

wrapper
slider
slides
controls
slide(N) – да столько будет сколько будет картинок, потому читаю за один.

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

Внутри wrapper у нас будет сделано три группы объектов: radio кнопки, слайды и переключатели. Дальше всю магию делает css ну и немного совместно с .

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

Дальше таким образом мы присваиваем тому изображению, которое мы выбрали свои стили с определенным селектором:

#slide1:checked~.slider>.slide1,
#slide2:checked~.slider>.slide2,
 #slide3:checked~.slider>.slide3, 
 #slide4:checked~.slider>.slide4, 
 #slide5:checked~.slider>.slide5{
                 z-index: 1; 
                 -webkit-transform: scale(1); 
                 -moz-transform: scale(1); 
                 -o-transform: scale(1); 
                 transform: scale(1); 
}

На счет стилей все понятно, думаю, так как изображению имеют одинаковый (изначально 0), то присвоив нужному 1, вы ставим его выше на 1 слой, а значит он и показывается человеку.

Как я уже говорит выше, у нашей radio кнопки которая выбрана, есть свой атрибут, который мы выбираем через селектор:

Вся магия в знаке ~. Сначала мы ищем #slide1:checked, то есть тот id элемент которого будет иметь значение checked, ну и применяем стиль на тег, который найдется по следующему селектору .slider>.slide1.

Самые внимательные возможно заметили, что, я спрятал все radio кнопки. Но они есть и нажимаются. Вот тут вступают в бой label тег со своим полезным свойством.

Когда мы задаем какому-то input’у свой уникальный , то в поле в котором обычно пишут описание к полю, можно добавить атрибут for. После нажав на этот самый лейбл, мы всегда сделаем активным input поле (кроме поля у которого type ).

Ну а все остальное, уже дело вкуса. Я имею ввиду анимацию и плавные подсветки. Если интересно, как оно работает, я советую поиграться в devTools, я всегда так делаю если чего-то не понимаю.

Недостатки такого css слайдера?

Они есть и это очевидно.

Для того чтобы сделать переключатель или перелистывание, без js не обойтись;
Именно у этого слайдера мы не можем добавить свои картинки с помощью программирования. Что требует некоторых изменений в коде.

Преимущества

Адаптивный слайдер;
Очень легкий по весу и быстро загружается (оптимизированный);
Легко настраиваемый под свои нужды.

А какие недостатки и преимущества видишь ты?

HTML:

<div class=»sl-container»>
<div class=»swipe»>
<div class=»panel» data-img=»/photo-1.jpg»></div>
<div class=»panel» data-img=»/photo-2.jpg»></div>
<div class=»panel» data-img=»/photo-3.jpg»></div>
<div class=»panel» data-img=»/photo-4.jpg»></div>
<div class=»panel» data-img=»/photo-5.jpg»></div>
</div>
<div class=»sl-info»>
<div class=»inner»>
<h3>Слайдер с фиксированным текстом</h3>
<p>Текст накладывается на слайдер, в котором листаются только фотографии</p>
</div>
<div class=»sl-buttons»>
<button class=»btn-prev» disabled>
<svg xmlns=»http://www.w3.org/2000/svg» width=»40″ height=»40″ viewBox=»0 0 24 24″ fill=»none» stroke=»#fff» stroke-width=»3″ stroke-linecap=»round» stroke-linejoin=»round»><polyline points=»15 18 9 12 15 6″></polyline></svg>
</button>
<button class=»btn-next»>
<svg xmlns=»http://www.w3.org/2000/svg» width=»40″ height=»40″ viewBox=»0 0 24 24″ fill=»none» stroke=»#fff» stroke-width=»3″ stroke-linecap=»round» stroke-linejoin=»round»><polyline points=»9 18 15 12 9 6″></polyline></svg>
</button>
</div>
</div>
</div>