油滑 - 代码执行 [英] Slick - Code execution
本文介绍了油滑 - 代码执行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题是，在我的传送带的第二页上有一个CSS效果开始。 （代码如下）
问题是当网站被打开时，css效果开始。所以，当我滚动
时，效果已经过去了。我想要点击两个箭头之一（右和左）之后开始效果。
我通过url导入slick框架并看到按钮代码在
之一中，所以我修改自己的代码中的按钮（javascript）。
完成后没有任何反应。
我不明白！
期待您对我的两个问题给出回答。
亲切。
/ *（function（）{var slideContainer = $（'。slide-container'）; slideContainer.slick（{// id add to execute the function在下面// https：//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js//在这个url中，你可以看到prevArrow和nextArrow是按钮prevArrow：'< button id = prevtype =buttondata-role =noneclass =slick-prevaria-label =Previoustabindex =0role =button>上一个< / button>'，nextArrow：'< button id =nex buttondata-role =noneclass =slick-nextaria-label =Nexttabindex =0role =button> Next< / button>'，}）; $（＃ click（function（）{$（。expand）。addClass（myeffect2）;}）; * / $（。slide-container）。slick（{}）;
body {background-color：black; color：＃9E9E9E;}。slide-container {margin：auto;宽度：600px; text-align：center;}。wrapper {padding-top：100px; padding-bottom：40px;}。wrapper：focus {outline：0;}。card {background：white;宽度：300px;显示：inline-block;保证金：汽车; border-radius：19px;位置：相对; text-align：center; -webkit-box-shadow：-1px 15px 30px -12px black; box-shadow：-1px 15px 30px -12px black;} / *****效果***** /。expand-bg {background：none repeat scroll 0 0＃e6e6e6;边界半径：16px的; height：16px; margin-bottom：5px;}。expand {border-radius：13px;身高：12px; margin：2px; position：absolute;}。myeffect2 {width：90％;背景：＃000000; -moz-animation：myeffect 8s缓解; -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> <标题>试验< /标题> < link rel =stylesheethref =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 =stylesheethref =css / style.css>< / head>< body> < div class =slide-container> <！ - 第1页 - > < div class =wrapper> < div class =card profile> < div class =card__level card__level - profile> < p>我的名字< / p> < / DIV> < / DIV> < / DIV> <！ - end page1 - > <！ - 第2页 - > < div class =wrapper> < div class =card skills> < div class =card__unit-name< / div> < / BR> < h3>我的效果< / 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>< / script>< / body>< / html>< / code>< / pre> > 解决方案范围myeffect2类或任何带有动画的类，除非幻灯片处于活动状态，否则您不想运行
$ b Slick将slick-active类添加到视图中的幻灯片中。
.slick-active .myeffect2 {
width：90％;
背景：＃000000;
-moz-animation：myeffect 8s缓解;
-webkit-animation：myeffect 8s缓解;
}
I use the slick framework that allows me to have a carousel.
The problem is that on the second page of my carousel there is a css effect that starts. (code below)
The problem is that the css effect starts when the site is opened. So when I scroll the
caroussel the effect is already "past". I want the effect to start after clicking on one of the two
arrows (right and left).
I import the slick framework through url and saw that the button code is on
one of the url so I modify myself the button in my code (javascript).
After doing that nothing happens.
I do not understand !
Looking forward to an answer from you for my two problems.
Cordially.
/*(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>
解决方案 Scope the myeffect2 class or any class with an animation that you don't want to run unless the slide is active to the slick-active class.
Slick adds the "slick-active" class to slides that are in view.
.slick-active .myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}
这篇关于油滑 - 代码执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
