src/forge/Main/Index.js

@@ -12,6 +12,13 @@ import img_new from '../Images/new.png';
 import img_array from '../Images/array.png';
 import banner from '../Images/banner_list.png';
 import CheckProfile from '../Component/ProfileModal/Profile';
+import Slider from 'react-slick';
+import img1 from './img/img1.jpg';
+import img2 from './img/img2.jpg';
+import img3 from './img/img3.jpg';
+import img4 from './img/img4.jpg';
+import left from './img/left.png';
+import right from './img/right.png';
 
 const Search = Input.Search;
 
@@ -290,11 +297,32 @@ class Index extends Component {
       isSpin, total, search, limit, page, typeList, categoryList , 
       recommendOriList , CategoryList , category_id } = this.state;
 
+    let settings={
+      dots:true,
+      infinite: true,
+      speed: 2000,
+      slidesToShow: 1,
+      slidesToScroll: 1,
+      pauseOnDotsHover:true,
+      autoplaySpeed:5000,
+      pauseOnFocus:true,
+      autoplay:true,
+      arrows:true,
+      prevArrow:<button type='button' class='changeImgBut'><img src={left} width="70px" alt=""/></button>,
+      nextArrow:<button type='button' class='changeImgBut'><img src={right} width="70px" alt=""/></button>
+    }
+
     return (
       <div>
-        <p className="t_project_banner">
+        <Slider {...settings} className="projectBannerBox">
+          <img src={img1} alt='' width="100%"/>
+          <img src={img2} alt=''/>
+          <img src={img3} alt=''/>
+          <img src={img4} alt=''/>
+        </Slider>
+        {/* <p className="t_project_banner">
           <img src={banner} width="100%" alt=""/>
-        </p>
+        </p> */}
         {/* {
           recommendOriList && recommendOriList.length>0?
             <Slider {...settings} className="recommandOri">

src/forge/Main/Index.scss

@@ -524,3 +524,55 @@
   }
 }
 
+.projectBannerBox{
+  .slick-arrow{
+    width: 70px;
+    height: 70px;
+    z-index: 2;
+    &::before{content: none;}
+    &.slick-prev{left: 50px;}
+    &.slick-next{right: 50px;}
+  }
+  .slick-dots{
+    width: 1200px;
+    text-align: left;
+    left: 50%;
+    margin-left: -600px;
+    bottom: 7%;
+    position: absolute;
+    display: flex!important;
+    z-index: 2;
+    li{
+      background-color: rgba(225,225,225,0.5);
+      position: relative;
+      height: 3px;
+      width: 46px;
+      margin-right: 15px;
+      &::after{
+        position: absolute;
+        left: 0px;
+        width: 0px;
+        top:0px;
+        height: 100%;
+        content: "";
+        transition: 5.2s;
+        transition-property: width;
+      }
+      &.slick-active::after{
+        background-color: #fff;
+        width: 100%;
+      }
+      button{
+        position: absolute;
+        width: 100%;
+        height: 10px;
+        left:0px;
+        background-color: transparent!important;
+        border:none;
+        cursor: pointer;
+        color: transparent;
+        &::before{content: none;}
+      }
+    }
+  }
+}