直播app開發,首頁輪播圖效果實現
直播app開發,首頁輪播圖效果實現的相關程式碼
npm install react-slick --save npm install slick-carousel
安裝完後需要在使用輪播圖的頁面上匯入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; }
以上就是 直播app開發,首頁輪播圖效果實現的相關程式碼,更多內容歡迎關注之後的文章
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2839476/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 直播app開發,實現輪播圖上下自動滑動展示效果APP
- 一對一直播系統原始碼,軟體首頁輪播圖輪播效果原始碼
- 直播平臺開發,使用swiper實現輪播效果
- 網頁佈局------輪播圖效果實現網頁
- 線上直播系統原始碼,利用css和html實現首頁圖片輪播效果原始碼CSSHTML
- 直播app原始碼,HTML + jQuery 實現輪播圖APP原始碼HTMLjQuery
- 直播平臺搭建原始碼,bootstrap實現圖片輪播效果原始碼boot
- 原生JS實現輪播圖的效果JS
- Axure實現輪播效果
- jQuery實現輪播效果jQuery
- 短視訊軟體開發,實現簡單的輪播圖效果
- 如何使用RecyclerView打造首頁輪播圖View
- luffy04-首頁輪播圖介面
- 直播app開發搭建,純javascript實現圖片放大鏡效果APPJavaScript
- JS實現輪播圖效果(有詳細註釋)JS
- 直播軟體app開發,左右自動滑動的輪播圖廣告APP
- ViewPage實現輪播圖View
- Banner實現輪播圖
- js實現輪播圖JS
- HBuilder開發詞典app(三)--主頁圖文輪播和新聞列表UIAPP
- 短視訊app製作,各個程式裡常見的首頁輪播圖APP
- 利用回撥函式實現簡單的輪播圖效果函式
- 原生js實現輪播圖JS
- 教你如何實現 Android TextView 文字輪播效果AndroidTextView
- 兩種方式實現輪播圖
- 直播平臺原始碼,純JS實現左右滑動輪播圖原始碼JS
- 直播平臺製作,依靠C語言實現圖片輪播C語言
- Vue實現內部元件輪播切換效果Vue元件
- 如何快速實現一個無縫輪播效果
- 短視訊商城原始碼,首頁輪播圖佈局管理原始碼
- app直播原始碼,Banner廣告圖片輪播控制元件APP原始碼控制元件
- 直播app開發,螢幕效果與圖片的處理APP
- JavaScript焦點圖輪播效果詳解JavaScript
- vue元件之輪播圖的實現Vue元件
- 用CSS實現一個輪播圖CSS
- [分享會]只用CSS實現輪播圖CSS
- 直播平臺原始碼,上傳本地圖片實現個人名片背景圖輪播原始碼地圖
- 直播app原始碼,使用vue-awesome-swiper建立輪播圖幻燈片APP原始碼Vue