MetaSlider 图片轮播实现画中画

MetaSlider 是一款在 WordPress 中比较受欢迎的图片轮播插件，具有功能丰富，界面简洁，支持多主题选择，支持同时创建多套幻灯片，支持短码等优点。MetaSlider 配置管理方便，提供用户扩展接口，但不同的版本里没有提供画中画的功能，本篇文章就介绍一种方法加入该项功能。

首先到后台管理面板中进入 MetaSlider 的配置管理界面，新建一个幻灯片，加入相应的图片，选择幻灯片的类型，MetaSlider 目前有 flex、coin、responsive、nivo 四种类型，选中 “点” 选项（根据图片数量在幻灯片下方出现若干圆点按钮）。

然后在高级配置界面中的 CSS 类文本输入框中添加 mlslider-thumbnail，用来控制幻灯片画中画的显示样式。保存新建的幻灯片和配置。

第二步使用 MetaSlider 的程序接口加入画中画代码，放到主题的 functions.php 中，如下所示。

//Metaslider 中加入画中画 javascript 代码
function metaslider_responsive_js($javascript, $slider_id) {
	if($slider_id == 39) {/* 判断哪个幻灯片要加入画中画代码*/
		$javascript .= '
$(".mlslider-thumbnail .rslides_tabs").after(\'<ul class="slider-thumbnail"></ul>\');
$(".mlslider-thumbnail .rslides a").each(function(a){$(".mlslider-thumbnail ul.slider-thumbnail").append("<li id=stbn"+a+\'><a href="\'+$(this).attr("href")+\'"><img src="\'+$(this).children("img:first").attr("src")+\'"></a></li>\')});$(".mlslider-thumbnail .rslides_tabs a").hover(function(){var a=$(this).parent().index();$(".mlslider-thumbnail ul.slider-thumbnail li").eq(a).find("img").attr("style","transform: scale(1.1);opacity:1")},function(){var a=$(this).parent().index();$(".mlslider-thumbnail ul.slider-thumbnail li").eq(a).find("img").removeAttr("style")})
	';
	}
	return $javascript;
}
add_filter('metaslider_responsive_slider_javascript', 'metaslider_responsive_js', 10, 2);

上面代码使用了 MetaSlider 提供的钩链 metaslider_responsive_slider_javascript，该钩链增加画中画代码到幻灯片初始化的执行流程中，画中画代码的执行时点是当幻灯片初始化完成后。另外，上面代码中的数字 39 是幻灯片的 ID，用来判断哪套幻灯片要增加画中画代码，这个 ID 在 MetaSlider 的后台配置界面中可以直接看到。

前面提到了 MetaSlider 有四种幻灯片类型，这里举例使用了 responsive 类型，如果要使用其它的类型就把代码中 responsive 改成其它类型的名子，别的部分都不变。

第三步要把幻灯片显示到网页上，可以使用短码的方式，配置界面可以查看到。

<?php echo do_shortcode(''); ?>

把上面的代码放到网页中需要显示幻灯片的位置，比如主题的 header.php 中。

......
		</div><!-- .header-image -->
	<?php endif; // End header image check. ?>
	<?php echo do_shortcode(''); ?>
</header><!-- .site-header -->

<div id="content" class="site-content">

最后使用 CSS 给幻灯片加显示样式。

header .mlslider-thumbnail .rslides img {
	height:300px;
	width:100%;
	object-fit:cover;
}

header .mlslider-thumbnail ul.rslides_tabs {
	margin-top:20px;
	bottom:-35px !important;
	background-color:black !important;
}

header .mlslider-thumbnail ul.slider-thumbnail img{
	position: absolute;
	bottom: 20px;
	left: 37%;
	z-index: 3;
	box-shadow: 0px 9px 22px rgb(0 0 0/25%);
	width:calc(25%);
	height:calc(35%);
	object-fit:cover;
	transition: all 0.5s ease-in-out;
	opacity:0;
}

ul.slider-thumbnail {
	list-style:none;
}