直播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
- 線上直播系統原始碼,利用css和html實現首頁圖片輪播效果原始碼CSSHTML
- 一對一直播系統原始碼,軟體首頁輪播圖輪播效果原始碼
- 直播平臺開發,使用swiper實現輪播效果
- 網站首頁的輪播新聞flash效果實現網站
- 直播app原始碼,HTML + jQuery 實現輪播圖APP原始碼HTMLjQuery
- 直播平臺搭建原始碼,bootstrap實現圖片輪播效果原始碼boot
- 原生JS實現輪播圖的效果JS
- 如何使用RecyclerView打造首頁輪播圖View
- luffy04-首頁輪播圖介面
- Axure實現輪播效果
- jQuery實現輪播效果jQuery
- 短視訊軟體開發,實現簡單的輪播圖效果
- 直播app開發搭建,純javascript實現圖片放大鏡效果APPJavaScript
- 直播軟體app開發,左右自動滑動的輪播圖廣告APP
- JS實現輪播圖效果(有詳細註釋)JS
- javascript實現的焦點圖輪播效果詳解JavaScript
- ViewPage實現輪播圖View
- Banner實現輪播圖
- js實現輪播圖JS
- AndroidApp圖片輪播效果的元件化AndroidAPP元件化
- HBuilder開發詞典app(三)--主頁圖文輪播和新聞列表UIAPP
- 原生js實現輪播圖JS
- 圖片輪播元件實現元件
- 短視訊app製作,各個程式裡常見的首頁輪播圖APP
- 仿照(小米官網首頁輪播圖)特效js程式碼特效JS
- 利用回撥函式實現簡單的輪播圖效果函式
- Android UI 實現廣告 Banner 輪播效果AndroidUI
- 兩種方式實現輪播圖
- (轉)jquery實現圖片輪播jQuery
- app直播原始碼,Banner廣告圖片輪播控制元件APP原始碼控制元件
- iOS開發之ImageView複用實現圖片無限輪播iOSView
- 直播平臺原始碼,純JS實現左右滑動輪播圖原始碼JS
- 直播平臺製作,依靠C語言實現圖片輪播C語言
- 短視訊商城原始碼,首頁輪播圖佈局管理原始碼
- 縮放效果的輪播圖 iOSiOS
- iOS開發專案實戰——Swift實現圖片輪播與瀏覽iOSSwift
- 教你如何實現 Android TextView 文字輪播效果AndroidTextView