React实现轮播图效果的代码

React实现轮播图效果

小编在这里向大家介绍一下如何用React实现轮播图效果。首先我们需要安装react-slick组件：

npm install react-slick --save

同时也需要安装slick-carousel：

npm install slick-carousel

安装成功后需要在页面上导入css文件：

<link rel="stylesheet" type="text/css" href="slick.css"/>
<link rel="stylesheet" type="text/css" href="slick-theme.css"/>

接着我们需要在页面中导入Slider：

import Slider from 'react-slick';

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

其中，settings为轮播图的一些配置参数。

添加自定义指示器的样式

为了让轮播图更加美观，我们可以添加自定义指示器的样式。具体实现方法可以在css文件中加入以下样式：

.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;
  color: #CCCCCC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots1 li.slick-active button:before {
  color: #2183E2;
  background-color: #2183E2;
  border-radius: 5px;
}

轮播图下方dot样式

最后，我们可以在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;
  color: #CCCCCC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots1 li.slick-active button:before {
  color: #2183E2;
  background-color: #2183E2;
  border-radius: 5px;
}

到这里，我们就完成了用React实现轮播图效果的全部讲述。