问题
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.
This will be used inside a table, so it should also adapt to the TD width !
回答1:
You can't get the exact the slider you wanted but can make it like your's. See this basic jquery slider.
And it's github page.
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));
}
});
Which is
attrthe images title and convert it to a<p>. You could add anotherdata-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));
}
});
And 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;
}
回答2:
Here's a custom slider using bxSlider it is in a td that's in a tr that's in a tbody that's in a table of 2 rows and 3 columns. The slider is responsive i.e. (resizes and adjusts to screen size). The top half has images. The bottom half has various types of text, notice the height will adjust to the size of the text.
Best view in full page.
SNIPPET
<!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>回答3:
You could checkout unslider. Haven't work with it yet, but it looks like something that you're looking for.
Unslider uses a HTML element to wrap everything in, and puts all the slides inside that as an unordered list. You can put any HTML you'd like inside each slide. Here's an example:
<div class="my-slider">
<ul>
<li>My slide</li>
<li>Another slide</li>
<li>My last slide</li>
</ul>
</div>
So inside these <li> you could do the styling regarding the image and descriptions...
来源：https://stackoverflow.com/questions/37632222/sideshow-with-title-and-description