React如何实现轮播图效果

这篇文章主要介绍“React如何实现轮播图效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React如何实现轮播图效果”文章能帮助大家解决问题。

效果：

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

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

安装完后需要在使用轮播图的页面上导入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 (            <div style={{margin:'50px 12px 40px 12px'}}>                <h3> Single Item</h3>                <Slider {...settings}>                    <div>                        <h4>1</h4>                        <div style={{background:'#25f5f5',height:'160px'}}>sdfkjsdlfjldskfjlksjdf</div>                    </div>                    <div>                        <h4>2</h4>                    </div>                    <div>                        <h4>3</h4>                    </div>                    <div>                        <h4>4</h4>                    </div>                    <div>                        <h4>5</h4>                    </div>                    <div>                        <h4>6</h4>                    </div>                </Slider>            </div>        );    }}

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;}

关于“React如何实现轮播图效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。