'图片预览没有鼠标移动功能添加'

package.json

@@ -39,6 +39,7 @@
     "qs": "^6.5.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
+    "react-slick": "^0.25.2",
     "video-react": "^0.14.1",
     "xlsx": "^0.15.0"
   },

public/index.ejs

@@ -6,6 +6,8 @@
   <link rel="shortcut icon" href="https://cdn.img.shangjiadao.cn/qingxiao/biz/image/qxlogo4.png" >
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" /> 
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <!-- Polyfills -->
   <!--[if lt IE 10]>
     <script src="js/console-polyfill.js"></script>

src/components/CallStudents.js

@@ -635,7 +635,7 @@ class CallStudentsForm extends React.Component {
                 </Col>
               </Row>
               <Row gutter={16} className={pageStyle.detailrow} type="flex" align="middle" style={{ marginBottom: '12px' }}>
-                <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }} style={{ marginBottom: '20px' }}>
+                <Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 6 }}>
                   <span className={pageStyle.detailtitle}>上课时间：</span>
                   <span className={pageStyle.detaildesc}>{callStudentSchedule.start_date_format}-{callStudentSchedule.end_date_format}</span>
                 </Col>

src/components/ImagePreview.js

@@ -29,12 +29,15 @@ class ImagePreview extends React.Component {
   render() {
     const { currentIndex, urls } = this.props;
     return (
-      <div className={componentStyle.ImagePreviewBox}>
+      <div className={`${componentStyle.ImagePreviewBox} ImagePreviewBox`}>
         <div className={componentStyle.mask} />
         <Icon type="close-circle" className={componentStyle.closeIcon} onClick={this.closeImgPreview} />
         <Carousel
           className={componentStyle.Carousel}
           ref={this.ref}
+          dots={false}
+          draggable
+          arrows
         >
           {urls.map((ele) => {
             return (

src/components/ImagePreview.less

@@ -49,4 +49,14 @@
         font-size: 30px;
         cursor: pointer;
     }
+}
+:global {
+    .ImagePreviewBox {
+        .slick-next:before, .slick-prev:before {
+            font-size: 34px;
+            line-height: 1;
+            opacity: .75;
+            color: #fff;
+        }
+    }
 }
\ No newline at end of file

yarn.lock

@@ -8659,7 +8659,7 @@ react-router@^4.2.0, react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
-react-slick@~0.25.2:
+react-slick@^0.25.2, react-slick@~0.25.2:
   version "0.25.2"
   resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.25.2.tgz#56331b67d47d8bcfe2dceb6acab1c8fd5bd1f6bc"
   dependencies: