Question

我一直在寻找带有图片，简短标题和冗长多线描述的旁观。该插件还应具有基本的常用功能，如前进和后退选项。

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

Answer 1

你不能得到你想要的滑块，但可以像你的那样。请参阅此basic jquery slider。

区别在于你需要标题和描述，它只有标题。但看看它的代码，你会看到这个

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

Answer 2

此处＆＃39;是使用bxSlider的自定义滑块，td位于tr的{{1}} tbody中{＆＃}} ＃39;在table的2行3列中。滑块是响应的，即（调整大小并调整到屏幕尺寸）。上半部分有图像。下半部分有各种类型的文字，注意高度会根据文字大小调整。

完整页面中的最佳视图。

段

＆＃13;

<!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>

＆＃13;

Answer 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>内你可以做关于图像和描述的样式......

Sideshow标题和描述

3 个答案:

段