我的Stack Slider文本变得模糊并且导航没有循环

时间：2018-12-17 17:30:37

标签： jquery html css

我正在将此插件用于堆栈滑块。 https://github.com/dpesofficial/stack-slider

在对HTML和CSS进行一些更改之后，除以下各项外，其他所有功能似乎都可以正常工作

  1. 文本变得模糊
  2. 导航不像github演示所示那样循环，在导航结束时，滑块未完全显示

你们是否知道它为什么会发生以及解决方案是什么？

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>

1 个答案:

答案 0 :(得分：0)

文字模糊是Chrome的问题-可以通过以下方法解决：

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

另一个解决方案可以启用平滑的字体渲染：

#the_element_with_blurry_text {
  -webkit-font-smoothing: antialiased;
}
相关问题
最新问题