swiper swiper2 設定data實現兄弟盒子背景顏色聯動變換
阿新 • • 發佈：2018-12-10
舊專案改版，依然用到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>
實現圓角的方法（附贈）
一般會根據設計圖確定元素的圓角，如何水平半徑和垂直半徑相等那麼就是它，但是遇到不相等的呢，就用下面的解決方案.div1{border-radius: 20px/10px}
//只演示了一個角