jquery - 无法获取 unslider 工作的演示代码

Question

我正在尝试按照http://unslider.com/上的说明进行操作，但无法正常工作。

这就是我所拥有的，没有任何显示。

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://unslider.com/unslider.min.js"></script>

    <style>
        .banner { position: relative; overflow: auto; }
        .banner li { list-style: none; }
            .banner ul li { float: left; }
    </style>
</head>
<body>

    <div class="banner">
        <ul>
            <li>This is a slide.</li>
            <li>This is another slide.</li>
            <li>This is a final slide.</li>
        </ul>
    </div>


    <script>
            $(function() {
                $('.banner').unslider();
            });
    </script>
</body>
</html>

score 4 · Accepted Answer

如果你想看一些图像，添加一些图像

<html>
<head>
<style>
.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://unslider.com/unslider.min.js"></script>
<script>
$(function() {
    $('.banner').unslider();
});
</script>
</head>
<body>
<div class="banner">
    <ul>
        <li><img src="http://cdn.arstechnica.net/wpcontent/uploads/2012/10/06_Place_20773_1_Mis.jpg"></li>
        <li><img src="http://s3.firstpost.in/wp-content/uploads/2012/11/300vsSA-Getty.jpg"></li>

    </ul>
</div>
</body>

score 3 · Accepted Answer

因为您的代码中没有css添加任何内容，所以原始端添加了以下 css

http://unslider.com/style.css

检查这个工作示例。

score 1 · Accepted Answer

检查这个不错的教程！

http://www.youtube.com/watch?v=qBOB9scHnwo

您需要包含脚本

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

横幅 div 的样式

<style>
    .banner {
        position: relative;
        width: 100%;
        overflow: auto;
        padding: 0px;
        margin: 0px;
    }
    .banner ul {
        padding: 0px;
        margin: 0px;
    }
    .banner li{
    padding: 0px;
    margin: 0px;
    }
    .banner ul li {
        float:left;
        padding: 0px;
        margin: 0px;
        min-height: 200px;
        -webkit-background-size: 100% auto;
        -moz-background-size: 100% auto;
        -o-background-size: 100% auto;
        -ms-background-size: 100% auto;
        background-size: 100% auto;
        background-position-y: -75px;
        box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
    }
</style>

并开始取消滑块

<script>
    $(document).ready(function(){
        $('.banner').unslider({
        speed: 500,               //  The speed to animate each slide (in milliseconds)
        delay: 3000,              //  The delay between slide animations (in milliseconds)
        complete: function() {},  //  A function that gets called after every slide animation
        keys: true,               //  Enable keyboard (left, right) arrow shortcuts
        dots: true,               //  Display dot navigation
        fluid: true              //  Support responsive design. May break non-responsive designs
        });
     });
</script>

score 0 · Accepted Answer

可能你错过了 CSS 样式。把它放在你的<head>：

<style>
    @import url("http://unslider.com/style.css");
    .banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
    .banner ul li { float: left; }
</style>

JSBIN

jquery - 无法获取 unslider 工作的演示代码

4 回答 4

Related

Reference