如何在jquery slick中创建变量

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/slick.css"/>
<script src="path/to/slick.min.js"></script>

var imagePath = "path/to/image.jpg";

$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  autoplay: true,
  autoplaySpeed: 2000,
  prevArrow: '<button type="button" class="slick-prev">Previous</button>',
  nextArrow: '<button type="button" class="slick-next">Next</button>',
  appendDots: $('.slider-dots'),
  dots: true,
  customPaging: function(slider, i) {
    return '<button type="button" class="dot">' + i + '</button>';
  },
  responsive: [
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }
  ],
  // 使用变量设置图片路径
  centerMode: true,
  centerPadding: '60px',
  variableWidth: true,
  // 使用变量设置图片路径
  variableImage: true,
  variableImagePath: imagePath
});