React实现轮播图效果 React实现轮播图效果

本文实例为大家分享了React实现轮播图效果的具体代码，供大家参考，具体内容如下
效果：

文章图片

轮播功能用到了react-slick组件，安装：

npm install react-slick --savenpm install slick-carousel

【React实现轮播图效果】安装完后需要在使用轮播图的页面上导入css文件：

import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css';

swiper.js

import React, { Component } from 'react'; import Slider from 'react-slick'; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; export default class SimpleSlider extends Component {render() {const settings = {dots: true,dotsClass:'slick-dots1',//自定义指示器的样式// dots: {'dot-style':String},infinite: true,speed: 500,slidesToShow: 1,slidesToScroll: 1,height:500}; return (Single Item1
sdfkjsdlfjldskfjlksjdf2
3
4
5
6
); }}

swiper.css

//轮播图下方dot样式.slick-dots1{position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; }.slick-dots1 li{position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }.slick-dots1 li button{font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }.slick-dots1 li button:hover,.slick-dots1 li button:focus{outline: none; }.slick-dots1 li button:hover:before,.slick-dots1 li button:focus:before{opacity: 1; }//未选中时的样式.slick-dots1 li button:before{font-family: 'slick'; font-size: 8px; line-height: 8px; position: absolute; top: 0; left: 0; width: 20px; height: 8px; content: '?'; text-align: center; //opacity: .25; color: #CCCCCC; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }//选中的样式.slick-dots1 li.slick-active button:before{//opacity: .75; color: #2183E2; background-color: #2183E2; border-radius: 5px; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。