Javascript 为Wordpress制作图像滑块插件_Javascript_Php_Jquery_Css_Wordpress

Javascript 为Wordpress制作图像滑块插件

javascript php jquery css wordpress

Javascript 为Wordpress制作图像滑块插件,javascript,php,jquery,css,wordpress,Javascript,Php,Jquery,Css,Wordpress,我正在尝试为wordpress制作一个带有一些基本控件的图像滑块插件按下“下一步”按钮时，我在chrome上出现此错误： Uncaught ReferenceError: sliders is not defined at <anonymous>:1:1 (anonymous) @ VM18633:1 style.css var Slider = function() { this.initialize.apply(this, arguments) } Slid

我正在尝试为wordpress制作一个带有一些基本控件的图像滑块插件

按下“下一步”按钮时，我在chrome上出现此错误：

Uncaught ReferenceError: sliders is not defined
    at <anonymous>:1:1
(anonymous) @ VM18633:1

style.css

var Slider = function() { this.initialize.apply(this, arguments) }
    Slider.prototype = {

      initialize: function(slider) {
        this.ul = slider.children[0]
        this.li = this.ul.children

        // make <ul> as large as all <li>’s
        this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'

        this.currentIndex = 0
    },

    goTo: function(index) {
        // filter invalid indices
        if (index < 0 || index > this.li.length - 1)
          return

        // move <ul> left
        this.ul.style.left = '-' + (100 * index) + '%'

        this.currentIndex = index
    },

    goToPrev: function() {
        this.goTo(this.currentIndex - 1)
    },

    goToNext: function() {
        this.goTo(this.currentIndex + 1)
    }
}

var sliders = []
    $('.slider').each(function() {
    sliders.push(new Slider(this))
})

.lk-plugin-slider {
  width: 400px; 
  height: 300px;
  overflow: hidden;
  position: relative; /* for overflow: hidden to work in IE7 */
}
/* styled by JS to match the added width and height of all <li>’s */
.lk-plugin-slider > ul {
  position: relative;
  left: 0;
  -webkit-transition: .5s left;
  -moz-transition: .5s left;
  -ms-transition: .5s left;
  -o-transition: .5s left;
  list-style: none;
  margin: 0; 
  padding: 0;
}
.lk-plugin-slider > ul > li {
  float: left;
  width: 400px; 
  height: 300px;
}

/* title */
.lk-slider-title {
  margin-top: -47%;
  margin-left: 5%;
  color: white;
}

/* text */
.lk-slider-text {
  margin-left: 5%;
  color: white;
}

.lk插件滑块{
宽度：400px；
高度：300px；
溢出：隐藏；
位置：相对；/*溢出：隐藏以在IE7中工作*/
}
/*由JS设计样式，以匹配所有的附加宽度和高度*/
.lk插件滑块>ul{
位置：相对位置；
左：0；
-webkit转换：左5秒；
-moz过渡：左5秒；
-ms转换：左5秒；
-o型过渡：左5秒；
列表样式：无；
保证金：0；
填充：0；
}
.lk插件滑块>ul>li{
浮动：左；
宽度：400px；
高度：300px；
}
/*头衔*/
.lk滑块标题{
利润率最高：-47%；
左缘：5%；
颜色：白色；
}
/*正文*/
.lk滑块文本{
左缘：5%；
颜色：白色；
}

我接受任何我能得到的帮助。谢谢

忘记了分号：

var sliders = []; // <-- here
$('.slider').each(function() {
    sliders.push(new Slider(this))
})

var滑块=[]；// 忘记了分号：
var sliders = []; // <-- here
$('.slider').each(function() {
    sliders.push(new Slider(this))
})

var滑块=[]；//<代码>/*将脚本排队！永远*/
添加_操作（“wp_排队_脚本”，“se42031002_排队”）；
函数se42031002_enqueue（）{
wp_enqueue_脚本（'lk_slider'，plugins_url（'lk slider/js/slider.js'，dirname（'uuu FILE_u）））；
wp_enqueue_脚本（'lk_slider-buttons'，plugins_url（'lk slider/js/buttons.js'，dirname（uu FILE_uu））；
wp_enqueue_style（'lk_slider-style'，plugins_url（'lk slider/css/style.css'，dirname（'uuu FILE_u）））；
}
/*短码*/
添加_短代码（“lk_滑块”、“lk_主_滑块”）；
/*主要功能*/
函数lk_主_滑块（）{
$output='

这是标题1
这是正文1


这是标题2
这是文本2


这是标题3
这是文本3


这是标题4
这是文本4












';
返回$output；
}

始终将脚本排队
您不需要添加jQuery，也绝对不应该从插件添加jQuery
您的快捷码没有返回任何内容。FTFY
/*将脚本排队！永远*/
添加_操作（“wp_排队_脚本”，“se42031002_排队”）；
函数se42031002_enqueue（）{
wp_enqueue_脚本（'lk_slider'，plugins_url（'lk slider/js/slider.js'，dirname（'uuu FILE_u）））；
wp_enqueue_脚本（'lk_slider-buttons'，plugins_url（'lk slider/js/buttons.js'，dirname（uu FILE_uu））；
wp_enqueue_style（'lk_slider-style'，plugins_url（'lk slider/css/style.css'，dirname（'uuu FILE_u）））；
}
/*短码*/
添加_短代码（“lk_滑块”、“lk_主_滑块”）；
/*主要功能*/
函数lk_主_滑块（）{
$output='

这是标题1
这是正文1


这是标题2
这是文本2


这是标题3
这是文本3


这是标题4
这是文本4












';
返回$output；
}

始终将脚本排队
您不需要添加jQuery，也绝对不应该从插件添加jQuery
您的快捷码没有返回任何内容。FTFY
在button.js中，在var sliders=[]
之后加一个分号，谢谢我看到了，但这不是修复方法。你在HTML中附加了slider.js
，但不是我附加的buttons.js
。它就在.slider.js和buttons.js脚本标记缺少src属性的上方，不是吗？在button.js中，在var sliders=[]
之后放一个分号，谢谢我看到了，但这不是修复tho。你在HTML中附加了slider.js
，但不是我附加的buttons.js
。它就在.slider.js和buttons.js脚本标记的上方缺少src属性，不是吗？它仍然不起作用。。未捕获的TypeError:无法读取未定义的属性'goToNext'：1:11（匿名）@VM484:1您是否仍然收到“滑块未定义”错误？因此我复制粘贴该错误。我犯了这些错误。buttons.js？ver=4.7.2:2未捕获引用错误：$未在buttons.js？ver=4.7.2:2（匿名）@buttons.js？ver=4.7.2:2 jquery migrate.min.js？ver=1.4.1:2 JQMIGRATE:migrate已安装，版本1.4.1 VM2390:1未捕获类型错误：无法读取未定义的属性“GotonText”：1:11用（函数（$）包装jquery脚本{//code here}（jQuery）；
为了避免$未定义
错误，它仍然不起作用..未捕获类型错误：无法读取未定义的属性“goToNext”：1:11（匿名）@VM484:1是否仍然得到“滑块未定义”错误？所以我复制粘贴了它。我得到了这些错误。buttons.js？ver=4.7.2:2未捕获引用错误：$未在buttons.js？ver=4.7.2:2（匿名）处定义@buttons.js？ver=4.7.2:2 jquery migrate.min.js？ver=1.4.1:2 JQMIGRATE:migrate已安装，版本1.4.1 VM2390:1未捕获类型错误：无法读取未定义at:1:11的属性“goToNext”：用包装jquery脚本（函数（$）{//code here}）（jquery）；
为了避免$未定义错误是的，我添加了i…，但仍然没有雪茄。是的，我添加了i…，但仍然没有雪茄。
/* Enqueue Your Scripts! Always! */
add_action('wp_enqueue_scripts', 'se42031002_enqueue');
function se42031002_enqueue() {
wp_enqueue_script('lk_slider', plugins_url( 'lk-slider/js/slider.js', dirname(__FILE__) ));
wp_enqueue_script('lk_slider-buttons', plugins_url( 'lk-slider/js/buttons.js', dirname(__FILE__) ));
wp_enqueue_style('lk_slider-style', plugins_url( 'lk-slider/css/style.css', dirname(__FILE__) ));

}

/* Shortcode */
add_shortcode( 'lk_slider', 'lk_main_slider' );

/* Main function */
function lk_main_slider(){

    $output = '<div class="lk-plugin-slider"><ul>
        <li><img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/1.png', dirname(__FILE__) ) . '">
            <div class="lk-slider-title">This is the title 1</div>
            <div class="lk-slider-text">This is the text 1</div>
        </li>
        <li><img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/2.png', dirname(__FILE__) ) . '">
            <div class="lk-slider-title">This is the title 2</div>
            <div class="lk-slider-text">This is the text 2</div>
            </li>
        <li><img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/3.png', dirname(__FILE__) ) . '">
            <div class="lk-slider-title">This is the title 3</div>
            <div class="lk-slider-text">This is the text 3</div>
        </li>
        <li><img class="lk-slider-photo" src="' . plugins_url( 'lk-slider/img/4.png', dirname(__FILE__) ) . '">
            <div class="lk-slider-title">This is the title 4</div>
            <div class="lk-slider-text">This is the text 4</div>
            </li>
      </ul>
    </div>

<div class="lk-slider-buttons">
    <ul>
        <li><a href="javascript:sliders[0].goToPrev()">Previous</a></li>
        <li><a href="javascript:sliders[0].goToNext()">Next</a></li>
    </ul>
    <ul>
        <li><a href="javascript:sliders[0].goTo(0)">1</a></li>
        <li><a href="javascript:sliders[0].goTo(1)">2</a></li>
        <li><a href="javascript:sliders[0].goTo(2)">3</a></li>
        <li><a href="javascript:sliders[0].goTo(3)">4</a></li>
    </ul>
</div>';
return $output;

    }