幻灯片的主要背景图片或视频海报将成为动画。
上面的示例使用Slider的API 以及 自定义CSS / JS转换正常进度条 。
![[Slider Revolution 6] 幻灯片的主要背景图片或视频海报将成为动画。 2 [Slider Revolution 6] 幻灯片的主要背景图片或视频海报将成为动画。 2](https://aladd.net//wp-content/uploads/2020/05/progress-bar-8.png)
步骤1:在滑块的 主设置 页面上,激活常规 进度栏。
![[Slider Revolution 6] 幻灯片的主要背景图片或视频海报将成为动画。 3 [Slider Revolution 6] 幻灯片的主要背景图片或视频海报将成为动画。 3](https://aladd.net//wp-content/uploads/2020/05/progress-8.png)
步骤2:将以下代码添加到滑块的“ 自定义CSS”部分,调整颜色以适合您的样式需求。
/* progress bar slot */ .rev-progress-perc { /* default background color */ background-color: rgba(255, 255, 255, 0.25); display: inline-block; height: 15px; position: absolute; bottom: 0; z-index: 99; } /* progress bar slot activated */ .rev-progress-perc.is-active:before { /* set this to the same color as the progress bar */ background-color: rgba(0, 0, 0, 0.5); display: block; height: 100%; position: absolute; left: 0; top: 0; width: 100%; content: ""; } /* progress bar slot divider line */ .rev-progress-perc:after { /* the divider line color */ background-color: rgba(255, 255, 255, 0.5); display: block; position: absolute; right: 0; top: 0; width: 1px; height: 100%; content: ""; z-index: 201; } .rev-progress-perc:not(.running) {cursor: pointer} .rev-progress-perc:last-child:after {width: 0} rs-progress.hide {background: transparent !important}
步骤3:将以下代码添加到滑块的“ 自定义JavaScript”部分,使用滑块的ID调整“ revapi1”数字
/* change "revapi405" part below to your slider's ID: http://sharedimages.themepunch.tools/rev_slider_id.png */ var api = revapi405; /* no need to edit below */ var swapAdded, slideIndex, progressBar, supressChange, progressSlots = []; function addActive(i) { if(i < slideIndex) this.className = 'rev-progress-perc is-active'; } function changeSlides() { if(this.className.search('running') !== -1) return; supressChange = true; progressBar.addClass('hide'); slideIndex = parseInt(this.getAttribute('data-slide'), 10); api.revshowslide(slideIndex + 1); progressSlots.removeClass('is-active'); progressSlots.each(addActive); } function onSwap(e, data) { if(!supressChange) progressSlots.eq(api.revcurrentslide() - 1).addClass('is-active'); else supressChange = false; } api.on('revolution.slide.onloaded', function() { var totalSlides = api.revmaxslide(), perc = parseFloat((100 / totalSlides).toFixed(2)); for(var i = 0; i < totalSlides; i++) { progressSlots[i] = jQuery('<span class="rev-progress-perc" style="width: ' + perc + '%; left: ' + (perc * i) + '%" data-slide="' + i + '" />'); } api.append(progressSlots); progressBar = jQuery('rs-progress'); progressSlots = jQuery('.rev-progress-perc').on('click', changeSlides); }).on('revolution.slide.onchange', function(e, data) { var currentSlide = data.slideIndex - 1; jQuery('.rev-progress-perc.running').removeClass('running'); progressBar.removeClass('hide').appendTo(progressSlots.eq(currentSlide).addClass('running')); if(currentSlide === 0) progressSlots.removeClass('is-active'); if(!swapAdded) { api.on('revolution.slide.onbeforeswap', onSwap); swapAdded = true; } });