Making a image slider plugin for Wordpress

Question

Im trying to make a image slider plugin for wordpress with some basic controls.

---

I get this error on chrome when i press the Next button:

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

I feel like i tried everything..

This is my plugin (php) file.

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

/* Main function */
function lk_main_slider(){
    ?>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

<?php echo '<link rel="stylesheet" href="' . plugins_url( 'lk-slider/css/style.css', dirname(__FILE__) ) . '"> '; ?>
<?php echo '<script type="text/javascript"' . plugins_url( 'lk-slider/js/slider.js', dirname(__FILE__) ) . '"></script> '; ?>

<div class="lk-plugin-slider">
  <ul>
    <li><?php echo '<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><?php echo '<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><?php echo '<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><?php echo '<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>

<?php echo '<script type="text/javascript"' . plugins_url( 'lk-slider/js/buttons.js', dirname(__FILE__) ) . '"></script> '; ?>

<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>

<?php
    }
?>

slider.js

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)
    }
}

buttons.js

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

style.css

.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;
}

I take any help i can get. Thanks!

Answer 1

Forgot a semi-colon:

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

Answer 2

/* 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;

    }

1. Always enqueue your scripts.
2. You don't need to add jQuery, and you definitely SHOULDN'T from a plugin.
3. Your shortcode didn't return anything. FTFY.