React實現(xiàn)輪播圖效果
更新時間:2022年07月11日 17:18:52 作者:liuye066
這篇文章主要為大家詳細介紹了React實現(xiàn)輪播圖效果,使用react-slick組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了React實現(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; } //未選中時的樣式 .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)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React報錯map()?is?not?a?function詳析
這篇文章主要介紹了React報錯map()?is?not?a?function詳析,文章圍繞主題展開詳細的內(nèi)容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-08-08