Simple Image Slider HTML/CSS/JS

[_neonyx_]

Hi everyone!
Posting here because I'm having trouble with some code that to me looks perfectly fine, and I've seen it function perfectly fine when typing it as an example on another site, but for some reason it seems buggy on my site only :/

Here's the HTML portion:

<div id="slider">
  <a href="#" class="control_next">></a>
  <a href="#" class="control_prev"><</a>
  <ul>
    <li><a href="http://this-node.net/"><img src="http://this-node.net/This-NodeLogo.ico"></a></li>
    <li>Sample Slide</li>
    <li><a href="http://this-node.net/"><img src="http://this-node.net/This-NodeLogo.ico"></li>
    <li></li>
  </ul>  
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div> 

CSS Portion:

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}

And lastly, the JavaScript:

jQuery(document).ready(function ($) {

  $('#checkbox').change(function(){
    setInterval(function () {
        moveRight();
    }, 3000);
  });

    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;

    $('#slider').css({ width: slideWidth, height: slideHeight });

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });

    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 200, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 200, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };

    $('a.control_prev').click(function () {
        moveLeft();
    });

    $('a.control_next').click(function () {
        moveRight();
    });

});    

So where have I gone wrong? I've tried editing different things with varied results and it's driving me crazy because I can't figure it out :(
(I bet it's something totally simple I've overlooked too haha)

EDIT: Also, in case people are wondering, yes I did two of the 'slides' the same, have a sample slide and left one empty - I just wanted to make sure this worked before I bothered putting the proper content ^^"

[cereal]

Hi, it seems the problem is given the <a> tag on line 7:

<li>
    <a href="http://this-node.net/">
        <img src="http://this-node.net/This-NodeLogo.ico">

</li>

It is not closed, fix it and it should work. Here's the test on jsfiddle: http://jsfiddle.net/v5vas/1/

Bye!

[_neonyx_]

Wow that was silly of me! I think that happened when I was playing around with different links and pictures ^^"
However, after fixing that up it still doesn't do it right on my site... :(
Like I said, I've tried this model on other sites and it worked fine, but it's not doing it on mine for no reason I can see :/

[OsaMasw]

I've tested and its working fine to me

http://jsfiddle.net/hawkiq/4C7Pm/

    <div id="slider">
    <a href="#" class="control_next">></a>
    <a href="#" class="control_prev"><</a>
    <ul>
    <li><a href="#">First Slide</a></li>
    <li><a href="#">First Slide</a></li>
    <li><a href="#">Third Slide</a></li>
    <li><a href="#">First Slide</a></li>
    </ul>
    </div>
    <div class="slider_option">
    <input type="checkbox" id="checkbox">
    <label for="checkbox">Autoplay Slider</label>
    </div>

you have some error in </a> not closing links tags
and did you import jquery library ?

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

[_neonyx_]

Yes I imported it (just didn't put it in the code example here), and I already fixed the link closing tag. It still refuses to work. Yet it worked on JSFiddle, and on CodePen no problem. My site doesn't seem to like it though :/

[OsaMasw]

I've checked your website and found what is missing,
on your <head> part you import js library for slider with <link> I've change it to <script> and its works fine
so add these two lines in your head section

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://this-node.net/ImageSlider.js"></script>

[cereal]

In addition: you have two <body> tags.

And if you add event.preventDefault() to your links, the page will not move to the top each time you click:

$('a.control_prev').click(function () {
    event.preventDefault();
    moveLeft();
});
$('a.control_next').click(function () {
    event.preventDefault();
    moveRight();
});

[OsaMasw]

I've copied your source code from website http://www.this-node.net
and only added two lines and its worked, try to put your jquery library in head section above ImageSlider.js and remove it from body, delete duplicated <body>.

post your full code so we can better help you.

[_neonyx_]

It worked!!
Thank you so much!
Sorry for being a total noob and missing something so simple ^^"

I'm going to mark this thread solved now. Thank you again :D