資訊專欄INFORMATION COLUMN
React實(shí)現(xiàn)輪播圖效果如下：
終于可以用上react-slick組件，安裝：
npm install react-slick --save npm install slick-carousel
當(dāng)安裝完后，就要導(dǎo)入css文件，主要是為了使用輪播圖的頁(yè)面上：
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;
}React實(shí)現(xiàn)輪播圖效果全部講述，希望大家以后多多關(guān)注。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/128224.html
摘要：很久沒上掘金發(fā)現(xiàn)草稿箱里存了好幾篇沒發(fā)的文章最近梳理下發(fā)出來往期面試官系列如何實(shí)現(xiàn)深克隆面試官系列的實(shí)現(xiàn)面試官系列前端路由的實(shí)現(xiàn)面試官系列基于數(shù)據(jù)劫持的雙向綁定優(yōu)勢(shì)所在面試官系列你為什么使用前端框架前言設(shè)計(jì)前端組件是最能考驗(yàn)開發(fā)者基本功的測(cè) 很久沒上掘金,發(fā)現(xiàn)草稿箱里存了好幾篇沒發(fā)的文章,最近梳理下發(fā)出來 往期 面試官系列(1): 如何實(shí)現(xiàn)深克隆 面試官系列(2): Event Bus...
摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時(shí)間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...
摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 時(shí)間的齒輪已經(jīng)來到了2017年的11月份，距離2018年僅僅還剩下不到兩...
閱讀 687·2023-03-27 18:33
閱讀 889·2023-03-26 17:27
閱讀 756·2023-03-26 17:14
閱讀 738·2023-03-17 21:13
閱讀 668·2023-03-17 08:28
閱讀 2092·2023-02-27 22:32
閱讀 1521·2023-02-27 22:27
閱讀 2432·2023-01-20 08:28
