Multiple different named images don’t working in jquery magic 360 plugin

I have multiple images and they’re named in different names and extension. I’m using magic 360 javascript plugin version 4.6.13. In frontend the page is show only tree.jpg. and magic360 dont working when I drag skin. in console there’s nothing errors. I made by doc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Integrated 360 Magic Spin Viewer</title>
    <link rel="stylesheet" href="assets/css/magic360.css">
    <script src="assets/js/magic360.js"></script>
</head>
<body>

    <style type="text/css">
        #gallery {
            width: 500px; /* Adjust the width as needed */
            height: 400px; /* Adjust the height as needed */
            margin: 0 auto;
        }

        .magic360 {
            width: 100%;
            height: 100%;
        }
    </style>

    <div id="gallery">
        <a class="Magic360" data-options="images: images/nature/tree.jpg images/car_slides/mountain.webp">
            <img src="images/nature/tree.jpg">
        </a>
    </div>

<!-- Your HTML content here -->
<script>
    var Magic360Options = {
        columns: 6
    };
</script>
</body>
</html>