光滑的滑块点重新定位 [英] slick slider dots repositioning

问题描述

在我的项目中，我使用滑动滑块插件（ http://kenwheeler.github.io/slick/ ）。我想知道是否可以重新定位光滑点。默认情况下，它们显示在应用了滑动滑块的div容器下面。我想在这里实现的是在滑动div块内放置光滑的点。我用箭头实现这一点没有问题，因为我可以用自定义类名称来引用它们。

我的html看起来像这样：

 < div class =滑块褪色> 
< div> 
< div class =text-box> 
< h2> Lorem ipsum< / h2> 
 ...附加文本
< / div> 
< / div> 
< div> 
< div class =text-box> 
< h2> Lorem ipsum< / h2> 
 ...附加文本
< / div> 
< / div> 
< div> 
< div class =text-box> 
< h2> Lorem ipsum< / h2> 
 ...附加文本
< / div> 
< / div> 
< / div> 
  

我的JS设置如下所示：

$ b $ （
自动播放：真实，
自动播放速度：3000，
无限：真，
速度：500，
fade：true，
cssEase：'linear'，
prevArrow：$（'。prev'），
nextArrow：$（'。下一个'），
dots：true
}）;

因此，正如我所提到的，现在点显示在整个下方slider-fade 类，但是我想获得它，例如，在文本框类下面。这是可以实现的吗？

可视化表示： http ：//i.stack.imgur.com/jmocB.png

目标是让点在块内的箭头下方。

$ blick在类中使用class .slick-dots 生成一个圆滑的圆点。那个班有绝对的位置。所以最简单的方法来实现你想要的是添加样式到该div：

  .slick-dots {
 top：100px; //使用像素数来放置它，因为你需要
 left：100px; //使用像素数来放置它，如你所想
} 
  

In my project I'm using slick slider plugin ( http://kenwheeler.github.io/slick/ ). I was wondering if it is possible to reposition slick dots. As default they are displayed below the div container for which slick slider is applied. What I want to achieve here is to put slick dots inside the sliding div blocks. I had no problem to achieve this with arrows as I can refer to them with custom class names.
My html looks like this:

<div class="slider-fade">
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
 <div>
  <div class="text-box">
   <h2>Lorem ipsum</h2>
   ...additional text
  </div>
 </div>
</div>

My JS settings looks like this:

$('.slider-fade').slick({
 autoplay: true,
 autoplaySpeed: 3000,
 infinite: true,
 speed: 500,
 fade: true,
 cssEase: 'linear',
 prevArrow: $('.prev'),
 nextArrow: $('.next'),
 dots: true
});

So as I mentioned now dots are displayed below the whole slider-fade class, but I want to get it, for example, below the text-box class. Is this achievable?

Visual representation: http://i.stack.imgur.com/jmocB.png

Aim is to get dots below the arrows inside the block.

解决方案

Slick generates the slick dots inside a div with class .slick-dots. That class has an absolute position. So the easiest way to achieve what you want is to add styling to that div:

.slick-dots {
  top: 100px;  // play with the number of pixels to position it as you want
  left: 100px; // play with the number of pixels to position it as you want
}

这篇关于光滑的滑块点重新定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！