CODEWITHSUNDEEP
javascriptjquerycss
user2956619
user2956619

Reputation: 1

jQuery Unslider plugin not working correctly

Using Unslider plugin to do slideshows on a website, I got the slides going etc. But when I add options of speed, dots, delay, complete etc it wont work. The slides are rolling, but any changes I do in the JS dosent do anything.

<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>

$(function() {
    $('.banner').unslider({
    speed: 500,               
    delay: 3000,              
    complete: function() {},  
    keys: true,               
    dots: true,               
    fluid: false              
    });
});
</script>
</head>
<body background="background.jpg">
<div id="innhold"> 
        <div class="banner">
        <ul>
            <li><img src="mallorca.png" alt="mallorca"></li>
            <li><img src="rhodos.png" alt="rhodos"></li>
            <li><img src="portimao.png" alt="portimao"></li>
        </ul>
        </div>
</div>

And here is my CSS

.banner { position: relative; overflow: auto; }
.banner li { list-style: none; }
.banner ul li { float: left; }

Upvotes: 0

Views: 1567

Answers (1)

starkey01
starkey01

Reputation: 53

The options are working! It is just you didn't have the correct CSS to see that the options were working. I have mocked it up here for you: http://jsfiddle.net/3zt5k/ and added some css for the dots (numbers) that you can play around with.

    .dots li {
  position: relative;
    bottom: 50px;
    left: 215px;
    display: inline;
    margin: 5px;
 }
.dots .active {
    color:#fff
}
  • You can change the speed and delay time. (5000 = 5 seconds) When you
  • Use the arrow keys on the keyboard it changes through the photos.
  • Dots now show and the number is white for current image.
  • Not to sure what the fluid function does! But I am assuming you do, sorry.

Also, your http://unslider.com/unslider.min.js file is located in the external resources on the left of the jsfiddle!

Your solution was hiding from you the whole time :)

Upvotes: 1

Related Questions