Javascript 未捕获的语法错误：意外标记'<'；当我向Vue添加外部js文件时，用于doctype_Javascript_Html_Jquery_Vue.js

Javascript 未捕获的语法错误：意外标记'<'；当我向Vue添加外部js文件时，用于doctype

javascript html jquery vue.js

Javascript 未捕获的语法错误：意外标记'<'；当我向Vue添加外部js文件时，用于doctype,javascript,html,jquery,vue.js,Javascript,Html,Jquery,Vue.js,我正在使用Vue Cli创建网站。我想创建一个split slick滑块，并将一个外部js文件添加到index.html文件中。但我得到了未捕获的语法错误：意外标记'nextSlide&&nextSlide==0&¤tSlide==maxItems-1）{ $（'.slideshow right.slider'）.slick（'slickGoTo'，-1）； $（'.slideshow text'）.slick（'slickGoTo'，maxItems）； }else if（curr

我正在使用Vue Cli创建网站。我想创建一个split slick滑块，并将一个外部js文件添加到index.html文件中。但我得到了未捕获的语法错误：意外标记'nextSlide&&nextSlide==0&¤tSlide==maxItems-1）{ $（'.slideshow right.slider'）.slick（'slickGoTo'，-1）； $（'.slideshow text'）.slick（'slickGoTo'，maxItems）； }else if（currentSlide0 | | event.deltaY<0）{ $（this.slick（'slickNext'）； }else if（event.deltaX<0 | | event.deltaY>0）{ $（this.slick（'slickPrev'）； }; }).on（'mousedown touchstart'，function（）{ 拖动=真；跟踪=$（'.slick track'，$slider）.css（'transform'）； tracking=parseInt（tracking.split（'，）[5]）； rightTracking=$（'.slideshow right.slick track'）.css（'transform'）； rightTracking=parseInt（rightTracking.split（'，）[5]）； }).on（'mousemove touchmove'，function（）{ 如果（拖动）{ newTracking=$（'.slideshow left.slick track'）.css（'transform'）； newTracking=parseInt（newTracking.split（'，）[5]）； diffTracking=新跟踪-跟踪； $（'.slideshow right.slick track'）.css（{'transform'：'matrix（1,0,0,1,0'，+（rightracking-diffTracking）+'））； } }).on（'mouseleave touchend mouseup'，function（）{ 拖动=假； }); $（'.slideshow right.slider'）。光滑({ 刷：错，是的，箭头：错，无限：是的，速度：950， cssEase:“立方贝塞尔（0.7,0,0.3,1）”，初始幻灯片：maxItems-1 }); $（'.slideshow text'）.slick({ 刷：错，是的，箭头：错，无限：是的，速度:900,， cssEase:“立方贝塞尔（0.7,0,0.3,1）” }); index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script src="src/assets/js/slider.js"></script>
  </body>
</html>


文件

var $slider = $('.slideshow .slider'),
  maxItems = $('.item', $slider).length,
  dragging = false,
  tracking,
  rightTracking;

$sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow'));

rightItems = $('.item', $sliderRight).toArray();
reverseItems = rightItems.reverse();
$('.slider', $sliderRight).html('');
for (i = 0; i < maxItems; i++) {
  $(reverseItems[i]).appendTo($('.slider', $sliderRight));
}

$slider.addClass('slideshow-left');
$('.slideshow-left').slick({
  vertical: true,
  verticalSwiping: true,
  arrows: false,
  infinite: true,
  dots: true,
  speed: 1000,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
}).on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) {
    $('.slideshow-right .slider').slick('slickGoTo', -1);
    $('.slideshow-text').slick('slickGoTo', maxItems);
  } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) {
    $('.slideshow-right .slider').slick('slickGoTo', maxItems);
    $('.slideshow-text').slick('slickGoTo', -1);
  } else {
    $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide);
    $('.slideshow-text').slick('slickGoTo', nextSlide);
  }
}).on("mousewheel", function(event) {
  event.preventDefault();
  if (event.deltaX > 0 || event.deltaY < 0) {
    $(this).slick('slickNext');
  } else if (event.deltaX < 0 || event.deltaY > 0) {
    $(this).slick('slickPrev');
  };
}).on('mousedown touchstart', function(){
  dragging = true;
  tracking = $('.slick-track', $slider).css('transform');
  tracking = parseInt(tracking.split(',')[5]);
  rightTracking = $('.slideshow-right .slick-track').css('transform');
  rightTracking = parseInt(rightTracking.split(',')[5]);
}).on('mousemove touchmove', function(){
  if (dragging) {
    newTracking = $('.slideshow-left .slick-track').css('transform');
    newTracking = parseInt(newTracking.split(',')[5]);
    diffTracking = newTracking - tracking;
    $('.slideshow-right .slick-track').css({'transform': 'matrix(1, 0, 0, 1, 0, ' + (rightTracking - diffTracking) + ')'});
  }
}).on('mouseleave touchend mouseup', function(){
  dragging = false;
});

$('.slideshow-right .slider').slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 950,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
  initialSlide: maxItems - 1
});
$('.slideshow-text').slick({
  swipe: false,
  vertical: true,
  arrows: false,
  infinite: true,
  speed: 900,
  cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)'
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
    <script src="src/assets/js/slider.js"></script>
  </body>
</html>