slick图片轮播实例

采用react-slick做图片轮播。

官方
https://react-slick.neostack.com/
https://react-slick.neostack.com/docs/get-started
http://kenwheeler.github.io/slick

安装slick

npm install react-slick --save
npm install slick-carousel --save

测试目录结构

# tree progject/
progject/
└── src
    ├── components
    │   └── SlickPlugin   # 轮播模块
    │       ├── index.js  # 模块代码
    │       └── slck.css  # 模块css
    └── pages
        ├── test.css      # 调用轮播模块时需使用的样式
        └── test.tsx      # 调用轮播模块

轮播模块

样式文件

@site/src/components/SlickPlugin/slick.css

/* 全局变量定义 */
:root {
    --border-style: none;   /* 样式边框 */
    --slick-bg-color: rgb(240, 239, 239); /* 显示区块背景颜色 */
}

/* 轮播框顶部标签配置 */
.slick_title {
    text-align: center;
    font-size: 20px;
    margin-top: -5px;
    margin-bottom: 10px;
}

/* 容器：轮播框整体  rgb(240, 239, 239) */
.slick_container_layer1 {
    background-color:var(--slick-bg-color);
    border-style:var(--border-style);
    overflow:hidden;
    background-origin:content-box;
    padding: 30px;
}

/* 容器：单个轮播项的显示框 */
.slick_container_layer2 {
    text-align: center;
    padding: 5px;
    margin: 0;
    border-style:var(--border-style);
    justify-content: center;
}

/* 单个轮播项的名称 */
.slick_card_name {
    margin-top: 10px;
    margin-bottom: -20px;
    border-style: var(--border-style);
}

/* 容器：单个轮播项的图片显示容器 */
.slick_card_img_container {
    border-style: var(--border-style);
    display: grid;
    grid-template-columns: auto;    
    justify-content: center;
    text-align: center;
}

/* 单个轮播项的description显示(不支持换行) */
.slick_card_description {
    margin: auto;
    border-style: var(--border-style);    
}

/*------------slick模块样式参数---------------------*/
.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .5;
    color: rgb(179, 172, 172);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -5px;
}
.slick-next
{
    right: -5px;
}

轮播实现代码

@site/src/components/SlickPlugin/index.js

import React, { Component } from "react";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import "./slick.css";

//轮播函数
function SlickShow(props) {
    //轮播显示区块名称
    const title = props.title;
    //轮播参数配置
    const settings = props.cycleConf;

    //显示区背景颜色
    const bgColor = props.bgColor;

    //单项图片显示风格
    const imgCss = props.imgCss;

    //获取模块的变量json_array的值
    const JsonList = props.json_array; 

    //是否显示"More"
    const isMore = props.isMore;
    //const isMore = Boolean({isMore1})
    
   

    //"更多"的url
    const moreUrl = props.moreUrl;

    //对获取模块的变量值进行渲染，采用map进行遍历数组
    const listItems = JsonList.map( (json_data) =>
        <div className="slick_container_layer2" >
            <div className="slick_card_img_container"><a target={json_data.target} href={json_data.urlstr}><img className={imgCss}  src={json_data.imgpath} title={json_data.remark} /></a></div>
            <div className="slick_card_name"><h4>{json_data.name}</h4></div>
            <div className="slick_card_description">{json_data.description}</div>
        </div>
    );
    //将数据注入html流，采用Slider模块做轮播。
    return (
        <div className='slick_container_layer1' style={{'background-color':bgColor}}>
          {isMore ? (
            <div className="slick_title">{title}<a style={{'margin-top':'5px','float':'right','font-size': '14px'}} href={moreUrl} target="_parent" >查看更多</a> </div>
          ):(
            <div className="slick_title">{title}</div>
          )}
          <Slider {...settings}>          
            {listItems}
          </Slider>
        </div>
    );
};

//配置模块对外接口
export default SlickShow

调用

样式

/* 全局变量定义 */
:root {
    --img-height: 128px;       /* 图片宽度 */
    --img-height_hover: 130px; /* 图片hover时的宽度,通常此值只比 --img-width 大2或3 */
    --img-border-style: dotted;     /* 样式边框 */
}

/* 单个轮播项的图片显示配置 */
.slick_card_img {
    box-shadow: none;
    opacity: .15;
    height: var(--img-height);
    border-style: var(--img-border-style);
    border-width: 2px;
    border-color:transparent;
}
/* 单个轮播项的图片显示配置，当鼠标移到图片上时图片样式 */
.slick_card_img:hover {
    opacity: 1;
    height: var(--img-height_hover);
    border-color:red;
}

.tpCss1 {
    background-color: rgb(112, 110, 110);
}

.tpCss2 {
    background-color: rgb(212, 203, 203);
}

实现代码

@site/src/pages/test.tsx

import React from 'react';
import Layout from '@theme/Layout';
import SlickPlugin from '@site/src/components/SlickPlugin';
import './test.css';


// 定义一个json数组
const jsonData = [
  {
    name: 'os-w自动化部署',        /* 图片名称 */
    description: 'test1',         /* 图片详细说明 */
    imgpath: '/img/rs/a01.png',   /* 图片地址 */
    urlstr: '/docs/about-osw',    /* 图片作为链接时跳转url */
    target: '_parent',            /* 图片作为链接时浏览器打开方式 */
    remark: '简述1',              /* 图片tipinfo信息 */
  },
  {
      name: '智能家用网关',
      imgpath: '/img/rs/a02.png',
      urlstr: 'http://www.baidu.com',
      description: '防止学生过度依赖手机，防沉迷游戏',
      target: '_blank',
      remark: '简述2',
  },
  {
      name:'智能灯',
      imgpath: '/img/rs/a03.png',
      urlstr: 'http://www.baidu.com',
      description: 'test3',
      target: '_blank',
      remark: '简述3',
  },
  {
      name: 'name4',
      imgpath: '/img/rs/wx.png',
      urlstr: 'http://www.baidu.com',
      description: 'test4',
      target: '_blank',
      remark: '简述4',
  },
  {
      name: 'name5',
      imgpath: '/img/rs/logo.png',
      urlstr: 'http://www.baidu.com',
      description: 'test5',
      target: '_blank',
      remark: '简述5',
  },
  {
      name:'name6',
      imgpath: '/img/rs/logo-1.png',
      urlstr: 'http://www.baidu.com',
      description: 'test6asdfasfd',
      target: '_blank',
      remark: '简述6',
  }
];

//轮播参数配置
const settings = {
  arrows: true,            /* 是否显示前后滚动按钮 */
  dots: true,              /* 是否显示图片下面的滚动进度状态条 */
  infinite: true,          /* 是否无限循环播放 */
  speed: 3000,             /* 单击前后滚动按钮时的滚动速度 */
  slidesToShow: 3,         /* 当前滚动屏显示的显示图像数量 */
  slidesToScroll: 3,       /* 按前后滚动按钮时滚动出来几个图片 */
  autoplay: true,          /* 是否自动滚动。提示：当鼠标停在某个图看上时滚动动停止。 */
  autoplaySpeed: 5000,     /* 自动滚动时的滚动速度 */
  adaptiveHeight: true,    /* 图像显示时，显示区的高度是否固定。即当显示的图片较大时，显示区是否会自动变大。默认false */
  //className: 'tpCss1',   /* 所有轮播区域，不包括顶部标题和下面的 “点” 进度状态条 */
  //dotsClass: 'tpCss2',
};


function TestShow() {
  return (
    <Layout>
        <Vant />
        <SlickPlugin 
          json_array={jsonData}        //轮播的图片数据
          title="区块显示名称"          //显示块标题字串
          cycleConf={settings}         //slick参数配置
          bgColor="rgb(240,240,240)"   //整个显示区背景色
          imgCss="slick_card_img"      //图片显示风格，如当鼠标移到图片上时，图标变亮、有周边红线、图片大小等等
          isMore={true}                //是否打开"more"按扭
          moreUrl="/docs/about-site"   //"more"按扭对应的链接，只有在 isMore=true 时才生效
        />
    </Layout>   
  )
}

export default TestShow 

效果