Question

我使用光滑的框架，让我有一个旋转木马。

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

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

时

caroussel效果已经“过去”。我希望在点击其中一个

之后开始效果

箭头（左右）。

我通过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类或具有您不想运行的动画的任何类，除非幻灯片对光滑活动类有效。

Slick将“光滑活跃”类添加到视图中的幻灯片中。

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

光滑 - 代码执行

1 个答案: