swiper swiper2 设置data实现兄弟盒子背景颜色联动变换

本文介绍如何使用Swiper2实现轮播图与兄弟元素背景颜色的联动变换,通过监听轮播图变化,更新兄弟元素背景,达到视觉统一效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

旧项目改版,依然用到swiper2 所以在此基础上设置data实现兄弟盒子背景颜色联动变换,其实所谓的兄弟盒子就是navBars希望它的背景可以随着轮播图的背景颜色同步切换

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swiper中文网基础演示(www.swiper.com.cn)</title>
<link rel="stylesheet" href="css/idangerous.swiper.css">
<script src="js/idangerous.swiper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
    margin: 0;
    padding: 0;
}
.blue-slide {
    background: #4390EE;
}
.red-slide {
    background: #CA4040;
}
.orange-slide {
    background: #FF8604;
}
.swiper-slide {
    line-height: 300px;
    color: #fff;
    font-size: 36px;
    text-align: center;
}
.loops{
    width: 120px;
    height:120px;
    background: #4390EE;
}
</style>
</head>
<body>
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide blue-slide" data-color="#4390EE">slider1</div>
    <div class="swiper-slide red-slide" data-color="#CA4040">slider2</div>
    <div class="swiper-slide orange-slide" data-color="#FF8604">slider3</div>
  </div>
</div>
<div class="loops">自定义nav_bar</div>
<script type="text/javascript">
  var mySwiper = new Swiper('.swiper-container',{
    loop: true,
        autoplay: 3000,
        onSlideChangeEnd: function(swiper){
            console.log(mySwiper.activeIndex)
            var slide = mySwiper.getSlide(mySwiper.activeIndex);
            console.log(slide)
            console.log(slide.data('color'))
            $('.loops').css({
                'background': slide.data('color')
            })
    }
  }); 
</script>
</body>
</html>

实现圆角的方法(附赠)

swiper2

一般会根据设计图确定元素的圆角,如何水平半径和垂直半径相等那么就是它,但是遇到不相等的呢,就用下面的解决方案

.div1{border-radius: 20px/10px}
//只演示了一个角
### 实现两个 Swiper 轮播图同步切换或联动效果 要实现两个 Swiper 轮播图之间的联动效果,可以通过监听 `slideChange` 事件并调用 `slideTo` 方法来完成。具体来说,当一个 Swiper 的当前活动索引发生变化时,通过该索引控制另一个 Swiper 同步移动到相同位置。 以下是详细的实现方式: #### 使用原生 JavaScript 配置 Swiper 如果仅使用原生 JavaScript 来配置 Swiper,则可以直接绑定 `slideChange` 事件,并在回调函数中触发目标 Swiper 的 `slideTo` 方法[^1]。 ```javascript var swiper1 = new Swiper('.swiper-container1', { direction: 'horizontal', slidesPerView: 1, }); var swiper2 = new Swiper('.swiper-container2', { direction: 'horizontal', slidesPerView: 1, }); // 绑定 slideChange 事件 swiper1.on('slideChange', function () { swiper2.slideTo(swiper1.activeIndex); // 将第二个 Swiper 移动到第一个 Swiper 当前索引处 }); swiper2.on('slideChange', function () { swiper1.slideTo(swiper2.activeIndex); // 将第一个 Swiper 移动到第二个 Swiper 当前索引处 }); ``` 上述代码实现了双向联动的效果,即无论哪个 Swiper 发生滑动变化,都会使另一个 Swiper 同步更新其显示的内容。 --- #### Vue 中的实现方案 在 Vue.js 环境下,由于组件生命周期的影响,可能会遇到初始化顺序问题导致功能失效的情况[^3]。为了避免这种情况,建议采用以下优化策略之一: ##### 方案一:延迟初始化 通过设置短时间延时(如 500ms),等待 DOM 完全渲染后再初始化 Swiper 对象。这种方法虽然简单有效,但并非最佳实践。 ```javascript export default { data() { return { swiper1: null, swiper2: null, }; }, mounted() { setTimeout(() => { this.initSwipers(); }, 500); }, methods: { initSwipers() { this.swiper1 = new Swiper('.swiper-container1', { /* 参数 */ }); this.swiper2 = new Swiper('.swiper-container2', { /* 参数 */ }); this.swiper1.on('slideChange', () => { this.swiper2.slideTo(this.swiper1.activeIndex); }); this.swiper2.on('slideChange', () => { this.swiper1.slideTo(this.swiper2.activeIndex); }); } } }; ``` ##### 方案二:动态创建 Swiper 实例 利用 `$nextTick()` 或者观察数据的变化,在确保 DOM 已经完全挂载之后再实例化 Swiper 对象。这种方式更加优雅且可靠。 ```javascript export default { data() { return { swiper1: null, swiper2: null, }; }, mounted() { this.$nextTick(() => { this.initSwipers(); }); }, methods: { initSwipers() { this.swiper1 = new Swiper('.swiper-container1', {}); this.swiper2 = new Swiper('.swiper-container2', {}); this.swiper1.on('slideChange', () => { this.swiper2.slideTo(this.swiper1.activeIndex); }); this.swiper2.on('slideChange', () => { this.swiper1.slideTo(this.swiper2.activeIndex); }); } } }; ``` --- #### 多级联动场景下的扩展应用 对于更复杂的多级联动需求,例如大疆官网中的产品展示页面所使用的轮播效果[^2],可以考虑引入多个 Swiper 并分别定义它们的关系链路。例如,三个 Swiper 可能形成如下关系: - **Swiper A → Swiper B** - **Swiper B → Swiper C** 在这种情况下,只需依次为每一对关联的 Swiper 添加类似的逻辑即可。 --- ### 性能优化提示 为了提升用户体验和性能表现,请注意以下几点: 1. 如果 Swiper 数据量较大,可启用虚拟列表模式 (`virtual`) 减少内存占用。 2. 设置合理的懒加载参数 (lazy loading),减少不必要的图片资源请求。 3. 在销毁组件时记得清理掉已注册的事件监听器,防止潜在的记忆泄漏问题。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值