配置全屏圖片

JS

import Swiper from 'react-id-swiper';import 'swiper/css/swiper.css';const newmenus = []; // 你需要填充的數(shù)據(jù)const newbanners =[]; // 你需要填充的數(shù)據(jù)const options = {loop: true,effect: 'fade',autoplay: {disableOnInteraction: false,delay: 4000,},grabCursor: true,parallax: true,watchOverflow: true,preloadImages: true,clickable: true,autoplayDisableOnInteraction: false,pagination: {el: '.swiper-pagination',type: 'bullets',clickable: true,renderBullet: (index, className) => {let item = {};newmenus.forEach((v, Lindex) => {if (index === Lindex) {item = v;item.bannerIcon = NotLoginIcon[index].url;}});return `<div class='${className}' data-index="${index}"><div><div class="titleText"><div class="titleTextIcon"><div class="titleLo" style="background-image:url(${item.bannerIcon})"></div></div> <div class="titleTextRight"><div>${item.title}</div><div>${item.subTitle}</div></div></div></div></div>`;},},};

HTML

<Swiper {...options}>{newbanners &&newbanners.map((item, i) => (<ahref={item.url}target="_blank"rel="noreferrer"><div key={i}><div className="listImg" style={{ background: `url(${item.img}) no-repeat` }}></div></div></a>))}</Swiper>

CSS

.listImg {background-size: cover;height: 100%;width: 100%;position: absolute;}.titleText{display: flex;.titleTextRight {margin-left: 10px;text-align: left;p {text-overflow: ellipsis;overflow: hidden;width: 100px;white-space: nowrap;}& :nth-child(1){font-size: 18px;font-family: AlibabaPuHuiTi-Regular;// width: 141px;giwidth: 200px;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;font-family: PingFangSC-Medium;font-size: 18px;color: #33353B;}& :nth-child(2){font-size:14px;font-family: AlibabaPuHuiTi-Light;color: #9B9FAB;margin-top: 6px;}}

總結(jié)

以上是生活随笔為你收集整理的css设置全屏轮播的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。