Кнопки прокрутки слайдера влево и вправо

Question

Верстаю слайдер Слайдер. Есть код стрелки влево

.slider-navigation {
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.slider-navigation .slider-scrollbar {
     width: 360px / 1160px * 100%;
     height: 0px;
     margin-top: 150px;
     border-bottom: 1px solid #c8d9fb;
}
.slider-navigation .scrollbar-arrows {
     margin-left: 40px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.slider-navigation .scrollbar-arrows .scrollbar-left__arrow {
     width: 60px;
     height: 60px;
     box-sizing: border-box;
     border: 1px solid #c8d9fb;
     transform: matrix(-1, 0, 0, 1, 0, 0);
     margin-right: 40px;
}
.slider-navigation .scrollbar-arrows .scrollbar-right__arrow {
     width: 60px;
     height: 60px;
     box-sizing: border-box;
     border: 1px solid #c8d9fb;
     transform: -matrix(-1, 0, 0, 1, 0, 0);
}

<div class="slider-navigation">
  <div class="slider-scrollbar"></div>
  <div class="scrollbar-arrows">
    <div class="scrollbar-left__arrow"></div>
    <div class="scrollbar-right__arrow"></div>
  </div>
</div>

Как выглядит код стрелки вправо (для прокрутки слайдера вправо)?
Как вообще создать эти кнопки с помощью Фигмы (того, что дано в Фигме - я думал, что это можно сделать с помощью стилей, которые заданы в Фигме)? Пытался использовать transform: matrix(-1, 0, 0, 1, 0, 0); - отобразило только границу кнопки, а стрелку внутри нет.

Answer 1

Если ты верстаешь по макету фигмы, то стрелочку тебе нужно сохранить как иконку в формате svg и вставить в .scrollbar-arrows тег img

<div class="slider-navigation">
    <div class="slider-scrollbar"></div>
        <div class="scrollbar-arrows">
            <div class="scrollbar-left__arrow"><img class"arrow-image" src="../путь/название иконки.svg" alt="Стрелочка влево"></div>
            <div class="scrollbar-right__arrow"><img class"arrow-image" src="../путь/название иконки.svg" alt="Стрелочка право"></div>
        </div>
    </div>
</div>

Answer 2

Я в своём последнем проекте вставил Unicode коды стрелочек в виде текста -

‹ (‹) - левая стрелочка,

› (›) - правая стрелочка.

Это должно выглядеть вот так -

<div class="slider-navigation">
    <div class="slider-scrollbar"></div>
    <div class="scrollbar-arrows">
        <div class="scrollbar-left__arrow">&#8249;</div>
        <div class="scrollbar-right__arrow">&#8250;</div>
    </div>
</div>

Так как это текстовые символы, им можно вешать желаемые стили в CSS. Наверное, самый это простой вариант, но если нужно что-то более специфичное, то используй иконки. Сервис, который постоянно использую я - ionicons https://ionic.io/ionicons Но перед поиском нужных иконок загляни в раздел Usage.

Так же, можно сделать такие стрелочки вручную через ::before и ::after, плюс такого подхода в том, что их можно крутить-вертеть да анимировать как захочется. Достаточно создать какую-нибудь пустышку, и придумать пару стилей, как тебе нравится -

/* CSS */
* { margin: 0; padding: 0; border: 0; box-sizing: border-box;}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
}
.buttons {
    display: flex;
    justify-content: space-between;
    width: 200px;
    height: auto;
}
.button {
    background-color: rgba(244,181,61,0.84);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 40px;
}
.right-arrow {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
}
.left-arrow {
    display: block;
    position: relative;
    width: 20px;
    height: 20px;
}
.right-arrow span, .right-arrow::before, .right-arrow::after {
    position: absolute;
    height: 5px;
    width: 20px;
    left: 5px;
    content: "";
}
.left-arrow span, .left-arrow::before, .left-arrow::after {
    position: absolute;
    height: 5px;
    width: 20px;
    right: 5px;
    content: "";
}
.left-arrow::before {
    background-color: white;
    top: 0;
    transform: rotateZ(-45deg) translateY(50%);
}
.left-arrow::after {
    bottom: 0;
    background-color: white;
    transform: rotateZ(45deg) translateY(-50%);
}
.right-arrow::before {
    background-color: white;
    top: 0;
    transform: rotateZ(45deg) translateY(50%);
}
.right-arrow::after {
    bottom: 0;
    background-color: white;
    transform: rotateZ(-45deg) translateY(-50%);
}

<!---HTML--->
<body>
<div class="buttons">
    <div class="button">
        <span class="left-arrow"></span>
    </div>
    <div class="button">
        <span class="right-arrow"></span>
    </div>
</div>
</body>

БЛОГ НА HUSL

Кнопки прокрутки слайдера влево и вправо

Ответы (2 шт):