jquery - 我的 Stack Slider 文本变得模糊，导航也没有循环

标签 jquery html css

我将这个插件用于堆栈 slider 。 https://github.com/dpesofficial/stack-slider

在对 HTML 和 CSS 进行一些更改后，似乎一切正常，除了:

  1. 文字变得模糊
  2. 导航不像 github 演示所示那样循环，在导航结束时， slider 不是全尺寸

你们知道为什么会这样吗？解决方案是什么？

jQuery(document).ready(function($) {
  $("#slider").stack_slider({
    autoPlaySpeed: 6000,
    autoPlay: false,
    dots: false,
    arrows: true,
    drag: false,
    direction: "vertical"
  });
});
/* width */

.scroll-box::-webkit-scrollbar {
  width: 8px;
}


/* Track */

.scroll-box::-webkit-scrollbar-track {
  background: #848484;
}


/* Handle */

.scroll-box::-webkit-scrollbar-thumb {
  background: #000000;
}


/* Handle on hover */

.scroll-box::-webkit-scrollbar-thumb:hover {
  background: #000000;
}

.dp_item .text-right {
  text-align: right;
}

.dp-wrap {
  margin: 0 auto;
  position: relative;
  perspective: 1000px;
  height: 100%;
}

.dp-slider {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.dp-slider div {
  transform-style: preserve-3d;
}

.dp_item {
  display: block;
  position: absolute;
  text-align: center;
  color: #2C2C2C;
  transition: transform 1.2s;
  border: 1px solid #707070;
}

#dp-slider .dp_item:first-child {
  z-index: 10 !important;
  transform: rotateY(0deg) translateX(0px) !important;
  background: #FAD414;
}

.dp_item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(10%) scale(0.9);
}

.dp_item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(20%) scale(0.8);
}

#dp-next,
#dp-prev {
  position: absolute;
  top: 50%;
  right: 16%;
  height: 33px;
  width: 33px;
  z-index: 10;
  cursor: pointer;
}

#dp-prev {
  left: 15px;
  transform: rotate(180deg);
}

#dp-dots {
  position: absolute;
  bottom: 25px;
  z-index: 12;
  left: 38%;
  cursor: default;
}

#dp-dots li {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
}

#dp-dots li:hover {
  cursor: pointer;
  background: #FA8C8C;
  transition: background .3s;
}

#dp-dots li.active {
  background: #FA8C8C;
}

.dp_item {
  width: 100%;
}

.dp-content,
.dp-img {
  text-align: left;
}

.dp_item {
  display: flex;
  align-items: center;
  background: #0F1010;
  overflow: hidden;
}

.dp-content {
  padding-left: 9%;
  padding-right: 9%;
  display: inline-block;
  width: 50%;
  color: #000;
}

.row .col .dp-content h3 {
  margin-bottom: 10%;
  color: #000;
}

.row .col .dp-content p {
  color: #000;
}

.dp-img {
  width: 50%;
}

#dp-slider {
  height: 738px;
}

#dp-slider .dp_item:hover:not(:first-child) {
  cursor: pointer;
}

.img-fluid {
  display: block;
  margin-bottom: 0 !important;
}


/* vertical layout */

.vertical #dp-slider .dp_item[data-position="3"] {
  transform: rotateY(0deg) translateY(-3%) scale(0.8);
}

.vertical #dp-slider .dp_item[data-position="2"] {
  transform: rotateY(0deg) translateY(9%) scale(0.9);
}

.vertical #dp-slider .dp_item:first-child {
  transform: rotateY(0deg) translateY(21%) scale(1) !important;
}

.dp-wrap.vertical #dp-dots {
  bottom: -20%;
}

.dp-wrap.vertical #dp-next,
.dp-wrap.vertical #dp-prev {
  top: 75%;
}

.scroll-box {
  width: auto;
  height: 20rem;
  overflow: auto;
  padding: 0 5%;
}

.scroll-box-left {
  padding: 0 5% 0 0;
}

.scroll-box p {
  -webkit-filter: blur(0.000001px) !important;
  -webkit-font-smoothing: antialiased !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://dpesofficial.github.io/stack-slider/js/stack-slider.js"></script>
<!-- slider -->
<div class="container" style="max-width: 1400px; margin: 0 auto;">
  <div id="slider">
    <div class="dp-wrap">
      <div id="dp-slider">

        <div class="dp_item" data-class="1" data-position="1">
          <div class="dp-img">
            <img class="img-fluid" src="https://iceiceicy.com/causeeffect/wp-content/uploads/2018/12/fsbolt.png">
          </div>
          <div class="dp-content text-right">
            <h3>Lorem ipsum</h3>
            <div class="scroll-box">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit felis, condimentum in nunc ut, ultricies accumsan metus. Maecenas non dignissim ipsum. Aliquam auctor urna arcu, non eleifend massa euismod eget. Etiam fringilla ut ex
                eget maximus. Suspendisse viverra commodo magna, quis elementum sem feugiat ac. Vestibulum dolor ligula, luctus ac quam quis, laoreet varius orci. Aliquam vitae libero at neque ornare dignissim a ac tellus. Etiam pretium risus blandit
                egestas pretium. Vivamus vestibulum fermentum orci elementum feugiat. Integer a tellus sodales, laoreet leo in, egestas ipsum. Donec iaculis, leo nec sagittis consectetur, massa augue elementum nibh, in blandit lacus arcu et eros. Vivamus
                posuere vitae ante eget egestas. Donec id neque lectus. Nunc venenatis vitae neque nec tristique. Nam vitae nisi velit. Nullam consectetur justo eget tortor facilisis porta.</p>
            </div>
          </div>
        </div>

        <div class="dp_item" data-class="2" data-position="2">
          <div class="dp-content">
            <h3>Lorem ipsum 2</h3>
            <div class="scroll-box scroll-box-left">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit felis, condimentum in nunc ut, ultricies accumsan metus. Maecenas non dignissim ipsum. Aliquam auctor urna arcu, non eleifend massa euismod eget. Etiam fringilla ut ex
                eget maximus. Suspendisse viverra commodo magna, quis elementum sem feugiat ac. Vestibulum dolor ligula, luctus ac quam quis, laoreet varius orci. Aliquam vitae libero at neque ornare dignissim a ac tellus. Etiam pretium risus blandit
                egestas pretium. Vivamus vestibulum fermentum orci elementum feugiat. Integer a tellus sodales, laoreet leo in, egestas ipsum. Donec iaculis, leo nec sagittis consectetur, massa augue elementum nibh, in blandit lacus arcu et eros. Vivamus
                posuere vitae ante eget egestas. Donec id neque lectus. Nunc venenatis vitae neque nec tristique. Nam vitae nisi velit. Nullam consectetur justo eget tortor facilisis porta.</p>
            </div>
          </div>
          <div class="dp-img">
            <img class="img-fluid" src="https://iceiceicy.com/causeeffect/wp-content/uploads/2018/12/fsbolt.png">
          </div>
        </div>

        <div class="dp_item" data-class="3" data-position="3">
          <div class="dp-img">
            <img class="img-fluid" src="https://iceiceicy.com/causeeffect/wp-content/uploads/2018/12/joey-yap-1.png">
          </div>
          <div class="dp-content text-right">
            <h3>lorem ipsum 3</h3>
            <div class="scroll-box">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas elit felis, condimentum in nunc ut, ultricies accumsan metus. Maecenas non dignissim ipsum. Aliquam auctor urna arcu, non eleifend massa euismod eget. Etiam fringilla ut ex
                eget maximus. Suspendisse viverra commodo magna, quis elementum sem feugiat ac. Vestibulum dolor ligula, luctus ac quam quis, laoreet varius orci. Aliquam vitae libero at neque ornare dignissim a ac tellus. Etiam pretium risus blandit
                egestas pretium. Vivamus vestibulum fermentum orci elementum feugiat. Integer a tellus sodales, laoreet leo in, egestas ipsum. Donec iaculis, leo nec sagittis consectetur, massa augue elementum nibh, in blandit lacus arcu et eros. Vivamus
                posuere vitae ante eget egestas. Donec id neque lectus. Nunc venenatis vitae neque nec tristique. Nam vitae nisi velit. Nullam consectetur justo eget tortor facilisis porta.</p>
            </div>
          </div>
        </div>

        <span id="dp-next">
					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
						<defs>
							<style>
							.cls-1 {
								fill: none;
								stroke: #fa8c8c;
								stroke-miterlimit: 10;
								stroke-width: 7px;
							}
						</style>
					</defs>
					<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
				</svg>
			</span>

        <span id="dp-prev">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
					<defs>
						<style>
						.cls-1 {
							fill: none;
							stroke: #fa8c8c;
							stroke-miterlimit: 10;
							stroke-width: 7px;
						}
					</style>
				</defs>
				<path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)"/>
			</svg>
		</span>

        <ul id="dp-dots">
          <li data-class="1" class="active"></li>
          <li data-class="2"></li>
          <li data-class="3"></li>
          <li data-class="4"></li>
        </ul>
      </div>
    </div>
  </div>

最佳答案

模糊文本是 Chrome 的问题 - 可以通过以下方式解决:

#the_element_with_blurry_text {
  -webkit-filter: blur(0.000001px);
}

另一个解决方案可以打开平滑的字体渲染:

#the_element_with_blurry_text {
  -webkit-font-smoothing: antialiased;
}

关于jquery - 我的 Stack Slider 文本变得模糊，导航也没有循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53820287/

上一篇：html - 框阴影插图和边框 :none cause form fields to flicker in IE/Edge

下一篇：css - 使用 Button React 更改 .scss

相关文章：

html - Android:如何使用 Html.TagHandler？

php - 网页样式更改后不起作用

ios - 添加 CSS 图像 - Phonegap

javascript - 将每个可被 5 和前 4 整除的 child 包装在一个 div 中

javascript - 查询 :contains() does not select the text if it is surrounded by tags

javascript - 如何正确呈现 AJAX POST MVC 4 的返回

CSS3 : Jagged borders not displaying correctly in Firefox

php - 如何将谷歌自动完成整个 div 移动到另一个 div

html - CSS 属性过滤器 : invert(80%) not working with IE

javascript - JQuery 用户界面 : How to define sortable td tags of a Table?

©2024 IT工具网  联系我们