css设置全屏轮播

快来打我* 2023-01-12 11:50 158阅读 0赞

## 配置全屏图片 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

import Swiper from 'react-id-swiper';
      import 'swiper/css/swiper.css';
    
    
      const newmenus = []; // 你需要填充的数据
      const newbanners =[]; // 你需要填充的数据
    
      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) => (
                <a href={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;gi
            width: 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;
          }
        }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: /images/20221119/1b07e3e0d8ae4698aa4f6aa2e37b1dcb.png