狡猾的滑块初始化

Question

我正在使用带有免费 wordpress 主题的 Sly Slider。我已经正确地将 js 文件排入队列，设置了 html 标记并根据文档编写了一个 jquery 函数，但似乎无法让它垂直工作。我错过了什么；

我的php函数：

function sly_slider()
{
  $args = array(
    'post_type' => 'yacht',
    'posts_per_page' => -1
  );

  $yachts = get_posts( $args );

  echo '<div class="frame" id="frame">';
    echo '<ul class="slidee">';
      foreach ($yachts as $yacht) {
        $id = $yacht->ID;
        $image = get_the_post_thumbnail( $id, 'post-thumbnail' );
        $title = get_the_title( $yacht );
        $excerpt = get_the_excerpt();
        echo '<li class="yacht-slider-item">';
          echo '<h5 class="yacht-slider-title">'. $title .'</h5>';
          echo $image;
          echo $excerpt;
        echo '</li>';
      }
    echo '</ul>';
  echo '</div>';
}

我的 css（根据文档）：

.frame { padding: 0; width: 300px; height: 400px; }
.frame .slidee { margin: 0; padding: 0; width: 100%; list-style: none; }
.frame .slidee li { float: left; margin: 0 0 5px 0; padding: 0; width: 100%; height: 100px; }

我的 jQuery 函数：

function sidebar_sly()
{
    var options = {
        slidee = '.slidee',
        itemSelector: 'li',
        horizontal: 0,
        itemNav: 'basic',
        speed: 800,
        activatePageOn: 'click',
        cycleBy: 'pages',
        cycleInterval: 5000,
        startPaused: false,
        pageBuilder: function () {
            return '<li></li>';
        }
    };
    var sly = new Sly(frame, options, callbackMap).init();
    jQuery('#frame').sly(options);
}

Answer 1

var sly = new Sly(frame, options, callbackMap).init()

这里，你需要在frame中给出元素选择器的值，并在callbackMap中定义回调。所以在你的情况下，它将是

var sly = new Sly('#frame', options).init(); 

jQuery 函数：

function sidebar_sly() {
    var options = {
        slidee: '.slidee',
        itemSelector: 'li',
        horizontal: 0,
        itemNav: 'basic',
        speed: 800,
        activatePageOn: 'click',
        cycleBy: 'pages',
        cycleInterval: 5000,
        startPaused: false,
        pageBuilder: function () {
            return '<li></li>';
        }
    };
    var sly = new Sly('#frame', options).init();
}