React实现轮播图效果

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

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

1. npm install react-slick --save
2. npm install slick-carousel

复制代码

安装完后需要在使用轮播图的页面上导入css文件：

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

复制代码

swiper.js

1. import React, { Component } from 'react';
2. import Slider from 'react-slick';
3. import 'slick-carousel/slick/slick.css';
4. import 'slick-carousel/slick/slick-theme.css';
6. export default class SimpleSlider extends Component {
7.   render() {
8.     const settings = {
9.       dots: true,
10.       dotsClass:'slick-dots1',//自定义指示器的样式
11.       // dots: {'dot-style':String},
12.       infinite: true,
13.       speed: 500,
14.       slidesToShow: 1,
15.       slidesToScroll: 1,
16.       height:500
17.     };
18.     reurn (
19.       <div style={{margin:'50px 12px 40px 12px'}}>
20.         <h2> Single Item</h2>
21.         <Slider {...settings}>
22.           <div>
23.             <h3>1</h3>
24.             <div style={{background:'#25f5f5',height:'160px'}}>sdfkjsdlfjldskfjlksjdf</div>
25.           </div>
26.           <div>
27.             <h3>2</h3>
28.           </div>
29.           <div>
30.             <h3>3</h3>
31.           </div>
32.           <div>
33.             <h3>4</h3>
34.           </div>
35.           <div>
36.             <h3>5</h3>
37.           </div>
38.           <div>
39.             <h3>6</h3>
40.           </div>
41.         </Slider>
42.       </div>
43.     );
44.   }
45. }

复制代码

swiper.css

1. //轮播图下方dot样式
2. .slick-dots1
3. {
4. position: absolute;
5. bottom: -25px;
6. display: block;
7. width: 100%;
8. padding: 0;
9. margin: 0;
10. list-style: none;
11. text-align: center;
12. }
13. .slick-dots1 li
14. {
15. position: relative;
16. display: inline-block;
17. width: 20px;
18. height: 20px;
19. margin: 0 5px;
20. padding: 0;
21. cursor: pointer;
22. }
23. .slick-dots1 li button
24. {
25. font-size: 0;
26. line-height: 0;
27. display: block;
28. width: 20px;
29. height: 20px;
30. padding: 5px;
31. cursor: pointer;
32. color: transparent;
33. border: 0;
34. outline: none;
35. background: transparent;
36. }
37. .slick-dots1 li button:hover,
38. .slick-dots1 li button:focus
39. {
40. outline: none;
41. }
42. .slick-dots1 li button:hover:before,
43. .slick-dots1 li button:focus:before
44. {
45. opacity: 1;
46. }
47. //未选中时的样式
48. .slick-dots1 li button:before
49. {
50. font-family: 'slick';
51. font-size: 8px;
52. line-height: 8px;
53. position: absolute;
54. top: 0;
55. left: 0;
56. width: 20px;
57. height: 8px;
58. content: '';
59. text-align: center;
60. //opacity: .25;
61. color: #CCCCCC;
62. -webkit-font-smoothing: antialiased;
63. -moz-osx-font-smoothing: grayscale;
64. }
65. //选中的样式
66. .slick-dots1 li.slick-active button:before
67. {
68. //opacity: .75;
69. color: #2183E2;
70. background-color: #2183E2;
71. border-radius: 5px;
72. }

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。