My Stack Slider text becomes blurry and also the navigation is not looping

Question

I'm using this plugin for the stack slider. https://github.com/dpesofficial/stack-slider

After some HTML and CSS changes, it seems like all working fine except:

The text become blurry
The navigation is not in loop like what the github demo shows and at the end of the navigation, the slider not in full scale

Have you guys any idea why it happens and what is the solution?

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>

score 0 · Answer 1 · answered Dec 17 '18 at 20:10

0

The blurry text are a Chrome problem - can be fixed with this:

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

An Other solution can be turning smooth font rendering on:

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

answered Dec 17 '18 at 20:10

lol25500

92
8

I edited my code snippet with your answers. Still the same though. But yeah you are correct, I checked on Firefox and the texts are not blurry. – iceiceicy Dec 17 '18 at 22:14
Maybe you can find a fix here: https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry :-) – lol25500 Dec 17 '18 at 23:18

My Stack Slider text becomes blurry and also the navigation is not looping

1 Answers1