带有标题和描述的杂耍[关闭]答案

【问题标题】：Sideshow with Title and description [closed]带有标题和描述的杂耍[关闭]
【发布时间】：2016-10-04 13:45:40
【问题描述】：

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

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

【问题讨论】：

标签： jquery slideshow

【解决方案1】：

您无法获得所需的确切滑块，但可以使其与您的滑块一样。看到这个basic jquery slider。

它是github page。

不同之处在于您需要标题和描述，并且它只有标题。但是看看它的代码你会看到这个

$.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。并且可以把上面的代码改成..

$.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;
}

【讨论】：

很好的答案，只是一个问题。如何将描述段落更改为图片底部？
@Sourav 描述会随着每张图片幻灯片而变化。这将是一张单张图片幻灯片
我想知道如何将描述的位置从图片上方放置到图片底部。
@Sourav 这就是为什么我将 css 放置在 'p.bjqs-caption' 底部 70px 原来是 0，你可以让它更高可能是 'bottom: 100px'

【解决方案2】：

这是一个使用bxSlider 的自定义滑块，它位于td 中，位于tr 中，位于tbody 中，位于table 中，具有2 行和3 列。滑块是响应式的，即（调整大小并调整到屏幕大小）。上半部分有图像。下半部分有各种类型的文字，注意高度会根据文字的大小进行调整。

完整页面的最佳视图。

片段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Multi BxSlider</title>
  <link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.1/css/font-awesome.min.css" rel="stylesheet">
  <style>
    img,
    li {
      display: block;
      margin: 0 auto;
      overflow-y: auto;
    }
    
    table {
      border: 1px solid gray;
      width: 100%;
      table-layout: fixed;
    }
    
    td,
    th {
      border: 1px solid blue;
      overflow-y: auto;
    }
    
    .huge {
      width: 50%;
    }
    
    section {
      min-height: 200px;
    }
  </style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td rowspan="2" class="huge">
          <ul class="bx">
            <li data-idx="0">
              <img src="https://dummyimage.com/480x270/000/fff.png&text=1">
            </li>
            <li data-idx="1">
              <img src="https://dummyimage.com/480x270/000/0b0.png&text=2">
            </li>
            <li data-idx="2">
              <img src="https://dummyimage.com/480x270/000/fc0.png&text=3">
            </li>
            <li data-idx="3">
              <img src="https://dummyimage.com/480x270/000/0ff.png&text=4">
            </li>
            <li data-idx="4">
              <img src="https://dummyimage.com/480x270/000/b52.png&text=5">
            </li>
          </ul>
          <ul class="cx">
            <li data-idx="0">
              <h2>Kafka</h2>
              <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and
                divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment.</p>
            </li>
            <li data-idx="1">
              <h2>Far and Away</h2>
              <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
            </li>
            <li data-idx="2">
              <section>
                <h2>Ordered List of Links</h2>
                <ol>
                  <li><a href="https://w3schools.com">W3Schools</a>
                  </li>
                  <li><a href="https://example.com">Example</a>
                  </li>
                  <li><a href="https://stackoverflow.com">Domain</a>
                  </li>
                  <li><a href="https://github.com/stevenwanderski/bxslider-4">bxSlider-GitHub</a>
                  </li>
                  <li><a href="https://bxslider.com/options">bxSlider-Options</a>
                  </li>
                </ol>
              </section>
            </li>
            <li data-idx="3">
              <section>
                <table>
                  <thead>
                    <tr>
                      <th>TH</th>
                      <th>TH</th>
                      <th>TH</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>TD</td>
                      <td>TD</td>
                      <td>TD</td>
                    </tr>
                    <tr>
                      <td>TD</td>
                      <td>TD</td>
                      <td>TD</td>
                    </tr>
                    <tr>
                      <td>TD</td>
                      <td>TD</td>
                      <td>TD</td>
                    </tr>
                  </tbody>
                </table>
              </section>
            </li>
            <li data-idx="4">
              <section>
                <h1>H1 Title</h1>
                <h2>H2 Title</h2>
                <h3>H3 Title</h3>
                <h4>H4 Title</h4>
                <h5>H5 Title</h5>
                <h6>H6 Title</h6>
              </section>
            </li>
          </ul>
        </td>
        <td>Yikes that's an enormous cell!</td>
        <td>Why in the hell is that cell so HUGE!?</td>
      </tr>
      <tr>
        <td>The weight of this cell is crushing us...ack!</td>
        <td>Run for your lives! IT'S CELLZILLA!!!</td>
      </tr>
    </tbody>
  </table>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.js"></script>
  <script>
    $(function() {
      var bx = $(".bx").bxSlider({
        pager: false,
        nextText: '<i class="fa fa-chevron-circle-right"></i>',
        prevText: '<i class="fa fa-chevron-circle-left"></i>',
        onSlideBefore: goTo,
        slideMargin: 50
      });

      var cx = $(".cx").bxSlider({
        pager: false,
        controls: false,
        adaptiveHeight: true,
        slideMargin: 50
      });

      function goTo($ele, from, to) {
        var idx = parseInt(to, 10);
        cx.goToSlide(idx);
      }
    });
  </script>
</body>

</html>

【讨论】：

不工作：/在 Opera 上试过
请提供更多详细信息。 “不工作”控制台上报告的错误怎么样？
请张贴您浏览器屏幕的图片。我只看到第一张图片，无法控制移动/后退。
使用 Chrome 或 Firefox 怎么样？听说要免费送人，快点在他们都走之前！我不知道你的情况如何，但在使用我的 JWPlayer 视频的流量中，Opera 的使用率是 0.5%。 IE 9 比 Opera 高出几个百分点。轮到你发一张你在 Opera 中看到的图片了，应该很有趣。
这适用于 FF :) 但是 Opera 有什么问题：/

【解决方案3】：

您可以结帐unslider。尚未使用它，但它看起来像您正在寻找的东西。

Unslider 使用 HTML 元素来包装所有内容，并将所有幻灯片作为无序列表放入其中。您可以在每张幻灯片中放入您想要的任何 HTML。这是一个例子：

<div class="my-slider">
    <ul>
        <li>My slide</li>
        <li>Another slide</li>
        <li>My last slide</li>
    </ul>
</div>

所以在这些<li> 中，您可以对图像和描述进行样式设置...

【讨论】：

你能帮忙设计一下吗？我无法得到它：/