个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
我使用允许我拥有轮播的灵活框架。
问题是在我的旋转木马的第二页上有一个开始的 css 效果。 (下面的代码)
问题是当站点打开时 css 效果开始。所以当我滚动
轮播效果已经“过去”了。我希望效果在点击两者之一后开始
箭头(右和左)。
通过url导入slick framework，看到按钮代码打开了
其中一个 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>最佳答案
将 myeffect2 类或任何您不想运行的动画类的范围限定在 slick-active 类中，除非幻灯片处于事件状态。
Slick 将“slick-active”类添加到 View 中的幻灯片。
.slick-active .myeffect2 {
width:90%;
background:#000000;
-moz-animation:myeffect 8s ease-out;
-webkit-animation:myeffect 8s ease-out;
}
关于javascript - Slick - 代码执行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48604044/
31
4
0
这是非常非常令人沮丧的。一段时间以来，我一直在尝试使用 Slick，但障碍不断涌现。 Slick 的概念真的很棒，但是很难学，而且不像Scala，它没有“初学者”、“中级”和“高级”风格，各个阶段的人
我在 Event 上定义了一个可选的外键，它转到 EventType。我想查询所有事件，即使是那些具有 None (null) 事件类型的事件。这是在 Event 上定义的外键。 def eventT
Another question通过在“一”案例类 (Directorate) 中定义一个返回“多”类的 Seq 的方法来回答如何定义一对多关联(服务区)。但它没有解决问题的“双向”部分。 使用该示例
我有一个向表中添加日期列的要求，默认值是由 oracle 的 sysdate 设置的，如下所示 例子{...CREATED_ON DATE 默认系统日期 我想使用 slick table ddl 创建
当我设置 speed: 1000 , pauseOnHover工作正常，但一旦我将其设置为 speed: 10000 , pauseOnHover不能立即工作 - 它在几秒钟后工作。 代码: $('#
我正在 try catch Slick 3.x 中的 SQL 错误。下面的代码不打印任何内容，但如果在调试下跟踪，它工作正常(它打印失败)。这段代码有什么问题？ object TestSlick ex
我正在 try catch Slick 3.x 中的 SQL 错误。下面的代码不打印任何内容，但如果在调试下跟踪，它工作正常(它打印失败)。这段代码有什么问题？ object TestSlick ex
我一直在使用 Slick's insertOrUpdate since its release in 2.1版本没有任何问题。 现在我正在尝试提高我的代码性能，而 insertOrUpdate 是瓶颈
我有一个列类型为日期的表。此列接受空值，因此，我将其声明为一个选项(请参阅下面的字段 perDate)。问题显然是从/到 java.time.LocalDate 的隐式转换/java.sql.Date
我试图在拖动幻灯片时向 a 标签添加“slick active”类。该类在单击时应用，但无法弄清楚如何将其应用到其他类! 如果能帮助破译我的代码，我们将不胜感激! JS $(document).rea
我有透明背景的 slider ，我想在悬停中心 div 时为 slider 背景制作动画，但在 slider 移动后，悬停效果会卡在所有以前具有“光滑中心”类的幻灯片上。任何建议如何解决它？ Sp 到
我使用 Slick 3.1 代码生成器来创建默认对象和特征 Tables.scala 下面的方法有效，但我想隐式或显式地将 UserRow 和 PasswordsRow 转换为 User 和 User
我正在使用 Slick Slider 和 Slider Syncing 选项。是否可以滚动“缩略图”(示例中为 .slider-nav)而不更改主图像(示例中为 .slider-for)？ 我只想在您
似乎 vue-slick 还没有提供任何事件(afterChange、beforeChange、Swipe...)。就像 jQuery 版本一样。 我应该使用 MutationObserver 来监听
问题 我正在 WordPress 网站上设置一个灵活的 slider /轮播。一切工作/显示都很完美，但是 slider 已停止正确拖动。 我仍然可以用鼠标物理拖动 slider ，它会按应有的方式进
我正在尝试使用 slick 库实现 slider 同步。我有一组来自后端的名为 pictures 的图像。我遍历这些图像，将它们填充到我的 slider-for 和 slider-nav div 下。
不知何故，我无法正确使用 slick carousel ( http://kenwheeler.github.io/slick/ )。 我收到以下错误: Uncaught TypeError: $(.
我正在使用 AOS 在滚动条上显示 html 元素。它单独运行良好，但当我在包含 Slick slider 的页面上使用它时，应用 AOS 的元素不显示。元素被隐藏，如果有很多滚动，看起来浏览器向 A
我正在使用 AOS 在滚动条上显示 html 元素。它单独运行良好，但当我在包含 Slick slider 的页面上使用它时，应用 AOS 的元素不显示。元素被隐藏，如果有很多滚动，看起来浏览器向 A
在我测试slick.js 前端 slider 插件时，我发现在Chrome 浏览器中，有时导航点在class ".slick-dots li button:before" 突然变了 来自 内容:'•'
我是一名优秀的程序员,十分优秀！