React實(shí)現(xiàn)輪播圖效果
本文實(shí)例為大家分享了React實(shí)現(xiàn)輪播圖效果的具體代碼,供大家參考,具體內(nèi)容如下
效果:
輪播功能用到了react-slick組件,安裝:
npm install react-slick --save npm install slick-carousel
安裝完后需要在使用輪播圖的頁面上導(dǎo)入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; } //未選中時(shí)的樣式 .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; }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
每天一個(gè)hooks學(xué)習(xí)之useUnmount
這篇文章主要為大家介紹了每天一個(gè)hooks學(xué)習(xí)之useUnmount,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05React性能優(yōu)化的實(shí)現(xiàn)方法詳解
react憑借virtual DOM和diff算法擁有高效的性能,除此之外也有很多其他的方法和技巧可以進(jìn)一步提升react性能,在本文中我將列舉出可有效提升react性能的幾種方法,幫助我們改進(jìn)react代碼,提升性能2023-01-01React報(bào)錯(cuò)map()?is?not?a?function詳析
這篇文章主要介紹了React報(bào)錯(cuò)map()?is?not?a?function詳析,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08react實(shí)現(xiàn)移動(dòng)端二級(jí)路由嵌套詳解
這篇文章主要介紹了react移動(dòng)端二級(jí)路由嵌套的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08