jQuery.serialScroll - 无法让它工作

发布于 2024-11-26 20:44:48 字数 1243 浏览 0 评论 0 原文

我正在尝试制作水平滚动新闻页面。我的新闻显示在这种结构中：

<div id="news-container">
  <div id="news-wrapper">
    <div id="news">
      Some news content goes here
    </div>
    <div id="news">
      Some second news content goes here
    </div>
  </div>
</div>

我在下面添加 CSS 使其全部水平（我正在使用 jQuery 计算 #news 包装器宽度，以便所有新闻项都适合它）：

#news-container {
    overflow: hidden;
}
#news {
    width: 350px;
    display: inline-table;
}

现在我一直在尝试添加一些下一个/prev 按钮与 jQuery 并在其上使用serialScroll，但不知道如何让它工作！我添加了按钮（它们上没有 CSS，当它们工作时我会得到它）：

<img class="prev" src="img/prev.gif" alt="prev" width="42" height="53" />
<img class="next" src="img/next.gif" alt="next" width="42" height="53" />

这是从一些 SerialScroll 插件示例复制和修改的 js。我不知道如何使其工作以及如何将任何操作附加到我的按钮（尝试使用 .click() 和插件中的一些触发选项但没有效果）

$("#news-container").serialScroll({
  target:'#news-container',
  items:'div',
  prev:'#prev',
  next:'#next',
  axis:'xy',
  navigation:'a',
  duration:700,
  force:true,
})

@edit：这是我一直关注的演示： http://demos.flesler.com/jquery/serialScroll/

原文

I'm trying to make horizontal scrolling news page. I have my news display in this structure:

<div id="news-container">
  <div id="news-wrapper">
    <div id="news">
      Some news content goes here
    </div>
    <div id="news">
      Some second news content goes here
    </div>
  </div>
</div>

I'm adding CSS below to make this all horizontal (I'm calculating #news wrapper width with jQuery so all the news items fits it):

#news-container {
    overflow: hidden;
}
#news {
    width: 350px;
    display: inline-table;
}

Now I've been trying to add some next/prev buttons with jQuery and use serialScroll on them but have no idea how to get it working! I've added buttons (no CSS on them, ill get to it when they will work):

<img class="prev" src="img/prev.gif" alt="prev" width="42" height="53" />
<img class="next" src="img/next.gif" alt="next" width="42" height="53" />

And this is js copied and modified from some SerialScroll plugin examples. I have no idea how to make it working and how to attach any actions to my buttons (tried with .click() and some trigger options from plugin but without effect)

$("#news-container").serialScroll({
  target:'#news-container',
  items:'div',
  prev:'#prev',
  next:'#next',
  axis:'xy',
  navigation:'a',
  duration:700,
  force:true,
})

@edit:
This is demo I've been relating to:
http://demos.flesler.com/jquery/serialScroll/