React实现轮播图效果
作者：liuye066
这篇文章主要为大家详细介绍了React实现轮播图效果，使用react-slick组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了React实现轮播图效果的具体代码，供大家参考，具体内容如下
效果：
轮播功能用到了react-slick组件，安装：
npm install react-slick --save npm 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'}}>
<h2> Single Item</h2>
<Slider {...settings}>
<div>
<h3>1</h3>
<div style={{background:'#25f5f5',height:'160px'}}>sdfkjsdlfjldskfjlksjdf</div>
</div>
<div>
<h3>2</h3>
</div>
<div>
<h3>3</h3>
</div>
<div>
<h3>4</h3>
</div>
<div>
<h3>5</h3>
</div>
<div>
<h3>6</h3>
</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;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。