文章/答案/技术大牛

发布

社区首页 >问答首页 >Slick -代码执行

问Slick -代码执行
EN

Stack Overflow用户

提问于 2018-02-04 10:18:50

回答 1查看 104关注 0票数 0

我使用圆滑的框架，它允许我拥有一个旋转木马。

问题是，在我的carousel的第二个页面上，有一个css效果开始。(代码如下)

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

caroussel的效果已经“过去”了。我想要在点击两个中的一个后开始生效

箭头(右和左)。

我通过url导入了slick框架，并看到按钮代码是打开的。

其中一个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>

slick.js

javascript

jquery

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-04 10:25:39

限定myeffect2类或任何包含动画的类的范围，除非幻灯片对平滑活动的类处于活动状态，否则不希望运行这些动画。

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48604044

复制

相似问题

问Slick -代码执行
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Slick -代码执行EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Slick -代码执行
EN