javascript - Sly.js - 如何在单个页面上创建多个轮播

Question

我正在尝试使用 http://darsa.in/sly/examples/horizontal.html一页上有多个“按项目循环”轮播。

我的html:

<div class="frame" id="cycleitems" style="overflow: hidden;">
            <ul class="clearfix">
                <li class="">0</li>
                <li class="">1</li>
                <li class="">2</li>
                <li class="">3</li>
                <li class="">4</li>
                <li class="">5</li>
            </ul>
        </div>

我的一个轮播功能:

(function () {
    var $frame = $('#cycleitems');
    var $wrap  = $frame.parent();

    // Call Sly on frame
    $frame.sly({
        horizontal: 1,
        itemNav: 'basic',
        smart: 1,
        activateOn: 'click',
        mouseDragging: 1,
        touchDragging: 1,
        releaseSwing: 1,
        startAt: 0,
        scrollBar: $wrap.find('.scrollbar'),
        scrollBy: 1,
        speed: 300,
        elasticBounds: 1,
        easing: 'easeOutExpo',
        dragHandle: 1,
        dynamicHandle: 1,
        clickBar: 1,

        // Cycling
        cycleBy: 'items',
        cycleInterval: 1000,
        pauseOnHover: 1,

        // Buttons
        prev: $wrap.find('.prev'),
        next: $wrap.find('.next')
    });

    // Pause button
    $wrap.find('.pause').on('click', function () {
        $frame.sly('pause');
    });

    // Resume button
    $wrap.find('.resume').on('click', function () {
        $frame.sly('resume');
    });

    // Toggle button
    $wrap.find('.toggle').on('click', function () {
        $frame.sly('toggle');
    });
}());

但它仅适用于 1 个轮播。我需要多个具有不同内容的轮播。

Answer 1

您需要为每个轮播设置一个功能，以便单独控制它们以及控件的唯一 ID 和类。请参阅示例。

(function() {
  var $frame = $('#cycleitems');
  var $wrap = $frame.parent();

  // Call Sly on frame
  $frame.sly({
    horizontal: 1,
    itemNav: 'basic',
    smart: 1,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 0,
    speed: 300,
    elasticBounds: 1,
    easing: 'easeOutExpo',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,

    // Cycling
    cycleBy: 'items',
    cycleInterval: 1000,
    pauseOnHover: 1,

    // Buttons
    prev: $wrap.find('.prev'),
    next: $wrap.find('.next')
  });

  // Pause button
  $wrap.find('.pause').on('click', function() {
    $frame.sly('pause');
  });

  // Resume button
  $wrap.find('.resume').on('click', function() {
    $frame.sly('resume');
  });

  // Toggle button
  $wrap.find('.toggle').on('click', function() {
    $frame.sly('toggle');
  });
}());

(function() {
  var $frame = $('#cycleitems2');
  var $wrap = $frame.parent();

  // Call Sly on frame
  $frame.sly({
    horizontal: 1,
    itemNav: 'basic',
    smart: 1,
    activateOn: 'click',
    mouseDragging: 1,
    touchDragging: 1,
    releaseSwing: 1,
    startAt: 0,
    speed: 300,
    elasticBounds: 1,
    easing: 'easeOutExpo',
    dragHandle: 1,
    dynamicHandle: 1,
    clickBar: 1,

    // Cycling
    cycleBy: 'items',
    cycleInterval: 500,
    pauseOnHover: 1,

    // Buttons
    prev: $wrap.find('.prev2'),
    next: $wrap.find('.next2')
  });

  // Pause button
  $wrap.find('.pause2').on('click', function() {
    $frame.sly('pause');
  });

  // Resume button
  $wrap.find('.resume2').on('click', function() {
    $frame.sly('resume');
  });

  // Toggle button
  $wrap.find('.toggle2').on('click', function() {
    $frame.sly('toggle');
  });
}());

body {
  background: #e8e8e8;
}
.container {
  margin: 0 auto;
}
/* Example wrapper */

.wrap {
  position: relative;
  margin: 3em 0;
}
/* Frame */

.frame {
  height: 250px;
  line-height: 250px;
  overflow: hidden;
}
.frame ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  font-size: 50px;
}
.frame ul li {
  float: left;
  width: 227px;
  height: 100%;
  margin: 0 1px 0 0;
  padding: 0;
  background: #333;
  color: #ddd;
  text-align: center;
  cursor: pointer;
}
.frame ul li.active {
  color: #fff;
  background: #a03232;
}
/* Scrollbar */

.scrollbar,
.scrollbar2 {
  margin: 0 0 1em 0;
  height: 2px;
  background: #ccc;
  line-height: 0;
}
/* Pages */

.pages {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  text-align: center;
}
.pages li {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 4px;
  text-indent: -999px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.pages li:hover {
  background: #aaa;
}
.pages li.active {
  background: #666;
}
/* Controls */

.controls {
  margin: 25px 0;
  text-align: center;
}
/* One Item Per Frame example*/

.oneperframe {
  height: 300px;
  line-height: 300px;
}
.oneperframe ul li {
  width: 1140px;
}
.oneperframe ul li.active {
  background: #333;
}
/* Crazy example */

.crazy ul li:nth-child(2n) {
  width: 100px;
  margin: 0 4px 0 20px;
}
.crazy ul li:nth-child(3n) {
  width: 300px;
  margin: 0 10px 0 5px;
}
.crazy ul li:nth-child(4n) {
  width: 400px;
  margin: 0 30px 0 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sly/1.6.1/sly.min.js"></script>
<div class="frame" id="cycleitems">
  <ul class="clearfix">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
  </ul>
</div>
<div class="controls center">
  <button class="btn prev"><i class="fa fa-chevron-left"></i> prev</button>
  <div class="btn-group">
    <button class="btn pause"><i class="fa fa-pause"></i> pause</button>
    <button class="btn resume"><i class="fa fa-play"></i> resume</button>
    <button class="btn toggle"><i class="fa fa-pause"></i> toggle</button>
  </div>
  <button class="btn next">next <i class="fa fa-chevron-right"></i>

  </button>
</div>
<hr>
<div class="frame" id="cycleitems2">
  <ul class="clearfix">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
  </ul>
</div>
<div class="controls center">
  <button class="btn prev2"><i class="fa fa-chevron-left"></i> prev</button>
  <div class="btn-group">
    <button class="btn pause2"><i class="fa fa-pause"></i> pause</button>
    <button class="btn resume2"><i class="fa fa-play"></i> resume</button>
    <button class="btn toggle2"><i class=" fa fa-pause"></i> toggle</button>
  </div>
  <button class="btn next2">next <i class="fa fa-chevron-right"></i>

  </button>
</div>