- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我们正在使用 slick carousel这样我们就有了<div class='item__wrapper'>
一次只显示一张幻灯片。下面是三个items
单击 item
的位置,光滑的旋转木马应该更新。
问题
item__boxes
时作为slick
旋转木马,我们所有的样式都乱七八糟,所以我们不能做$('.item__boxes).slick({});
item
在 item__boxes
, item__wrapper
始终设置为 slide 3
问题
item__boxes
这样就可以点击那个 item
它符合我们的目标吗?例如,点击第二个 item
在 item__boxes
设置 item__wrapper
到第二张幻灯片。目标/预期结果:
item
, 将第一张幻灯片设置为 item__wrapper
中的事件幻灯片item
, 将第二张幻灯片设置为 item__wrapper
中的事件幻灯片item
, 将第三张幻灯片设置为 item__wrapper
中的事件幻灯片1-3
不做$('.item__boxes).slick({});
代码:
$('.item__wrapper').slick({
infinite: true,
speed: 1500,
dots: false,
prevArrow: false,
nextArrow: false
});
$('.item__boxes').on('click', function() {
var slickIndex = $(this).attr('data-slick-index');
$('.item__wrapper').slick('slickGoTo', slickIndex);
});
.filter {
width: 100%;
height: 100%;
padding: 45px;
margin-right: -45px;
}
.item {
display: none;
position: relative;
}
.item.active {
display: block;
}
.item1 {
background-image: url("https://placeimg.com/1000/480/nature");
}
.item2 {
background-image: url("https://placeimg.com/640/480/arch");
}
.item3 {
background-image: url("https://placeimg.com/640/480/tech");
}
.item__wrapper {
max-width: 60%;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(238, 238, 238, 0.5);
}
.item__img img {
top: 0px;
position: absolute;
width: 100% !important;
opacity: 0.5;
}
.item__text {
top: 0px;
position: relative;
min-height: 100%;
line-height: 1.4;
padding-right: 70px;
z-index: 5;
display: flex;
flex-direction: column;
align-items: top;
justify-content: center;
}
.item__boxes {
display: flex;
position: relative;
opacity: 0.9;
}
.item__boxes > div {
border: 1px solid;
}
.col-padding {
padding: 16px 16px 5px 16px;
}
.col-m-12 {
width: 100%;
}
@media (min-width: 1024px) {
.col-t-6 {
width: 50%;
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="item__wrapper">
<div class="item active" id='item1'>
<div class="item__text">
<div class="filter">
<h3>Some title 1</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
<div class="item active" id="item2" >
<div class="item__text">
<div class="filter">
<h3>Some title 2</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
<div class="item active" id="item3" >
<div class="item__text">
<div class="filter">
<h3>Some title 3</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
</div>
<div class="item__boxes">
<div class="box col-m-12 col-t-6 col-padding" data-slick-index="-1">
<div>Some Title</div>
<div>Enthusiastically incubate diverse initiatives without multifunctional strategic theme areas.</div>
</div>
<div class="box col-m-12 col-t-6 col-padding" data-slick-index="0">
<div>Globally Title</div>
<div>Globally impact integrated infomediaries via seamless mindshare. </div>
</div>
<div class="box col-m-12 col-t-6 col-padding" data-slick-index="1">
<div>Distinctively Title</div>
<div>Distinctively strategize long-term high-impact ideas whereas client-centered leadership skills.</div>
</div>
</div>
最佳答案
试试这个。
$('.item__wrapper').slick({
infinite: true,
speed: 1500,
dots: false,
prevArrow: false,
nextArrow: false
});
$('[data-slide]').click(function(e){
var slideno = $(this).data('slide');
$('.item__wrapper').slick('slickGoTo', slideno);
});
.filter {
width: 100%;
height: 100%;
padding: 45px;
margin-right: -45px;
}
.item {
display: none;
position: relative;
}
.item.active {
display: block;
}
.item1 {
background-image: url("https://placeimg.com/1000/480/nature");
}
.item2 {
background-image: url("https://placeimg.com/640/480/arch");
}
.item3 {
background-image: url("https://placeimg.com/640/480/tech");
}
.item__wrapper {
max-width: 60%;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-color: rgba(238, 238, 238, 0.5);
}
.item__img img {
top: 0px;
position: absolute;
width: 100% !important;
opacity: 0.5;
}
.item__text {
top: 0px;
position: relative;
min-height: 100%;
line-height: 1.4;
padding-right: 70px;
z-index: 5;
display: flex;
flex-direction: column;
align-items: top;
justify-content: center;
}
.item__boxes {
display: flex;
position: relative;
opacity: 0.9;
}
.item__boxes > div {
border: 1px solid;
}
.col-padding {
padding: 16px 16px 5px 16px;
}
.col-m-12 {
width: 100%;
}
@media (min-width: 1024px) {
.col-t-6 {
width: 50%;
}
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="item__wrapper">
<div class="item active" id='item1'>
<div class="item__text">
<div class="filter">
<h3>Some title 1</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
<div class="item" id="item2" >
<div class="item__text">
<div class="filter">
<h3>Some title 2</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
<div class="item" id="item3" >
<div class="item__text">
<div class="filter">
<h3>Some title 3</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
</div>
</div>
<div class="item__boxes">
<div class="box col-m-12 col-t-6 col-padding" data-slide="0">
<div>Some Title</div>
<div>Enthusiastically incubate diverse initiatives without multifunctional strategic theme areas.</div>
</div>
<div class="box col-m-12 col-t-6 col-padding" data-slide="1">
<div>Globally Title</div>
<div>Globally impact integrated infomediaries via seamless mindshare. </div>
</div>
<div class="box col-m-12 col-t-6 col-padding" data-slide="2">
<div>Distinctively Title</div>
<div>Distinctively strategize long-term high-impact ideas whereas client-centered leadership skills.</div>
</div>
</div>
关于javascript - 使用 div 更改 Active Slick Carousel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53772406/
我对 Android 很陌生,如果问题重复,请避免并发送链接。有三个 Activity A、B 和 C。 Activity A 获取一个用户名,我想在 Activity C 中显示该用户名,但我想先运
我正在尝试制作记事本应用程序,因此每次打开新笔记时,布局都会相同。另外, Activity 的数量(新注释)不应定义得尽可能多 最佳答案 如果 Activity 始终相同,您可能应该创建一个适配器,允
我有 3 个 Activity 。 主窗口 5 个按钮 在按钮的主窗口中按下此窗口打开(将其称为父窗口) 在父窗口按钮上按下此窗口打开调用它作为结束子窗口。 现在从子窗口我从父窗口获取值如下:
我遇到了一个 Activity backstack 问题。假设我的后台有 5 个 Activity :比如 Activity A、 Activity B、 Activity C、 Activity D
我正在寻找必须具有以下附加特征的 JMS 提供程序: 采用多代理,所有代理都必须处于事件状态(无单点故障) 仅在两台机器上进行扩展就足以满足我们的需求 能够保证订购(如果 1 个生产者 + 1 个消费
假设,我有一个由 TabHost 组成的选项卡 Activity 。 TabHost 包含 2 个选项卡,每两个选项卡都有一个 Activity 组。每个 Activity 组包含一项 Activit
我正在开发一个应用程序,我需要根据某些操作导航到特定 Activity 。这是一张图片 我的第一个 Activity 是 ReadingActivity。基于某些操作,用户将被带到 NewProjec
我创建了一个与服务器异步通信的应用程序。当应用程序发出服务器请求时,将创建一个带有“正在加载”通知的新对话框( Activity )。主要 Activity 实现了处理服务器响应的方法,我想在主要 A
我想在我的所有应用程序 Activity 中显示相同的选项菜单。我创建了一个实现菜单的通用 Activity ,并且我所有的进一步 Activity 都扩展了它。 问题:当我需要扩展其他特定 Acti
我有四个 Activity ,即 java 文件 - Activity1.java、activity2.java、activity3.java、activity4.java 和 xml 文件 - Ac
我有两个 Activity 。我想将数据从第二个 Activity 发送到上一个 Activity 。第一个 Activity 有自定义 ListView 和 bean 类。当我点击第二个 Activ
根 Activity 是堆栈中当前的第一个 Activity 还是 list 中指定为启动 Activity 的 Activity ? 支持应用程序 P 在启动时启动 Activity A。然后 A
你好 我想知道您在绘制 Activity 图选择“Activity ”时考虑了哪些关键点? 您如何从要建模的问题中选择 Activity ? 谢谢 最佳答案 Activity 图用于对正在开发的系统和
如何从主 Activity 启动 Activity 并在子 Activity 返回主 Activity 中退出操作后返回主 Activity ? 我已将子 Activity 作为启动器 Intent
我的工作流程如下: 登录 Activity -> ActivityB -> ActivityC -> ActivityD 我想将数据从LoginActivity传递到ActivityD,但不直接传递到
我之前曾尝试获得此问题的答案,但找不到可以解决我的问题的答案。我正在制作保存圆盘高尔夫球分数的应用程序。我的 MainActivity 有 4 个按钮。新比赛、恢复比赛、类(class)和球员。 At
我有一个 tts 非 UI 类和 Activity 类。现在在 Activity 类中,我有一个按钮,用户可以从中选择男声或女声,具体取决于我想要将字符串传递给 tts 类的选择,然后一次tts 类根
问题有点复杂,首先, Activity A 和 Activity B 的 list 中都有 android:noHistory = true 。我有一个自定义 serialized 类,假设 MyCl
在我的应用程序中,我有两个 Activity (AuthenticationActivity 和 MainActivity),每个 Activity 都有一个导航图和大量 fragment 。我创建了
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: How can i use compose email activity in tabView? 我想在选项
我是一名优秀的程序员,十分优秀!