直播app开发，首页轮播图效果实现

直播app开发，首页轮播图效果实现的相关代码

1	`npm install react-slick --save<br>npm install slick-carousel`

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

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

swiper.js

import React, { Component } from 'react';<br>import Slider from 'react-slick';<br>import 'slick-carousel/slick/slick.css';<br>import 'slick-carousel/slick/slick-theme.css';<br> <br>export default class SimpleSlider extends Component {<br>    render() {<br>        const settings = {<br>            dots: true,<br>            dotsClass:'slick-dots1',//自定义指示器的样式<br>            // dots: {'dot-style':String},<br>            infinite: true,<br>            speed: 500,<br>            slidesToShow: 1,<br>            slidesToScroll: 1,<br>            height:500<br>        };<br>        return (<br>            <div style={{margin:'50px 12px 40px 12px'}}><br>                <h2> Single Item</h2><br>                <Slider {...settings}><br>                    <div><br>                        <h3>1</h3><br>                        <div style={{background:'#25f5f5',height:'160px'}}>sdfkjsdlfjldskfjlksjdf</div><br>                    </div><br>                    <div><br>                        <h3>2</h3><br>                    </div><br>                    <div><br>                        <h3>3</h3><br>                    </div><br>                    <div><br>                        <h3>4</h3><br>                    </div><br>                    <div><br>                        <h3>5</h3><br>                    </div><br>                    <div><br>                        <h3>6</h3><br>                    </div><br>                </Slider><br>            </div><br>        );<br>    }<br>}

swiper.css

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

以上就是直播app开发，首页轮播图效果实现的相关代码，更多内容欢迎关注之后的文章