我有一系列模板,我将其整合到一个滑块中。
它将使用模板系统包含在各个区域中。
由于这些是从在线图书馆中获取的,因此我发现合并他们直接提供的模板非常有用。
然而,包括样式和JavaScript似乎可能会产生问题。
示例:
<?php
global $slider, $img_path;
?>
<script>
jssor_<?php echo $slider; ?>_starter = function (containerId) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
}
};
var jssor_<?php echo $slider; ?> = new $JssorSlider$(containerId, options);
};
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="<?php echo $slider; ?>_container" style="position: relative; width: 600px;
height: 300px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px;
overflow: hidden;">
<div><img u="image" src="<?php echo $img_path; ?>/photography/002.jpg" /></div>
<div><img u="image" src="<?php echo $img_path; ?>/photography/003.jpg" /></div>
<div><img u="image" src="<?php echo $img_path; ?>/photography/004.jpg" /></div>
<div><img u="image" src="<?php echo $img_path; ?>/photography/005.jpg" /></div>
</div>
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow Navigator Skin 18 css */
/*
.jssora18l (normal)
.jssora18r (normal)
.jssora18l:hover (normal mouseover)
.jssora18r:hover (normal mouseover)
.jssora18ldn (mousedown)
.jssora18rdn (mousedown)
*/
.jssora18l, .jssora18r, .jssora18ldn, .jssora18rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(<?php echo $img_path; ?>/a18.png) no-repeat;
overflow:hidden;
}
.jssora18l {
background-position: -16px -45px;
}
.jssora18r {
background-position: -76px -45px;
}
.jssora18l:hover {
background-position: -136px -45px;
}
.jssora18r:hover {
background-position: -196px -45px;
}
.jssora18ldn {
background-position: -256px -45px;
}
.jssora18rdn {
background-position: -316px -45px;
}
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora18l" style="width: 29px; height: 29px; top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora18r" style="width: 29px; height: 29px; top: 123px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">javascript</a>
<!-- Trigger -->
<script>
jssor_<?php echo $slider; ?>_starter('<?php echo $slider; ?>_container');
</script>
</div>
这会以任何方式/形状/形式损害wordpress作为主题/插件功能吗?