没有任何垂直文本jQuery滑块

Question

请帮助我。这是一个文本滑块...垂直文本滑块。我应该使用哪个jQuery插件。活动项目应位于中间，非活动项目应保持透明。请帮助我。.

Answer 1

尝试在没有插件的情况下

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(1px);
  width: 100px;

}
.active {
font-size:25px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div><i class="fa fa-chevron-circle-up" style="font-size:30px;color:#f79007"></i></div><br/>
<div class="pagination">
  <div class="blur">CRITIC</div>  
  <div class="blur">BUILDER</div>
  <div class="active">ENTWICKLER</div>
  <div class="blur">SUPPORTER</div>
  <div class="blur">COMMENTATOR</div>
</div>
<br/>
<div><i class="fa fa-chevron-circle-down" style="font-size:30px;color:#f79007"></i></div>

users

Answer 2

这是使用 slick 的另一种解决方案，请查看下面的实时示例：

// Get titles from the DOM
var titleMain = $("#slick-wrapper");

if (titleMain.length) {

  titleMain.slick({
    autoplay: false,
    arrows: false,
    dots: false,
    slidesToShow: 3,
    centerPadding: "10px",
    draggable: false,
    infinite: true,
    pauseOnHover: false,
    swipe: false,
    touchMove: false,
    vertical: true,
    speed: 1000,
    autoplaySpeed: 2000,
    useTransform: true,
    cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
    adaptiveHeight: true,
    arrows: true,
    prevArrow: '<i class="fa fa-chevron-circle-up" style="font-size:30px;color:#f79007"></i>',
    nextArrow: '<i class="fa fa-chevron-circle-down" style="font-size:30px;color:#f79007"></i>'
  });

  // On init
  $(".slick-item").each(function(index, el) {
    $("#animatedHeading").slick('slickAdd', "<div>" + el.innerHTML + "</div>");
  });

  // Manually refresh positioning of slick
  titleMain.slick('slickPlay');

};

/* $. Keyframes
\*----------------------------------------------------------------*/

@keyframes shrink {
  0% {
    color: #4B4B4B;
    transform: scale(2);
  }
  100% {
    transform: scale(1);
    color: grey;
  }
}

@keyframes grow {
  0% {
    transform: scale(1);
    color: grey;
  }
  100% {
    transform: scale(2);
    color: #4B4B4B;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}


/* $. Classes
\*----------------------------------------------------------------*/

.animate {
  transform: translate3d(0, 0, 0);
  perspective: 1000;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform-origin: center left;
}

.animate--shrink,
.pagination .slick-current>span {
  animation-duration: 1s;
  animation-name: shrink;
  animation-timing-function: "linear";
}

.animate--grow,
.no-js .pagination .slick-item:nth-child(2)>span,
.pagination .slick-current+.slick-slide>span {
  animation-duration: 1s;
  animation-timing-function: "linear";
  animation-name: grow;
}


/* Slider */

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  touch-callout: none;
  user-select: none;
  touch-action: pan-y;
  tap-highlight-color: transparent;
  padding-top: 40px;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}

[dir=rtl] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 0;
  outline: none;
}

.slick-vertical .slick-slide:focus,
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide::selection {
  outline: none !important;
  border: 0 !important;
  box-shadow: none;
}

.slick-arrow.slick-hidden {
  display: none;
}

.slick-current {
  position: relative;
}

.pagination .slick-slide {
  overflow: hidden;
  padding: 20px 0;
}

.pagination [aria-hidden] {
  transition: 1s;
}

.pagination .slick-current>span {
  box-sizing: border-box;
  display: block;
}

.no-js .pagination .slick-item:nth-child(2)>span {
  padding: 1em;
}

.pagination-item {
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: grey;
}

.container {
  margin: 0 auto;
  width: 500px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>

<div class="container">
  <div class="pagination" id="slick-wrapper">
    <div class="slick-item"><span class="pagination-item  |  animate">CRITIC</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">BUILDER</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">ENTWICKLER</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">SUPPORTER</span></div>
    <div class="slick-item"><span class="pagination-item  |  animate">COMMENTATOR</span></div>
  </div>
</div>