jquery - 我的堆栈滑块文本变得模糊，导航也没有循环

问题描述

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

经过一些 HTML 和 CSS 更改后，似乎一切正常，除了：

文字变得模糊
导航不像 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>

标签： jqueryhtmlcss

jquery - 我的堆栈滑块文本变得模糊，导航也没有循环

问题描述

解决方案

推荐阅读