附带标题和说明的边秀 [英] Sideshow with Title and description

问题描述

我一直在寻找带有图片，简短标题和长而多行描述的杂耍.该插件还应该具有基本的通用功能，例如前进和后退选项.

I've been looking for a sideshow with image, a short title and a long, multiline description. The plugin should also have basic common function like forward and backward option.

这将在表格内使用，因此它也应适应TD宽度！

推荐答案

您无法获得所需的确切滑块，但可以使其与您的滑块相同. 参见此基本jquery滑块.

You can't get the exact the slider you wanted but can make it like your's. See this basic jquery slider.

它是 github页面.

区别在于您既需要标题又需要描述，并且只有标题. 但是看看它的代码，您会看到此

The difference is you need both title and description and it has only title. But look at it's code you will see this

$.each($slides, function(key, slide) {

  var caption = $(slide).children('img:first-child').attr('title');

  // Account for images wrapped in links
  if (!caption) {
    caption = $(slide).children('a').find('img:first-child').attr('title');
  }

  if (caption) {
    caption = $('<p class="bjqs-caption">' + caption + '</p>');
    caption.appendTo($(slide));
  }

});

图像标题为attr，并将其转换为<p>.你可以 添加另一个data-description.并可以将上面的代码更改为..

Which is attr the images title and convert it to a <p>. You could add another data-description. And could change the above code to..

$.each($slides, function(key, slide) {

  var caption = $(slide).children('img:first-child').attr('title');
  var description = $(slide).children('img:first-child').data('description');

  // Account for images wrapped in links
  if (!caption) {
    caption = $(slide).children('a').find('img:first-child').attr('title');
  }
  if (!description) {
    description = $(slide).children('a').find('img:first-child').data('description');
  }

  if (caption) {
    caption = $('<p class="bjqs-caption">' + caption + '</p>');
    caption.appendTo($(slide));
  }
  if (description) {
    description = $('<p class="bjqs-description">' + description + '</p>');
    description.appendTo($(slide));
  }

});

和CSS

p.bjqs-caption,
p.bjqs-description {
  background: rgba(255, 255, 255, 0.5);
}
p.bjqs-caption {
  display: block;
  width: 96%;
  margin: 0;
  padding: 2%;
  position: absolute;
  bottom: 70px;
}
p.bjqs-description {
  display: block;
  width: 96%;
  margin: 0;
  padding: 2%;
  position: absolute;
  bottom: 0;
}

这篇关于附带标题和说明的边秀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！