javascript jQuery - Slick carousel - 在这种情况下如何使用 appendTo()？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26494699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - Slick carousel - How to use appendTo() in this situation?
提问by filiplaw
I'm using Slick carouseljQuery plugin. In the docsit has an option appendArrows. As I understand it can be used to make the arrows stick to a different element. I use a carousel that is nested so that each slide has a title, link, description and than a couple sub-slides that are pictures. With the default settings the nav arrows are centred to the whole slide. I'd like them to be appended only to the pictures but I can't figure out how to do it. appendArrows: $('img')does not work.
我正在使用Slick carouseljQuery 插件。在文档中它有一个选项appendArrows。据我了解，它可用于使箭头粘在不同的元素上。我使用嵌套的轮播，以便每张幻灯片都有一个标题、链接、描述，而不是几个作为图片的子幻灯片。使用默认设置，导航箭头以整个幻灯片为中心。我希望它们仅附加到图片中，但我不知道该怎么做。appendArrows: $('img')不起作用。
Here's the markup:
这是标记：
<div class="slider-for">
<div class="single-item">
<h4>Title</h4>
<a href=“#” target="_blank">example.com</a>
<p>Description.</p>
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
</div>
<div class="single-item">
<h4>Title</h4>
<a href=“#” target="_blank">example.com</a>
<p>Description.</p>
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
</div>
<div class="single-item">
<h4>Title</h4>
<a href=“#” target="_blank">example.com</a>
<p>Description.</p>
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
</div>
</div>
And JS:
和JS：
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
swipe: false,
accessibility: false,
arrows: false,
});
$('.single-item').slick({
slide: 'img',
dots: true,
speed: 500,
arrows: true,
appendArrows: $('img'),
});`
EDIT: I think the question was not clear, my bad. The .slider-foris toggled by a .slider-navthat I omitted from the example. It all works, my problem is more one of aesthetics. When the arrows are appended to the whole .single-itemthey are centred vertically to the height of the whole <div class="single-item">and that looks odd since only the <img>s inside it are actually sliding. I'd like to append the arrows to the <img>'s so that they will be centred vertically to the height of the image. I hope that makes more sense.
编辑：我认为这个问题不清楚，我的错。在.slider-for由切换.slider-nav，我从示例中省略。一切正常，我的问题更多是美学问题。当箭头附加到整体时，.single-item它们垂直居中于整体的高度，<div class="single-item">这看起来很奇怪，因为只有<img>内部的s 实际上在滑动。我想将箭头附加到<img>'s 以便它们垂直居中到图像的高度。我希望这更有意义。
I guess what I'm asking really is: how do I target the <img>'s inside <div class="single-item">with appendArrows()? The docs state:
我想我真正要问的是：我如何针对<img>'s inside <div class="single-item">with appendArrows()？文档状态：
Option: appendArrows; Type: string; Default: $(element); Desc.: Change where the navigation arrows are attached (Selector, htmlString, Array, Element, jQuery object)
选项：appendArrows；类型：字符串；默认值：$（元素）；描述：更改导航箭头的附加位置（Selector、htmlString、Array、Element、jQuery 对象）
How do I use that? Please bear in mind that I'm a total beginner, I don't know much JS, so I'm probably missing something obvious.
我如何使用它？请记住，我是一个完全的初学者，我对 JS 了解不多，所以我可能遗漏了一些明显的东西。
采纳答案by filiplaw
I got it. It was a silly mistake. I just moved the <div class="single-item">down, to wrap only the <img>'s and wrapped the whole thing in another div. Like this:
我知道了。这是一个愚蠢的错误。我只是<div class="single-item">向下移动，只将<img>'s 包裹起来，然后将整个东西包裹在另一个div. 像这样：
<div>
<h4>Title</h4>
<a href=“#” target="_blank">example.com</a>
<p>Description.</p>
<div class="single-item">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
<img class="img-responsive" src="http://placehold.it/960x540">
</div>
</div>
回答by Gregory Nikitas
Consider adding the following CSS:
考虑添加以下 CSS：
.slick-prev
{
position: absolute;
left: 0px;
}
.slick-next
{
position: absolute;
right: 50px;
}
and amend the JS to reflect the following:
并修改 JS 以反映以下内容：
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
swipe: false,
accessibility: false,
arrows: true
});
$('.single-item').slick({
slide: 'img',
dots: true,
speed: 500,
arrows: false
});
If the above produces your desired output, you can tweak the position of the next arrow by adjusting the rightproperty of .slick-next
如果上面产生了你想要的输出，你可以通过调整.slick-next的right属性来调整下一个箭头的位置
