Как изменить стрелки в slick slider?

Question

[Егор Трегубенко]

На ровном месте чот туплю вот слайдер

<div class="multiple-slide">
        <div>
            <img src="/local/templates/aspro-allcorp/images/test-click.jpg "  style="-webkit-filter: opacity(80%);"  alt="" class="img-responsive">
            <p>Весь спектр услуг по поставкам</p>
        </div>
        <div>
            <img src="/local/templates/aspro-allcorp/images/test-click.jpg" alt="" class="img-responsive">
            <p>Прямые поставки от производителей</p>
        </div>
        <div>
            <img src="/local/templates/aspro-allcorp/images/test-click.jpg" alt="" class="img-responsive">
            <p>ПРОДУКЦИЯ В НАЛИЧИИ НА СОБСТВЕННЫХ СКЛАДАХ</p>
        </div>
        <div>
            <img src="/local/templates/aspro-allcorp/images/test-click.jpg" alt="" class="img-responsive">
            <p>ПОДВИЖНОЙ ПАРК</p>
        </div>
        <div>
            <img src="/local/templates/aspro-allcorp/images/test-click.jpg" alt="" class="img-responsive">
            <p>ЭКСПЕДИРОВАНИЕ ГРУЗОВ</p>
        </div>
        <div>
            <img src="/local/templates/aspro-allcorp/images/test-click.jpg" alt="" class="img-responsive">
            <p>СОБСТВЕННЫЕ БАЗЫ РАЗГРУЗКИ И ВРЕМЕННОГО ХРАНЕНИЯ</p>
        </div>
    </div>

    <hr>
</div>
<script type="text/javascript">
    $('.multiple-slide ').slick({
        infinite: true,
        slidesToShow: 3,
        //количество слайдов, которые выводятся на экране
        slidesToScroll: 1
        //количество слайдов, которые перелистываются за один раз
    });

</script>

он находится вот тут alfa.maxkondaurov.ru (мини слайдер сразу после главного)

не могу врубиться как сейчас у стрелок убрать бекграунд( круг синий?)) изначально квадрат был , прозрачный))
Если нельзя то как поставить свои стрелки?

Answer 1

[0leg5ergeev]

.slick-prev:before, .slick-next:before {
    font-size: 70px;
    color: #00569C;
    left: -100px;
    top: -13px;
    background: white;
    position: absolute;
}

Вот и пишите сюда круги и квадраты, прозрачные и синие :)

Comments

[Егор Трегубенко]

да ну нет же) это фон квадрата который и так прозрачный) покажите скрин если у вас получилось круг прозрачный сделать)

[0leg5ergeev]

Егор Трегубенко: приложил

[Егор Трегубенко]

0leg5ergeev skrinshoter.ru/s/240516/nk5LQT?a

вот собственно ,круг , вот эта фигня за кругом не убирается)

[Егор Трегубенко]

я хочу просто синие стрелки и усе

[0leg5ergeev]

Егор Трегубенко: там шрифтом задаётся этот круг со стрелкой, отключите шрифт/поставьте новый/напишите content:">" и так далее

[Егор Трегубенко]

да точно, спс

Answer 2

[Никита Кит]

Да, по сути эти элементы есть в slick.css и им просто нужно поменять цвет фона. Но я считаю родные шевроны слика не оч красивыми. Ищу нормальные шевроны, из других библиотек, добавляю их в html-разметку слайдера, даю классы slick-prev slick-next и указываю эти элементы в скрипте, в методе .slick

Comments

[Егор Трегубенко]

т.е ты меняешь исходники skick.js?
или где

[Никита Кит]

Егор Трегубенко: нет, просто .slick({nextArrow: "разметка стрелки"; prevArrow: "разметка второй стрелки"});

[Никита Кит]

Егор Трегубенко: ну соответственно, через html и css интегрируешь свои шевроны, по-моему, насколько я помню, им даже не нужно классны slick-next slick-prev давать. эти классы для slick.css. Я когда юзал этот слайдер, вообще стили оформления элементов не подключал. Они там бесвкусные