从 AnythingSlider 中删除所有面板并重新启动插件

发布于 2024-10-31 13:36:18 字数 321 浏览 0 评论 0原文

我使用 AnythingSlider 来显示推文、博客文章、flickr 照片和 YouTube 视频的混搭，最初效果很好。我正在尝试添加排序功能，但为此我需要删除按钮单击 -> 上的所有幻灯片添加新幻灯片 ->并重新初始化插件。

AnythingSlider 文档（以及代码）暗示了删除幻灯片的能力，并且插件应该轻松处理它。我在任何地方都找不到任何类型的删除代码，所以我想这样的东西会起作用：

$("#slider li:not(.cloned)").remove();

但到目前为止我还没有运气。有人有这样的经历吗？非常感谢。

原文

I'm using the AnythingSlider to display a mashup of tweets, blog posts, flickr photos, and youtube videos, and initially it works great. I'm trying to add sort functionality, but to do so I need to remove all slides on a button click -> add the new slides -> and re-initialize the plugin.

The AnythingSlider documentation (as well as the code) hints at the ability to remove slides and the plugin should just take it in stride. I haven't been able to find any kind of remove code anywhere, so I fiugured something like this would work:

$("#slider li:not(.cloned)").remove();

but so far i've had no luck. Anyone have any experience with something like this? Many Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一影成城 2024-11-07 13:36:18

没有任何内置代码可以删除幻灯片，因此您可以使用上面的代码，或者如果您确实只想删除所有幻灯片，请执行以下操作（无需避免删除克隆的幻灯片）：

$('#slider li').remove();

然后添加任何新内容您想要的幻灯片（排序或其他）

$('<li>New Stuff</li>').appendTo('#slider');

然后更新滑块

$('#slider').anythingSlider(); // don't include options

上面的代码本质上与 AnythingSlider 演示中看到的代码相同页面（主题选择器旁边的按钮）。我已将其包含在下面并附有更多评论:)

// Add a slide
var imageNumber = 1;
$('button.add').click(function(){
  $('#slider1')
    // add a new slide, but cycle between two images
    .append('<li><img src="images/slide-tele-' + (++imageNumber%2 + 1)  + '.jpg" alt="" /></li>')
    // update the slider
    .anythingSlider();
});
$('button.remove').click(function(){
  // don't let the last slide get deleted - it's ok if you do delete it, it's just not purdy ;)
  if ($('#slider1').data('AnythingSlider').pages > 1) {
    // remove the last slide (the cloned slide is actually the last, that's why there is a ":not()" in there
    $('#slider1 > li:not(.cloned):last').remove();
    // update the slider
    $('#slider1').anythingSlider();
  }
});

There isn't any built in code to remove slides, so you could use the code above, or if you really want to just remove all the slides, do this (no need to avoid removing the cloned slides):

$('#slider li').remove();

Then add in whatever new slides you want (sorted or whatever)

$('<li>New Stuff</li>').appendTo('#slider');

Then update the slider

$('#slider').anythingSlider(); // don't include options

The above code is essentially the same code as see on the AnythingSlider demo page (the buttons next to the theme selector). I've included it below with more comments :)

// Add a slide
var imageNumber = 1;
$('button.add').click(function(){
  $('#slider1')
    // add a new slide, but cycle between two images
    .append('<li><img src="images/slide-tele-' + (++imageNumber%2 + 1)  + '.jpg" alt="" /></li>')
    // update the slider
    .anythingSlider();
});
$('button.remove').click(function(){
  // don't let the last slide get deleted - it's ok if you do delete it, it's just not purdy ;)
  if ($('#slider1').data('AnythingSlider').pages > 1) {
    // remove the last slide (the cloned slide is actually the last, that's why there is a ":not()" in there
    $('#slider1 > li:not(.cloned):last').remove();
    // update the slider
    $('#slider1').anythingSlider();
  }
});

回复收藏 0 原文

~没有更多了~