slippry.js插件不工作

Question

我正在学习使用许多插件的网页设计。slippry.js就是其中之一，但我不知道我的代码出了什么问题。我在页面上什么也看不到。谢谢

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>

<script>
JQuery(document).ready(function() {
   JQuery('#pictures-demo').slippry({
   slippryWrapper: '<<div class="sy-box pictures-slider"/>',
   adaptiveHeight: false,
   captions: false, 
   pager: false,
   // controls
   controls: false,
   autoHover: false,

   // transitions
      transition: 'kenburns', // fade, horizontal, kenburns, false
      kenZoom: 140,
      speed: 2000 // time the transition takes (ms)
    }); });
</script>

HTML代码(index.html)

<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
    <div class="sy-slides-crop">
        <ul id="pictures-demo">
            <li title="And this is some very long caption for slide 3. Yes, really long.">
                <img src="images/MainBackground.png" alt="demo1_3">
            </li>
            <li title="And this is some very long caption for slide 4.">
                <img src="images/MainBackground2.png" alt="demo1_4">
            </li>
        </ul>
    </div>
</div>

​

Answer 1

对于属性slippryWrapper，有一些像"JQuery“(它必须是："jQuery")或两个<这样的拼写错误。

更新后的代码：

​

jQuery(document).ready(function () {
  jQuery('#pictures-demo').slippry({
    slippryWrapper: '<div class="sy-box pictures-slider"/>',
    adaptiveHeight: false,
    captions: false,
    pager: false,
    // controls
    controls: false,
    autoHover: false,

    // transitions
    transition: 'kenburns', // fade, horizontal, kenburns, false
    kenZoom: 140,
    speed: 2000 // time the transition takes (ms)
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>

<div class="sy-box pictures-slider">
  <div class="sy-slides-crop">
    <ul id="pictures-demo">
      <li title="And this is some very long caption for slide 3. Yes, really long.">
        <img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
      </li>
      <li title="And this is some very long caption for slide 4.">
        <img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
      </li>
    </ul>
  </div>
</div>

​

Answer 2

您的错误是参数

slippryWrapper

hastwo

起始尖括号

这里：

<script>
JQuery(document).ready(function() {
   JQuery('#pictures-demo').slippry({
   slippryWrapper: '<div class="sy-box pictures-slider"/>',
   adaptiveHeight: false,
   captions: false, 
   pager: false,
   // controls
   controls: false,
   autoHover: false,

   // transitions
      transition: 'kenburns', // fade, horizontal, kenburns, false
      kenZoom: 140,
      speed: 2000 // time the transition takes (ms)
    }); });
</script>