Slick - 代码执行

Question

我使用允许我拥有轮播的灵活框架。

问题是在我的旋转木马的第二页上有一个 css 效果开始。（下面的代码）

问题是 css 效果在站点打开时开始。所以当我滚动

轮播效果已经"past"。我希望效果在点击两者之一后开始

箭头（左右）。

我通过url导入了slick framework，看到按钮代码是on

url 之一，所以我自己修改了代码中的按钮 (javascript)。

这样做之后没有任何反应。

没看懂！

期待您解答我的两个问题

亲切

/*(function() {

  var slideContainer = $('.slide-container');

  slideContainer.slick({

//id added to execute the function below
//https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js
//In this url you can see that prevArrow and nextArrow are the buttons

  prevArrow: '<button id="prev" type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>',
  nextArrow: '<button id="nex" type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>',
});

$("#prev, #nex").click(function() {
  $(".expand").addClass("myeffect2");
});

*/
$(".slide-container").slick({

});

body {
  background-color: black;
  color: #9E9E9E;
}

.slide-container {
  margin: auto;
  width: 600px;
  text-align: center;
}

.wrapper {
  padding-top: 100px;
  padding-bottom: 40px;
}
.wrapper:focus {
  outline: 0;
}

.card {
  background: white;
  width: 300px;
  display: inline-block;
  margin: auto;
  border-radius: 19px;
  position: relative;
  text-align: center;
  -webkit-box-shadow: -1px 15px 30px -12px black;
          box-shadow: -1px 15px 30px -12px black;
}

/***** Effect *****/

.expand-bg {
  background: none repeat scroll 0 0 #e6e6e6;
  border-radius:16px;
  height: 16px;
  margin-bottom: 5px;
}
.expand {
  border-radius: 13px;
  height: 12px;
  margin: 2px;
  position: absolute;
}

.myeffect2 {
  width:90%;
  background:#000000;
  -moz-animation:myeffect 8s ease-out;
  -webkit-animation:myeffect 8s ease-out;
}

@-moz-keyframes myeffect2 {
0% {
width:0px;
}
100% {
width:90%;
}
}
@-webkit-keyframes myeffect {
0% {
width:0px;
}
100% {
width:90%;
}
}

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <title>Test</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css'>
  <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css'>
  <link rel="stylesheet" href="css/style.css">

</head>

<body>

  <div class="slide-container">

    <!--page1-->

    <div class="wrapper">
      <div class="card profile">
         <div class="card__level card__level--profile">
            <p>My name</p>
         </div>
      </div>
    </div>

    <!--end page1-->

    <!--page2-->

    <div class="wrapper">
      <div class="card skills">
        <div class="card__unit-name"</div>
        </br>
          <h3>My effect</h3>
          <div class="expand-bg"> <div class="expand myeffect2">  </div> </div>
      </div>
    </div>

    <!--end page2-->


  </div>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
  <script  src="js/index.js"></script>

</body>
</html>

Answer 1

将 myeffect2 class 或任何 class 与您不想要的动画运行联系起来，除非幻灯片对 slick-active class 有效.

Slick 将 "slick-active" class 添加到视图中的幻灯片。

.slick-active .myeffect2 {
    width:90%;
    background:#000000;
    -moz-animation:myeffect 8s ease-out;
    -webkit-animation:myeffect 8s ease-out;
}

Slick - 代码执行

Slick - Code execution

html

javascript

css

jquery

slick.js