单击此carousel项内的div时检索owl-carousel项索引
是指在一个carousel（走马灯）组件中，当用户单击carousel内的某个div元素时，需要检索该div元素所在的carousel项的索引。
carousel是一种常见的前端组件，用于展示多个内容项，并通过滑动或点击等操作切换展示的内容。owl-carousel是一种流行的carousel插件，提供了丰富的功能和样式定制选项。
在实现单击div时检索索引的功能时，可以通过以下步骤来完成：
- 给每个carousel项的div元素绑定一个点击事件的监听器。
- 在点击事件的处理函数中，获取当前被点击的div元素。
- 遍历carousel的所有项，找到与被点击的div元素相匹配的项，并获取其索引。
- 根据需要进行进一步的处理或操作，例如根据索引切换到对应的carousel项。
这个功能在实际开发中常用于处理carousel内部的交互操作，例如点击某个内容项后展示详细信息、执行相关操作等。
腾讯云提供了多个与carousel相关的产品和服务，例如：
- 腾讯云移动推送服务（https://cloud.tencent.com/product/tpns）：用于在移动应用中实现消息推送功能，可以结合carousel组件实现推送消息的展示和点击处理。
- 腾讯云云函数（https://cloud.tencent.com/product/scf）：提供了无服务器的计算能力，可以用于处理carousel内部的点击事件，实现自定义的逻辑处理。
- 腾讯云物联网平台（https://cloud.tencent.com/product/iotexplorer）：用于连接和管理物联网设备，可以结合carousel组件实现对物联网设备的控制和监控。
以上只是一些示例，具体的选择和推荐需要根据实际需求和场景来确定。
相关·内容
3回答
我目前正在开发中使用Owl Carousel 2.0.0-beta.2.4来保持旋转木马的中心，并循环项目，这很好用。
由于某些原因，Owl在设置loop: true时生成的克隆项似乎不会在单击时触发。您将在下面的示例中看到，当触发时，每个其他项都会向单击发出警报，但如果该项已被克隆，则似乎不会注册单击事件。
HTML：
<div id="multiple-carousel" class="carousel-style owl-carousel">
<div class="item">
<i
浏览 0提问于2015-07-31得票数 2
回答已采纳
1回答
我使用Owl 2，我的HTML代码如下所示。每个图像将有一个小的"x“图标在右上角，当点击我希望从旋转木马图像被删除。
当第一次单击时，它运行良好，因为传递给"remove_image“函数的索引是正确的。但是在第二次点击另一个图像时，索引将不再正确。
例如:第一次点击image2.jpg，传递给"remove_image“的索引是1，这是正确的。图像正确地从猫头鹰旋转木马2移除。
第二次点击image4.jpg，传递给"remove_image“的索引是3。这个索引是错误的。这是因为猫头鹰旋转木马2已经更新后，image2被删除。现在，image4.jpg的正
浏览 2提问于2020-06-21得票数 0
回答已采纳
1回答
当我在loop选项设置为true的情况下创建carousel时，单击与之关联的标签无法切换复选框。
下面是两种情况下的示例：
let $carousel = $('.owl-carousel');
$carousel.owlCarousel({
items: 1,
loop: true,
});
document
.querySelector('#btnReloadWithoutLoop')
.addEventListener('click', function() {
$carousel.data('ow
浏览 0提问于2019-01-29得票数 0
我有一项任务要编写slider，其中包含有关上一次和下一次滑块的信息。
例如，在滑块中，您已经离开了<，而右>箭头在该箭头的后面有一个circle.When，您可以将其悬停到任意箭头，下一步更改，或者prev滑块，您可以在这个圆圈中看到相应的信息文本(、prev或next)，这是从的数据属性中得到的。
我意识到除了从数据属性中获取关于prev或next图像的信息之外的其他一切。
请帮帮我。
$(function () {
var $owl = $('.owl-carousel'),
isDragged = false;
$owl.owlC
浏览 2提问于2018-07-07得票数 1
回答已采纳
1回答
我正在尝试为第一项和最后一项添加一个非活动类。
我的HTML代码：
<div id="owl-nav">
<div class="owl-carousel">
<div class="item">text</div>
</div>
</div>
谢谢你的帮助。
浏览 0提问于2016-01-16得票数 0
3回答
我正在开发一个网站，在其中我希望将next和以前的按钮放在上，这样用户就可以轻松地浏览图像。
我在carousel类中使用的php代码是：
<div class="text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->media))
{
fo
浏览 2提问于2018-08-04得票数 0
回答已采纳
完整代码在这里：
我这样定义了一个标准的owl-carousel幻灯片：
<div class="owl-carousel owl-theme">
<div class="item"><h4 id="test">1</h4></div>
<div class="item"><h4>2</h4></div>
</div>
js：
$('.owl-carousel').owlCarou
浏览 0提问于2020-12-04得票数 0
我正在尝试添加自定义类“大，中，中”到3个不同的owl项目。但这只有在自动播放时才起作用。当您第一次看到它时，它不起作用。如何在页面加载时运行此代码？
$('#MySlider .owl-carousel').on('translate.owl.carousel', function(e){
idx = e.item.index;
$('#MySlider .owl-carousel').find('.owl-item.big').removeClass('big');
$('#M
浏览 24提问于2019-11-15得票数 2
回答已采纳
1回答
我在我的angular 7项目中使用了owl-carousel模块。如何从内部组件使用此模块？
在app.module.ts文件中：
import { SharedModule } from './shared/shared.module';
import { OwlModule } from 'ngx-owl-carousel';
imports: [
...
OwlModule,
SharedModule ]
在我的shared.module.ts文件中：
import { BannerCarouselComponent } from
浏览 0提问于2018-12-18得票数 0
1回答
我的想法是用猫头鹰旋转木马做一个菜单。我已经将Owl Carousel代码等放到了我的所有文件夹中，并且LazyLoad函数当前正在我的页面上运行。但是，我不知道如何创建它，以便当单击其中一个图像(carousel)时，它会跳转到我想要连接到该图像(Carousel)的html页面。下面是我的一些代码：
<section id="demos">
<div class="row">
<div class="large-12 columns">
<div class="owl-ca
浏览 4提问于2017-01-24得票数 1
我又问了一个很有趣的问题。比方说，我有以下几点：
<div decorator="carousel">
{{ # filteredUsers }} // computed value from users array and a filter input
<div class="item">{{ name }}</div>
{{ / }}
</div>
使用作为装饰器，如下所示：
decorators: {
carousel: function( node )
{
浏览 3提问于2016-01-25得票数 0
回答已采纳
4回答
我有一个简单的猫头鹰旋转木马，
HTML：
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="i
浏览 3提问于2015-04-20得票数 11
回答已采纳
我在用猫头鹰旋转木马2。我的页面上有几个按钮。当单击其中一个按钮时，将有一个AJAX调用。从这个ajax调用中得到一个图像id。我将该图像id与owl旋转木马中的图像id进行比较，然后跳到匹配的幻灯片。
但是，无论我尝试什么，索引号都返回0。所以猫头鹰总是跳到第一张图片。我试过几件事，但我就是不能让它起作用。
用按钮我的列表
<div class="spo-list">
<div class="spo-item" data-image="47059110">Dunkelrot</div>
<div
浏览 0提问于2019-05-25得票数 1
回答已采纳
1回答
我在代码中添加了猫头鹰-旋转木马，我为一个横幅类型的旋转木马编写了代码，但是图像显示的是另一个下面的一个。
这是我的HTML代码：
<!--Owl Carousel-->
<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.theme.css">
<
浏览 0提问于2020-12-15得票数 0
我有一个动态添加项目的owl carousel，每个项目都包含一个remove按钮。
当我点击这个按钮时，我想要获取父carousel项的itemindex来调用我的carousel的remove事件。
如何检索此索引？
我真的需要我的按钮的父项的项目索引，因为许多转盘项目一次显示，而我不想要‘当前项目索引’
我尝试过的：
//retrieve parent item of clicked button
var owlitem = $(this).parents('.owl-item');
var index = $('.owl-carousel').data
浏览 10提问于2019-08-17得票数 0
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Owl Carousel 2 Navigation on Sides - Left and Right</title>
<style>
.main-content {
position: relative;
}
.main-content .owl-theme .custom-nav {
posi
浏览 1提问于2021-01-05得票数 0
回答已采纳
2回答
因此，当我将owl-carousel类添加到包含项目的div中时，它们就消失了！ 这就是我在head标签中添加owl-carousel样式表和脚本的方式： <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="./css/main.css">
<script src="h
浏览 24提问于2020-11-20得票数 0
我是angular2的新手，现在我正在尝试使用猫头鹰旋转木马
我找到了这个教程，但它给了我很多错误，我可以找出问题所在，也有人能解释again.thanks吗？
这是我的密码
Home组件html
<owl-carousel [options]="{navigation: false, pagination: true, rewindNav : false}">
<div *ngFor="let img of images">
<img src="http://lorempixel.com/400/200/
浏览 5提问于2017-03-15得票数 0
2回答
我有猫头鹰旋转木马这样的装置
<div class="owl-carousel">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div&
浏览 7提问于2015-06-22得票数 0
回答已采纳
1回答
我看到这个问题已经被问到了，但是解决方案对我来说就是不起作用。我的系统中有以下项目： <div class="owl-carousel">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<div class="blog-carousel owl-carousel">
浏览 10提问于2020-04-30得票数 0
5回答
多响应猫头鹰旋转木马
、、、、
我需要在某些页面中创建多个响应性的owl旋转木马，我需要使用数据属性。我像这样工作，但我不能回应我的旋转木马，
jQuery
var $carousel = $('.data-carousel[data-carousel]');
if ($carousel.length) {
$carousel.each(function() {
$(this).owlCarousel($(this).data('carousel'));
});
}
<div class="owl-carousel data-carousel&#
浏览 1提问于2017-09-25得票数 1
3回答
css: owl.carousel.min.css
.owl-carousel,
.owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative
}
.owl-carousel {
display: none;
width: 100%;
z-index: 1
}
.owl-carousel .owl-stage {
position: relative;
-ms-touch-action: pan-Y;
-moz-ba
浏览 2提问于2019-10-03得票数 0
如何从owl旋转木马库中删除项目？
下面是我的html标记：
<div class="owl-carousel owl-theme">
<img src="/assets/storage/gallery/1.jpg"></div>
<img src="/assets/storage/gallery/2.jpg"></div>
<img src="/assets/storage/gallery/3.jpg"></div>
浏览 7提问于2016-09-17得票数 3
回答已采纳
我在这里遗漏了一些非常基本的东西。我正在根据docs设置nav和navText选项，我可以在DevTools中看到按钮内容正在更改，但它们一直处于禁用和隐藏状态。我遗漏了什么？我使用的是v2.3.4。浏览了大量问题，但找不到任何类似的问题 <div class="owl-carousel quote-carousel">
<div class="quote-item" style="background-image: url('/images/landing/profile.png')">
浏览 48提问于2020-12-24得票数 0
回答已采纳
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
items: 1
})
});
<div class="owl-carousel">
<div class="item"><h4>1</h4></div>
</div>
<link href="http://www.owlc
浏览 9提问于2015-05-26得票数 6
3回答
Owl轮播无延迟自动播放
、、、
$(document).ready(function (){
$('.owl-carousel').owlCarousel({
items:5,
center:true,
autoplay:true,
autoPlayTimeout:1000,
autoplaySpeed:3000,
autoHeight:true,
autoplayHoverPause:false,
浏览 54提问于2021-01-04得票数 2
回答已采纳
1回答
因此，我创建了一个图像转盘，然后为其缩略图创建了另一个转盘，因为缩略图与转盘中的图像不同。现在我的问题是，当试图通过单击缩略图来更改图像时。
对于缩略图函数，我使用这个插件：
下面是我的设置：
<div class="owl-carousel main-carousel" data-slider-id="1">
<div>Your Content</div>
<div>Your Content</div>
<div>Your Content</div>
浏览 20提问于2017-12-22得票数 0
当鼠标进入owl时，我一直试图将光标更改为图像，但失败了，可能是因为我不擅长javascript/jQuery，所以我尝试了CSS，尝试为.owl-carousel类更改光标，然后尝试更改.owl-stage-outer、.owl-stage & .owl-item，但没有工作，然后我用另一个div包装了整个旋转木马，并试图在悬停时更改它的游标，但这也不起作用。
我尝试过CSS cursor: url(https://i.imgur.com/ZUjicmP.png), auto;，但没有工作，搜索不仅在堆栈溢出，而且在任何可能的地方从谷歌搜索。
我附上了我在下面的片段中尝试过的内容，请
浏览 3提问于2020-11-05得票数 0
回答已采纳
我尝试使用owl carousel制作多张幻灯片，通过在ul中单击li，在每个选项卡菜单中工作。
这是我的HTML
<ul class="artwork">
<li class="on">Pattern</li>
<li>Colours</li>
<li>Characters</li>
<li>Photography</li>
<li>Drwaings</li
浏览 43提问于2021-05-13得票数 0
2回答
如何通过单击.在owl滑块中显示我自己的活动类。我的活动类增加了，但是滑块没有移动到第6个孩子。为什么会这样呢？
<div class="all_series">
<div class="owl-carousel">
<div class="item"> slider1 </div>
<div class="item"> slider2 </div>
浏览 1提问于2018-04-03得票数 0
回答已采纳
2回答
你能告诉我如何使角js变脏吗？.I需要在js中使用owl旋转木马插件，就像我在jqm小提琴中做的那样，.I需要在角度上使用指令，您能告诉我如何使用指令来实现这个功能吗？
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/b
浏览 3提问于2014-09-05得票数 2
回答已采纳
1回答
我有一个过渡问题时，滑动我的旋转木马使用prev按钮之间的幻灯片1和4。
继续单击prev，您就会看到问题所在。
我感觉到数据散列属性是造成这个问题的原因。
HTML
<div class="owl-carousel owl-theme">
<div class="item" data-hash="1">1</div>
<div class="item" data-hash="2">2</div>
<div class="ite
浏览 6提问于2016-09-02得票数 1
1回答
我使用owl旋转木马2.0作为全屏滑块。这里的例子：
除了一个细节之外，它运行得很好:如果用户调整屏幕大小使屏幕变大，那么下一张幻灯片/图像的一部分就会显示几秒钟：
有什么办法能修好它吗？例如，这个滑块：不会出现这个问题，但是在这种情况下，我需要使用owl旋转木马。
这是我的标记：
<div class="owl-carousel-container">
<div class="owl-carousel">
<div>
<div class="img-container&
浏览 2提问于2015-10-16得票数 4
回答已采纳
1回答
我使用的是猫头鹰旋转木马，箭头和圆点在相同的高度位置。我希望箭头放在中间，点放在底部(就像现在)，但当我设计箭头到中间的样式时，点就会跟着……
希望有人能帮我解决这个问题。
////////////////////////////////////////////////////////////////////详细信息
$("#carousel-slider").owlCarousel({
navigation : true,
slideSpeed : 500,
paginationSpeed : 800,
rewin
浏览 5提问于2018-01-05得票数 1
在我单击div之前，jquery carousel不起作用。
我在我的html页面中添加了两个owl carousel。当我有一个转盘时，它工作得很好，但当添加另一个具有不同ID的转盘时，它不能工作，直到我在具有转盘的div中执行单击。
我在我的html页面中添加了两个owl carousel。当我有一个转盘时，它工作得很好，但当添加另一个具有不同ID的转盘时，它不能工作，直到我在具有转盘的div中执行单击。
<script>
$(document).ready(function() {
var owl = $('.owl-carousel
浏览 0提问于2018-05-17得票数 1
2回答
我在我的页面中使用了Owl carousel 2，并且我希望有如下的舞台填充选项：
这是我的HTML：
<div class="owl-carousel">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
浏览 0提问于2015-11-30得票数 1
1回答
我们在加载后进行了检查，数据准确无误。我们可以在开发模式(F12)中检查对象的信息(ImgURL、文本等)。但它并没有表达出来。
下面是模板代码和脚本代码。谢谢。
<template>
<div class="home-slider-container" v-if="hasResult">
<div class="home-slider owl-carousel">
<div class="home-slide" v-for="(ba
浏览 0提问于2019-07-11得票数 0
1回答
我想生成带有owl图像的旋转木马
、、、、
我想在猫头鹰的旋转木马上隐藏一个div。请帮帮我。我正在调用来自owl carousel的所有css文件。下面是我调用的css文件
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/owl-carousel/owl.carousel.css">
/owl-carousel/owl.heme.css“>/owl-carousel/owl.Transition.css”>
下面是我的调用JS文件
<script src="
浏览 1提问于2015-05-11得票数 2
当我点击这个图像的时候，我想移动一个图像在中心。下面是我尝试过的代码，它工作得很完美，但是根据要求，当我点击那个image.Can时，我必须移动中心的图像。
使用owl旋转木马版本2.1.1和CSS3 Flexbox，只需添加以下样式：
.owl-carousel .owl-stage {
display: flex;
align-items: center;
}
$( document ).ready( function() {
$( '.owl-carousel' ).owlCarousel({
autoplay: true,
marg
浏览 1提问于2020-04-20得票数 1
回答已采纳
4回答
我正在尝试添加一个照片转盘到我的项目中，但是Owl carousel不会显示我的图像(src绝对正确)，它显示了整个容器的底部和前一个/下一个按钮的导航点，但没有我的图像。
将非常感谢您的帮助！
html：
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="plugins/owl-carousel/assets/owl.ca
浏览 2提问于2018-05-08得票数 0
2回答
-当旋转木马移动时，上一张幻灯片和下一张幻灯片是可见的。
$(".owl-carousel").owlCarousel({
loop: true,
autoplay: true,
items: 1,
nav: true,
autoplayHoverPause: true,
animateOut: 'slideOutUp',
animateIn: 'slideInUp'
});
.owl-carousel {
max-width: 320px;
}
.owl-carousel .owl-nav {
padd
浏览 12提问于2016-09-03得票数 2
回答已采纳
1回答
我需要像下面的代码一样，在单击事件中初始化owl旋转木马，它在第一次单击时工作，但当我再次单击它(在事件div上)时，它根本不工作。我怎样才能做到这一点？有办法重置猫头鹰旋转木马吗？
为了更好地理解我的pb并对其进行测试，我在这篇文章的最后部分添加了我的完整代码。
你能帮我一下吗？我真的需要这个。
提前谢谢，
CAFC
源owl旋转木马：
$('#XX').click(function(e) {
e.PreventDefault;
$("#owl-demo").owlCarousel({
jsonPath: 'json
浏览 2提问于2014-08-06得票数 1
回答已采纳
1回答
我正在使用owl-carousel，并试图用owl-wrapper-outer替换owl-stage-outer类。不幸的是，我在文档中找不到任何允许我这样做的选项。下面是我对旋转木马的初始化：
$("#owl-featured").owlCarousel({
nav: true,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle
浏览 8提问于2017-08-03得票数 0
回答已采纳
1回答
我有一个旋转木马，由Owl carousel v2提供支持，并启用了延迟加载：
JS：
$('.owl-carousel').owlCarousel({
lazyLoad: true
});
HTML：
<div class="owl-carousel">
<div>
<img class="owl-lazy" data-src="...">
</div>
</div>
这样就能正常工作。然后，我尝试将相同的代码应用于我拥有的HTML5视频标签：
<
浏览 0提问于2017-05-08得票数 0
2回答
我试着用流星1.0测试猫头鹰-旋转木马。基本上，我试图转换列表作为猫头鹰旋转木马的领导板的例子。但当我实现时，它显示了旋转木马，但有时没有显示旋转木马。我的意思是相同的代码不能保证相同的结果。但是，如果它显示为旋转木马，则不会发生player元素上的单击事件。如何使用领导板示例正确显示player元素上的单击事件旋转木马？
以下是我所做的事：
我用陨石板的例子创建了应用程序。
meteor create --example leaderboard
加上猫头鹰-旋转木马。
mrt add owl-carousel
我试着把列表变成猫头鹰旋转木马。我刚刚将标签OL更改为DIV，LI更改为DIV，如
浏览 2提问于2014-12-15得票数 1
回答已采纳
6回答
我的猫头鹰旋转木马包含不同宽度和高度的图片。我如何在中间对齐-水平和垂直对齐？
$("#owl-example").owlCarousel({
navigation: true
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/aj
浏览 4提问于2016-08-26得票数 29
回答已采纳
我是新来的。我有2页，在第一页有主要类别的图标列表正在显示。我想显示它的子类别图标在下一页根据选定的主要类别。例子:如果我点击食物，然后在下一个page=>食品的子类别图标应该显示，同样的沙龙，水疗，等等。下面我是附加我的代码。请建议我能做些什么来实现这一点。
dashboard.component.html
<div class="productBlock">
<div class="container" style="text-align:-webkit-center">
浏览 2提问于2020-05-05得票数 1
回答已采纳
1回答
是否有一个选项，只滚动一个猫头鹰-旋转木马滑块上的鼠标轮？当我点击prev或下一个btn时，它只是幻灯片，只有当前的旋转木马，但在鼠标滑轮上所有的！
<div class="owl-carousel">
<div class="item">
item
</div>
<div class="item">
item
</div>
<div class="item">
item
</di
浏览 3提问于2016-06-29得票数 0
回答已采纳
我使用OwlCarousel 2.3.4，并想使用slideBy选项来滑动项目2，但这个未来只适用于圆点或导航，而不是滑动或鼠标拖动。我试图实现的是，当你触摸或拖动时，将旋转木马滑动2个项目，但它只有在你点击箭头或点时才起作用。我该怎么做呢？
$(".owl-carousel").owlCarousel({
loop: true,
nav: true,
touchDrag: true,
mouseDrag: true,
items: 2,
slideBy: 2,
margin: 10
});
.owl-carousel .owl-nav butt
浏览 0提问于2019-01-12得票数 0
3回答
我在菜单上用猫头鹰旋转木马。当我滚动到div时，猫头鹰旋转木马自动滑到右边的幻灯片。现在，当我到达特定的div时，我将类添加到幻灯片( active )中，但由于某种原因，我无法从其他幻灯片(他的兄弟姐妹)中删除active类。
我想最好是检查一下琴弦来了解问题.
<div class="body">
<div class="menu">
<ul class="owl-carousel owl-theme">
<a href="#a" data-num="0
浏览 0提问于2018-07-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
