亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

滑動器.js SVG的堆疊彼此疊加

滑動器.js SVG的堆疊彼此疊加

繁星點點滴滴 2022-09-11 20:33:23
我是Swiker的新手.js,我有一個全屏的英雄部分,充當背景滑塊。在這個英雄部分的中間,我有另一個需要用文本顯示一些SVG。英雄刷卡器不是問題。問題是這個SVG刷卡器將SVG堆疊在一起,使一團糟。swiperswiperSVG 滑動器的啟動方式如下:這是最后一張幻燈片顯示時的樣子:然后它清理干凈,并開始再次將SVG堆疊在一起的過程。這是我的網頁: <div class="swiper-container textslider">            <div class="swiper-wrapper">                <div class="swiper-slide text--1"></div>                <div class="swiper-slide text--2"></div>                <div class="swiper-slide text--3"></div>                <div class="swiper-slide text--4"></div>            </div>        </div>        <div class="player-bg">            <a href="#" class="player"><span id="player__text">Reproducir <i class="fas fa-play"></i></span></a>        </div>        <div class="swiper-container background">            <div class="swiper-wrapper">                <div class="swiper-slide slide--1"></div>                <div class="swiper-slide slide--2"></div>                <div class="swiper-slide slide--3"></div>                <div class="swiper-slide slide--4"></div>            </div>        </div>    </div>    <script>        var swiper = new Swiper('.swiper-container', {            spaceBetween: 30,            effect: 'fade',            speed: 2000,            autoplay: {                delay: 4000,                disableOnInteraction: false,            },        });        var textswiper = new Swiper('.textslider', {            spaceBetween: 30,            effect: 'fade',            speed: 2000,            autoplay: {                delay: 4000,                disableOnInteraction: false,            },        });    </script>
查看完整描述

1 回答

?
一只名叫tom的貓

TA貢獻1906條經驗 獲得超3個贊

所有 SVG 的位置都完全相同(彼此疊加),并且由于它們具有透明的背景,因此您可以“看穿”它們。


卷簾通過調整 CSS 屬性來控制幻燈片的可見性。在您的情況下,問題在于默認的Swiker效果同時在多張幻燈片上將不透明度設置為1(即可見)。opacity


但是,Swiper有一個選項可以啟用交叉淡入淡出,這是您正在尋找的行為。在“文本”滑塊上添加選項:fadeEffect


var textswiper = new Swiper('.textslider', {

  spaceBetween: 30,

  effect: 'fade',

  fadeEffect: { // Add this

    crossFade: true,

  }

  speed: 2000,

  autoplay: {

    delay: 4000,

    disableOnInteraction: false,

  },

});


查看完整回答
反對 回復 2022-09-11
  • 1 回答
  • 0 關注
  • 164 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號