CODEWITHSUNDEEP
javascriptjquery
andresr
andresr

Reputation: 93

Why doesn't my click function work in jquery?

I wan to create a simple carousel that holds an image title and text. When I click the "next" span, it should display the next two <li>. But nothing happens when I do so.

<script type="text/javascript">
    $(document).ready(function() {
        $('#right').click(function() {
            $('li').animate({
                left: '-600px'
            }, 500);
        });
    });
</script>

Fiddle

See this example.

Upvotes: 0

Views: 102

Answers (2)

Sarvap Praharanayuthan
Sarvap Praharanayuthan

Reputation: 4360

Add position: relative to your .carousel-inner li.

Upvotes: 0

kunalbhat
kunalbhat

Reputation: 1719

This is a pure CSS issue. You need only to add position: relative; to your li, so you can effect the left property in your script.

.carousel-inner li {
  display: inline;
  float: left;
  margin: 20px;
  border: 1px solid #999;
  padding: 25px;
  border-radius: 20px;
  position: relative; // Add this so setting a left position will work
}

Simply try adding that in Chrome Inspector and you'll see it works. Ciao!

Upvotes: 4

Related Questions