Нету анимации скрола при нажатии кнопки в браузере safari

Question

Не могу разобраться, что надо сделать чтобы появилась анимация в safari, в хроме, опере и яндекс браузере всё работает

const carousel = document.querySelectorAll(".carousel"),
    images = document.querySelectorAll(".carousel_item"),
    arrowIcons = document.querySelectorAll(".wrapper .btn");
let isMouseDown = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
let current_carousel = null


const restartSlider = (local_carousel) => {
    console.log(local_carousel)
    // showing and hiding prev/next icon according to carousel scroll left value
    let scrollWidth = local_carousel.scrollWidth - local_carousel.clientWidth; // getting max scrollable width
    if (local_carousel.scrollLeft <= 0) {

    }
    if (local_carousel.scrollLeft === scrollWidth) {
        local_carousel.scrollLeft = 0
    }
}
arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        const local_carousel = icon.nextSibling.parentNode.children[1]
        let firstImgWidth = images[0].clientWidth; // getting first img width & adding 14 margin value
        let countImg = local_carousel.id === '0' ? local_carousel.clientWidth / firstImgWidth : firstImgWidth
        const scrollElement = local_carousel.id === '0' ? local_carousel.clientWidth - 14 * countImg : firstImgWidth
        // if clicked icon is left, reduce width value from the carousel scroll left else add to it
        console.log(icon.className)
        local_carousel.scrollLeft += icon.className === "left" ? -scrollElement : scrollElement;
        restartSlider(local_carousel)
    });
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif; 
}
body {
    display: flex;
    padding: 0 35px;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: #343F4F;
}
 


.wrapper {
    width: 100%;
    display: flex;
    position: relative;
}

.wrapper .btn {
    position: absolute;
    top: calc(50% - 15px);
    left: -15px;
    display: flex;
    justify-content: space-between;
    width: calc(100% + 30px);
    z-index: 1;
}

.wrapper i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 100px;
    cursor: pointer;
}

.wrapper .btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 100px;
    cursor: pointer;
}

.wrapper .carousel {
    font-size: 0px; 
    overflow: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    display: flex;
    overflow-x: auto;
    gap: 20px;
    scroll-snap-type: x mandatory;
}

.carousel_item {
    scroll-snap-align: start;
    width: 300px;
    object-fit: cover;
}

<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>Draggable Image Slider | CodingNepal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styless.css" rel="stylesheet" type="text/css">
</head>
<body style="display: flex; flex-direction: column; gap: 200px;">
<div class="wrapper">
    <div class="btn">
        <i class="left"> < </i>
        <i class="right"> > </i>
    </div>
    <div class="carousel" id="0">
        <img class="carousel_item" src="https://placepic.ru/wp-content/uploads/2020/12/anypics.ru-79410.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://zooclub.ru/attach/10000/10091.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://natalyland.ru/wp-content/uploads/1/7/d/17dd004b996fd30fc9f9619981db8609.jpeg" alt="img" draggable="false">
        <img class="carousel_item" src="https://kartinkin.net/pics/uploads/posts/2022-09/1663075623_68-kartinkin-net-p-sobaka-shelti-krasivo-79.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://placepic.ru/wp-content/uploads/2018/10/image-30.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="http://xoxo.ru/wp-content/uploads/2020/12/por.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://zooclub.ru/attach/7723.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://s1.1zoom.ru/b5050/52/391667-svetik_3840x2400.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://beztarakanov.ru/wp-content/uploads/2022/04/1bigl3.jpg" alt="img" draggable="false">
    </div>
</div>
<div class="wrapper">
    <div class="btn">
        <i class="left"> < </i>
        <i class="right"> > </i>
    </div>
    <div class="carousel" id="1">
        <img class="carousel_item" src="https://placepic.ru/wp-content/uploads/2020/12/anypics.ru-79410.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://zooclub.ru/attach/10000/10091.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://natalyland.ru/wp-content/uploads/1/7/d/17dd004b996fd30fc9f9619981db8609.jpeg" alt="img" draggable="false">
        <img class="carousel_item" src="https://kartinkin.net/pics/uploads/posts/2022-09/1663075623_68-kartinkin-net-p-sobaka-shelti-krasivo-79.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://placepic.ru/wp-content/uploads/2018/10/image-30.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="http://xoxo.ru/wp-content/uploads/2020/12/por.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://zooclub.ru/attach/7723.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://s1.1zoom.ru/b5050/52/391667-svetik_3840x2400.jpg" alt="img" draggable="false">
        <img class="carousel_item" src="https://beztarakanov.ru/wp-content/uploads/2022/04/1bigl3.jpg" alt="img" draggable="false">
    </div>
</div>
<script src="js/script.js"></script>
</body>
</html>

БЛОГ НА HUSL

Нету анимации скрола при нажатии кнопки в браузере safari

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