求swiper轮播图+背景图同时变换的方法

独行剑侠

想模仿到这样的效果：“前景图片+虚化背景”轮播图。



目前已经做到这样


求“前景图片+虚化背景”轮播图效果修改代码。


用的typecho程序。


这是调用的swiper部分代码文件
https://lanzoui.com/i8blIr6195i

下面是typecho模板下index.php幻灯片部分代码

[PHP] 纯文本查看 复制代码

 <!--幻灯片s-->
	<div class="row">
 <!--添加顶部阴影-->
	<div class="yinying"></div>
	
	<div class="banner-wrap">
    <!-- Swiper幻灯片 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
			<?php 
$lunbo = $this->options->hdimg;
$hang = explode(",", $lunbo);
$n=count($hang);
$html="";
for($i=0;$i<$n;$i++){
$this->widget('Widget_Archive@lunbo'.$i, 'pageSize=1&type=post', 'cid='.$hang[$i])->to($ji);
if($i==0){$no=" sx_no";}else{$no="";}

$html=$html.'<div class="swiper-slide"><a href="'.$ji->permalink.'" ><img class="cover" src="'.$ji->fields->bimg.'"></a></div>';
}
echo $html;
?>
        
        </div>
        <!-- 添加分页-->
        <div class="swiper-pagination"></div>
    </div>
        <!-- 添加箭头-->
    	<div class="swiper-button-jt">
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div> 
        </div>
</div>

    <!-- Swiper.JS 已放到header.php -->
    <!-- 初始化 Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        spaceBetween: 30,
        loop: true,
        effect :'fade',
        autoplay : 3000, 
    });
    </script>
		<!--幻灯片e-->

zhangqi222

html代码大概是这样的

[HTML] 纯文本查看 复制代码

<div class="swiper-container" id="swiper-container1" style="z-index: 1; ">
    <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>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 </div>
 <div class="swiper-container" id="swiper-container2" style="z-index: 0;">
  <div class="swiper-wrapper">
      <div class="swiper-slide">111</div>
      <div class="swiper-slide">222</div>
      <div class="swiper-slide">333</div>
  </div>
</div>

zhangqi222

双向控制

再新建一个swiper，就叫swiper2吧
通过css控制该swiper2放在swiper1的下方

由主swiper1的按钮控制新建的这个swiper2

https://3.swiper.com.cn/api/Controller/2015/0308/216.html  这是文档。

独行剑侠

zhangqi222 发表于 2021-7-9 11:45
双向控制

再新建一个swiper，就叫swiper2吧

用了这个方法了，但是在里面只能左右划像，不能淡入淡出，不知道什么原因

zhangqi222

复制成html你打开看看。

[HTML] 纯文本查看 复制代码

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@3.4.2/dist/css/swiper.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@3.4.2/dist/js/swiper.min.js"></script>
<div class="swiper-container" id="swiper-container1" style="z-index: 1; ">
    <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>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
 </div>
 <div class="swiper-container" id="swiper-container2" style="z-index: 0;">
  <div class="swiper-wrapper">
      <div class="swiper-slide">111</div>
      <div class="swiper-slide">222</div>
      <div class="swiper-slide">333</div>
  </div>
</div>
<script> 
var mySwiper1 = new Swiper('#swiper-container1', {
  prevButton:'.swiper-button-prev',
  nextButton:'.swiper-button-next',
})
var mySwiper2 = new Swiper('#swiper-container2', {
})
mySwiper1.params.control = mySwiper2; //需要在Swiper2初始化后，Swiper1控制Swiper2
mySwiper2.params.control = mySwiper1; //需要在Swiper1初始化后，Swiper2控制Swiper1
</script>

zhangqi222

你用完之后的代码是啥样的，主要是JS。看看。是下面这样不？

[HTML] 纯文本查看 复制代码

<script> 
var mySwiper1 = new Swiper('#swiper-container1', {
  prevButton:'.swiper-button-prev',
  nextButton:'.swiper-button-next',
})
var mySwiper2 = new Swiper('#swiper-container2', {
})
mySwiper1.params.control = mySwiper2; //需要在Swiper2初始化后，Swiper1控制Swiper2
mySwiper2.params.control = mySwiper1; //需要在Swiper1初始化后，Swiper2控制Swiper1
</script>

独行剑侠

zhangqi222 发表于 2021-7-9 12:25
你用完之后的代码是啥样的，主要是JS。看看。是下面这样不？

[mw_shl_code=html,true]

是需要在css再添加#swiper-container1、2、3？控制？
我是添加了，两个不同步

zhangqi222

独行剑侠 发表于 2021-7-9 12:37
是需要在css再添加#swiper-container1、2、3？控制？
我是添加了，两个不同步

代码是啥，发一下。

zhangqi222

独行剑侠 发表于 2021-7-9 12:37
是需要在css再添加#swiper-container1、2、3？控制？
我是添加了，两个不同步

html里再加一套swiper-container，加上id=
ID随意，主要是控制用的，样式通过class修改即可。

js添加swiper时写上对应的id，没有3，官网文档里面多了个3，不用管他。

主要是下面这2行

[JavaScript] 纯文本查看 复制代码

mySwiper1.params.control = mySwiper2; //需要在Swiper2初始化后，Swiper1控制Swiper2
mySwiper2.params.control = mySwiper1; //需要在Swiper1初始化后，Swiper2控制Swiper1

zhangqi222

你看下这个

index.html.txt (1.45 KB, 下载次数: 2)

2021-7-9 12:54 上传

点击文件名下载附件