滑动内容问题

Question

我想创建一个轮播，就像Telegram应用程序使用的那样。

刷卡后可能如下所示：

---

我的想法是使用 jQuery slick 插件。但是我在为幻灯片设置自定义宽度时遇到了很大的问题（例如“电报更快地发送邮件...”），因此，如果文本过多，则文本将像我的示例一样占据全屏宽度下面的代码。

发生的另一个问题是，我无法在幻灯片之间以百分比 （如10％）设置自定义填充。

最后一个问题是我无法更改指示当前活动幻灯片的点的位置和颜色。

任何帮助修复我的代码的人将不胜感激。谢谢。

注意：我不想使用px值。我想使用 percentage 来实现所有样式。

$(".slider").slick({
  dots: true,
  arrows: false
});

.slider {
  background: red
}

.slider div {
  color: black;
}

.slick-slide {
  color: white;
  font-family: "Arial", "Helvetica";
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css" rel="stylesheet" />
<link href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css" rel="stylesheet" />

<section class="slider">
  <div>This is text one....This is text one....This is text one....This is text one....This is text one....This is text one....</div>
  <div>This is text two....This is text two....This is text two....This is text two....This is text two....This is text two....<</div>
  <div>slide3</div>
  <div>slide4</div>
  <div>slide5</div>
  <div>slide6</div>
</section>