Question

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

我的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()

在这里，您需要在框架中给出元素选择器的值，并在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();
}

Sly Slider init

1 个答案: