Flickity -多个转盘的问题
Flickity是一个流行的多个转盘（carousel）解决方案，用于在网页上创建可滑动的图片或内容展示。它是一个基于JavaScript的库，提供了丰富的功能和灵活的配置选项。
Flickity的主要特点包括：
- 多样化的转盘布局：Flickity支持多种转盘布局，包括垂直、水平、网格等，可以根据需求选择最适合的布局形式。
- 平滑的滑动效果：Flickity提供了平滑的滑动效果，用户可以通过滑动手势或点击按钮来浏览转盘中的内容。
- 自适应布局：Flickity可以根据设备的屏幕大小和方向自动调整布局，确保在不同设备上都能有良好的展示效果。
- 丰富的定制选项：Flickity提供了丰富的定制选项，可以自定义转盘的外观、动画效果、自动播放等，以满足不同项目的需求。
- 轻量级和高性能：Flickity是一个轻量级的库，加载速度快，同时具有良好的性能，可以处理大量的图片或内容。
Flickity适用于各种场景，包括但不限于：
- 图片展示：可以用于创建图片幻灯片展示，如产品展示、相册展示等。
- 内容导航：可以用于创建内容导航栏，如新闻头条、产品特点等。
- 广告轮播：可以用于创建广告轮播，如网站首页的广告横幅。
- 产品推荐：可以用于展示产品推荐，如电商网站的热门商品推荐。
腾讯云提供了一款类似的产品，即腾讯云轮播（Tencent Carousel），它是基于Flickity开发的一款云端多个转盘解决方案。腾讯云轮播提供了与Flickity类似的功能和特点，并且与腾讯云的其他产品和服务有良好的集成性。您可以通过访问腾讯云轮播的官方网页（https://cloud.tencent.com/product/carousel）了解更多详细信息和使用指南。
相关·内容
1回答
我正在尝试使用angular中的多项转盘/内容滑块。我对flickity carousel有意见。旋转木马中的项目垂直对齐，而不是水平对齐。codepen.io上提供的其他轮播也存在此问题。请帮帮忙。
旋转木马是这样显示的：
我需要这样做：
浏览 1提问于2019-03-11得票数 0
1回答
我在同一页上有两个旋转木马。通过阅读多个问题(https://github.com/metafizzy/flickity/issues/206)和文档(https://flickity.metafizzy.co/options.html#carousel-cell2)，我能够让其中一个转盘完美地运行。 完美的代码看起来像这样：https://imgur.com/a/dUPCz1z和它的JQuery： $('.main-carousel').flickity({
// options
contain: true,
initialIndex: 0,
image
浏览 8提问于2019-09-04得票数 1
2回答
我目前正在使用Flickity库在我的wordpress站点上显示corousel。
问题:当第一次加载站点produkte时，许多图像并没有完全加载，而是只加载了第一厘米。
我很高兴得到关于这个问题的任何提示。
Kind谈Lukas
浏览 2提问于2017-10-24得票数 0
1回答
我有一个使用创建的视频转盘，见。我想要发生的是，当用户滑动旋转木马时，选定的幻灯片停止播放，然后位于选定中间位置的幻灯片开始播放。现在，使用jQuery，我让选定的幻灯片开始播放：
$(document).ready(function () {
var $partnerSlides = $('.partner-slides').flickity();
function onLoadeddata(event) {
var cell = $partnerSlides.flickity('getParentCell'
浏览 11提问于2016-08-10得票数 0
回答已采纳
1回答
我正在为名为的幻灯片使用这个库，它需要使用它的css文件flickity.min.css。在我的项目中，我使用postCSS，当将这个flickity.min.css包含到我的组件flickity.min.css中时，如下所示：
@import ./lib/flickity.min
它的类以以下方式前缀：MyComponent__flickity-class_35aw问题是flickity创建新的dom元素并依赖于它的类，所以在检查器中，它的类将是.flickity-class，因此没有对其应用样式，我试图找出如何正确地包含它。
使用react + webpack设置
浏览 3提问于2016-05-10得票数 2
回答已采纳
我有一个索引页，我通过ajax将不同的单页加载到索引页布局中。每一页都有一个闪烁滑块，我可以单独控制(上一页/下一页)所有的滑块，但我对标题有一个问题。我只能从一个滑块获得标题信息，并打印到每个幻灯片上，但我如何才能为每个滑块获得正确的标题？
我有这个来获取标题
var $gallery = $('.gallery').flickity({
cellSelector: '.gallery-cell',
imagesLoaded: true,
percentPosition: false,
wrapAround: true,
pageDots: false,
la
浏览 2提问于2015-08-20得票数 0
1回答
我将我当前的网站转换为nuxtjs和vuejs页面。使用nuxt，我想做服务器端渲染。所以最后是一个静态的html页面。我的vue组件中的import语句有问题。因此，现在我将针对ssr优化我的导入。我目前的解决方案如下所示： let Flickity = {};
if (process.browser) {
Flickity = require('flickity');
} 在一个组件中，我使用了flickity滑块以及flickity-sync和flickity-fade插件。通常我只会添加导入状态，如下所示： let Flickity = {};
if
浏览 40提问于2020-04-03得票数 0
1回答
我使用npm：npm i flickity安装Flickity。Flickity版本为2.2.0
然后我像这样调用和使用：
import Flickity from 'flickity'
const flickity = new Flickity(el, options)
console.log(flickity)
我检查过Flickity函数，发现通过webpack构建后缩小了，似乎对flickity对象返回了不同的结果。因此，它会导致flickity对象上的操作/方法表现不同。请看下面的截图，以获得更好的说明：
开发环境：
通过webpack缩小：
有没
浏览 2提问于2019-12-11得票数 3
我正在尝试在Nuxt应用程序中实现一个carousel。这是我的package.json
"dependencies": {
"@nuxtjs/i18n": "^7.0.3",
"core-js": "^3.15.1",
"flickity": "^2.2.2",
"lodash": "^4.17.21",
"nuxt": "^2.15.7",
"postcss-
浏览 12提问于2021-10-14得票数 1
我正在使用创建一个滑块，其中包含图像，视频和youtube嵌入(使用Wordpress高级自定义字段)。
我希望在flickity-event (下一张幻灯片)上暂停播放视频。
我的代码可以使用视频嵌入，但我似乎无法暂停YouTube播放器。
在iFrames中的滑块中有多个YouTube幻灯片，高级自定义字段不允许我给出类名。
简化的HTML结构：
<div class="carousel">
<img src="image" />
<div class="video"><video
浏览 0提问于2019-04-09得票数 0
我使用flickity作为指令，但是在控制台中得到了这个错误警告，有人知道如何解决这个问题吗？
这是当前的包包
<script src="https://unpkg.com/flickity-as-nav-for@3/as-nav-for.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<link rel="stylesheet" hre
浏览 10提问于2022-10-28得票数 0
我正在尝试将我自己的自定义按钮链接到nuxt应用程序中的flickity carousel。我的父组件将属性direction的默认值设置为left。
<CarouselBase class="w-screen carousel" :direction="direction">
<items/>
</CarouselBase>
data() {
return {
direction: 'left',
},
这是我的carousel组件的代码。
<template>
浏览 11提问于2021-10-15得票数 2
我试图让 (CodePen)在VueJS组件中工作。
HTML
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<d
浏览 0提问于2019-02-01得票数 2
回答已采纳
我是React的新手，所以不要评判我)
我有一个从react-flickity-component得到的滑块，
现在我需要做一些条件，
如果我布尔属性是正确的关闭滑块，
我知道如何用javascript制作它，但还没有想过如何销毁它，
所以我有了一个想法，那就是更改标签名称。
所以我有：
class FlickitySlider extends React.Component {
...
render() {
...
return (
<Flickity options={flickityOptions}>
...content
浏览 8提问于2020-02-05得票数 0
回答已采纳
我已经创建了一个用于Vue 3和TypeScript支持的自定义Flickity.vue对象，遵循接受的答案here。 但是，当我尝试侦听flickity carousel上的事件时，我被控制台中的运行时类型错误所困扰：this$refs.flickity.on is not a function 是什么原因导致我当前的方法中断？ DisplayPage.vue <template>
<div class="row">
<div class="col d-block m-auto">
&l
浏览 67提问于2021-07-03得票数 0
回答已采纳
1回答
我一直在使用向滑块添加lazyloading功能，现在也想使用。通常，我会直接从库(而不是从Flickity库)导入Flickity，如下所示：
import Flickity from 'flickity-bg-lazyload'
const flkty = new Flickity('.element', {
"prevNextButtons": false,
"adaptiveHeight": true
})
我现在的问题是，我必须对asNavFor做同样的事情。目前，它似乎正在使用添加为额外库的asNav
浏览 1提问于2021-01-11得票数 0
回答已采纳
我正在使用flickity carousel，我想在一些自定义div中扭曲next和prev按钮。
默认情况下，flickity以动态方式创建按钮，作为.main-carousel div/section的直接子项。
这是我在运行flickity js时得到的代码：
<section class="main-carousel>
<div class="flickity-viewport">...</div>
<button class="flickity-button flickity-prev-next-b
浏览 19提问于2019-07-18得票数 0
我正在跟踪这个闪烁的幻灯片淡出文档
这是cdn包
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/flickity-fade@2/flickity-fade.css">
这里是旋转木马html和脚本设置。
<div class="testimonial-carousel&
浏览 2提问于2022-04-25得票数 2
回答已采纳
我正在使用。
这是我的HTML：
<section class="controls-inside controls-light p-0" data-flickity='{ "imagesLoaded": true, "wrapAround": true }'>
它在第一次加载时运行良好，这将创建以下HTML：
<section class="controls-inside controls-light p-0 flickity-enabled is-draggable" data-flickity
浏览 1提问于2020-04-29得票数 3
回答已采纳
1回答
我在试着设置Flickity旋转木马。它在工作，但我的图像不能在较小的屏幕上重新调整大小。只是被切断了。
我试着让图像100%宽。在HTML和CSS中。这使得图像完全消失了。我尝试在HTML端插入图像，也尝试将其作为CSS的背景。没有什么能改变这一点。我遗漏了什么？任何帮助都非常感谢。
这是我更新的HTML代码。包括我头上的闪动链接。
<head>
<link rel="stylesheet" href="flickity-docs/flickity.min.css" media="screen">
浏览 0提问于2019-08-24得票数 3
Rails6、Webpacker和
快速演示应用：
尝试1:纯jQuery
TypeError: $(...).flickity is not a function
app/javascript/packs/application.js
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("flickity")
import "
浏览 22提问于2020-02-11得票数 1
回答已采纳
1回答
我一直在我的Vue 3应用程序中使用Flickity，当我使用带有静态单元格的硬编码HTML旋转木马时，它工作得很好。但是，我需要在运行时以编程方式添加单元格，并且无法使Flickity正确工作。
我正在尝试遵循append()的示例，但我得到了错误：
Flickity的flickity.js?1385:72坏元素：.carousel
我的巡查员在运行时。我试图遵循解决方案和，但都没有成功运行。看起来这是由于Flickity上的TypeScript错误造成的。我还安装了@types/flickity，fyi。
我能做些什么来修复下面的append逻辑？
<template>
浏览 8提问于2021-06-29得票数 1
回答已采纳
我正在尝试在我的应用程序中添加一个Flickity旋转木马。在尽我最大的能力跟踪npm上的之后，我得到了这个错误：
./~/flickity-fix/js/flickity.js模块未找到:无法解析‘/Users/./node_node/flickity-fix/js’中的“classie/classie 1/分类”
我补充说：
module: {
loaders: [
{
test: /flickity/,
loader: 'imports?define=>false&this=>window'
浏览 0提问于2017-08-25得票数 1
我想要插入新的传送带到我的网页动态，我增加了一个减少的测试用例，我试图做什么。唯一真正不同的是新的旋转木马是如何添加的，我的测试用例--它只是一个附加的字符串。但是在我的项目中，它将是一个ajax请求。
无论如何，你可以看到，我正在销毁所有的旋转木马点击，然后，一旦我添加了新的旋转木马，我尝试初始化新的以及旧的。
问题是，新的没有生效。但旧的还能用。
有什么想法吗?让新的也开始工作？
测试用例：
// external js: flickity.pkgd.js
var $carousel = $('.carousel').flickity();
$(document)
浏览 2提问于2020-05-19得票数 0
我使用的是，无法找到解决此错误的方法：
Vue警告:nextTick中的错误："TypeError: TypeError不是构造函数“
找到位置
-> at src/components/Meetups.vue at src/App.vue vue.esm.js?efeb:1841 TypeError: VueComponent.eval (Meetups.vue?41ab:1113) at Array.eval (vue.esm.js?efeb:1938) at flushCallbacks (vue.esm.js?efeb:1857)不是构造函数
下面是相关代码：
&
浏览 2提问于2019-04-29得票数 0
我有一个Nuxt项目，直到今天还很顺利。
在这个项目中，我使用Vue Flickity，它包括到node_modules中的Flickity文件的链接。到目前为止，它一直运作良好，似乎是问题的根源。
当我运行npm run dev时，会得到以下错误：
./node_modules/flickity/dist/flickity.css?vue&type=style&index=0&lang=css&友好中的错误-错误16:00:12
语法错误: ModuleBuildError:模块构建失败(来自./node_ SyntaxError /postcss-加载程序
浏览 0提问于2019-01-29得票数 0
回答已采纳
我正在尝试创建一个在编辑器中具有反应闪烁组件的滑块。
所以我的问题是古腾堡有InnerBlocks组件，我想用Flickity来锁定它的内容。
看起来是这样的：
<Flickity options={flickityOptions}>
<InnerBlocks />
</Flickity>
其中<InnerBlocks />是一个Gutenberg组件，它包含在其中，例如：
<img src="..."/>
<img src="..."/>
<img src="...
浏览 0提问于2020-02-05得票数 2
我正在尝试将我自己的自定义按钮连接到nuxt应用程序中的flickity carousel。在我的carousel组件中，我有以下代码 <template>
<ClientOnly>
<Flickity
ref="flickity"
:key="keyIncrementer"
class="carousel"
:class="{ 'carousel--active': ac
浏览 14提问于2021-10-15得票数 2
1回答
因此，我试图在我的角度应用程序中加入旋转木马。我认为从技术上讲，它应该工作得很好，阻止它以应有的方式工作的问题是，来自flickity.css的css似乎没有加载。我希望有人能知道为什么会这样。
我通过运行flickity将npm install flickity添加到应用程序中。
此后，在我的component中，我将flickity添加如下：
import * as flickity from 'flickity';
接下来，我初始化了所有的东西：
ngOnInit() {
window.addEventListener("DOMContentLoa
浏览 3提问于2020-02-05得票数 1
回答已采纳
测试用例：
我正在使用这种笔，并且在编辑flickity-viewport时遇到了问题。
我正在尝试将视口的高度设置为
在我的style.css上
.flickity-viewport{
height:678px; <!--But this doesn't been recognize-->
}
在我的flickity.min.css
.flickity-viewport{
overflow: hidden;
position: relative;
height: 635px
}
但是当我尝试在我的style.css上编辑时，它不能工作
我不知道那个style
浏览 0提问于2017-09-19得票数 1
1回答
捕获子组件发出的操作
、、、
我试图对一个子组件发出的动作作出反应。子程序发出一个名为init的事件/触发器/操作。我试图在我的父组件events映射中注册该事件。但是回调从不触发，这使我认为我错误地注册了发出的操作。
我如何对孩子发出的事件/触发/行动作出反应？
<template>
<flickity v-if="caseStudies && caseStudies.length > 0" id="case--studies_slider"ref="flickity" :options="flickityOption
浏览 3提问于2018-04-26得票数 0
回答已采纳
1回答
我试图添加到我的Wordpress主题。我昨天很成功。然而，当我今天早上回到我的主题时，旋转木马文件没有加载。我不知道哪里出了问题，或者我是不是漏掉了什么。我也在使用先进的自定义字段和速轮将真正喜欢一套新鲜的眼睛。
这里是我排列文件的位置
function flickity_scripts() {
wp_enqueue_script( 'flickityjs', get_template_directory_uri() . '/js/flickity.pkgd.min.js', array( 'jquery' ), '1.9.0'
浏览 0提问于2019-02-21得票数 0
1回答
非常简单的问题，我认为它可能与这个有关，但在Vue中，而不是角。CSS样式，我试图应用到我的Flickity旋转木马没有渲染我的Vue 3应用程序。在IDE中，样式是灰色的，但是当我通过检查在浏览器中编辑它们(例如，改变旋转木马-单元格宽度)时，它工作得很好。
我是否遗漏了CSS导入以使CSS文件在浏览器中正确地更改呈现的布局的外观？
<template>
<div class="col d-block m-auto">
<flickity ref="flickity" :options="flicki
浏览 6提问于2021-07-01得票数 0
回答已采纳
Flickity具有事件绑定。是否有下一张或上一张幻灯片被移动到的事件？例如，是在幻灯片结束后触发的。这确实做了我需要做的，但这里的问题是，如果Flickity设置在同一张幻灯片上，这也会发生，如果你刷得不够，Flickity就会回到原来的位置。似乎也在做同样的事情。
在我看来，这样的事情或许解释了我想要实现的目标：
$carousel.on( 'nextSlideReached', function() {
console.log( 'Flickity has settled on the next slide' );
});
浏览 5提问于2016-04-27得票数 2
回答已采纳
我已经阅读了关于堆栈溢出(其中有很多)这个主题的所有其他文章。但据我所知，它们都提供了相同的潜在修复，例如用if(process.client)包装代码，或者用<client-only>标记包装组件，以及在nuxt.config.js文件中的插件中添加mode:"client"或添加client后缀。不幸的是，这些解决方案对我都没有用。包文件(flickity.js)似乎仍在服务器端运行，导致错误。我尝试用require替换导入，并将其包装在if (process.client)条件中，但这也不起作用。如果不包括import Flickity from 'f
浏览 11提问于2021-01-21得票数 0
回答已采纳
我正在构建一个react应用程序，并且在我的HomePage上，我有一个组件'CategoriesList‘。
当我在HomePage上时，“类别列表”工作得很好，但是当我使用router导航到ProductDetails页面时，发现了以下错误：
"NotFoundError:在‘node’上执行'removeChild‘失败:要删除的节点不是该节点的子节点。“
'CategoriesList‘使用Flickty。我试着移除Flickity然后..。效果很好。但我需要使用Flickity.
有谁可以帮我？
CategoryList组件：
const Cate
浏览 2提问于2020-04-05得票数 5
我在<script>的开头声明了一个变量，使其类型为any，稍后我在同一个<script>中的一个方法中引用了它。我的集成开发环境没有任何错误，但令人惊讶的是，我在控制台中看到了一个运行时错误：ReferenceError: flik is not defined。 也许这与Vue生命周期中变量实例化的竞争条件有关？这是令人困惑的，因为我在其他地方使用类似的模式时没有这个问题。下面的代码有什么问题？ <script lang="ts">
import Flickity from "./widgets/Flickity.vue"
浏览 42提问于2021-06-30得票数 0
回答已采纳
我正在使用Wordpress和ACF灵活的布局来创建Flickity图像库。
我有两个问题：
如何计算画廊中的幻灯片数量。(如果有超过2张幻灯片，我只想运行Flickity )
如何在同一个帖子上运行多个图库。(每个类名相同)
我想使用nuSkool香草JS选项。见docs：
PHP
<div class="gallery-slider flickity">
<?php $i = 0; if(get_sub_field('gallery')): while(has_sub_field('gallery')):
浏览 5提问于2017-01-25得票数 1
回答已采纳
我有一个来自Flickity的旋转木马，我试图隐藏左右箭头和分页。
JQuery码
$('.carousel').each(function() {
if ($(this).find('div.carousel-cell').length === 1)
$(this).find('button.flickity-prev-next-button previous, button.flickity-prev-next-button next, button.flickity-page-dots').hide();
});
旋转木马代码
<
浏览 0提问于2018-06-19得票数 1
回答已采纳
2回答
我正在尝试向angular2添加第三方库，即Flickity滑块。
试图安装打字机。当导入它们时，我会得到错误的@typings/flickity is not a module。
第二次尝试在angular-cli.json中添加它。如文档中所述，在apps[0].scripts中添加。在组件中，我像这样使用了它：
this.slider =新的Flickity(‘. new包装器’，{ cellAlign：‘左’，包含: true，prevNextButtons: false，pageDots: true })；
在编译时，我会得到一个错误的Cannot find name 'Fl
浏览 2提问于2016-10-31得票数 1
回答已采纳
1回答
我遇到了一个使用名为的javascript插件的问题，它支持触摸友好的幻灯片图像。
我将其初始化如下：
import Flickity from 'flickity';
componentWillUnmount() {
this.flkty.destroy()
}
componentDidMount() {
this.flkty = new Flickity(this.refs.carousel, {
cellAlign: 'left',
})
}
这一切都很好，但问题是它在我的呈现中以<div ref=
浏览 3提问于2016-02-18得票数 0
回答已采纳
我找到了一个基于Flickity的旋转木马，你可以在这里查看：
感谢atelierbram
现在，我想用JS生成包含图像的，并编写了以下代码：
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<link rel
浏览 11提问于2021-11-01得票数 0
我正在尝试metafizzy的flickity。工作得很好，但在更新页面后，新加载的图库将不起作用。如何在ajax加载后重新初始化flickity？我使用js-flickity类来初始化脚本。
<div class="gallery js-flickity">
...
</div>
浏览 8提问于2015-07-01得票数 6
我试图在flickity的活动实例中以iframe为目标，因为在一个页面上可能有几个flickity实例(最终目标是刷新幻灯片中的iframe，用户一旦选择了另一个幻灯片就可以查看该幻灯片)。
我把它用于单个幻灯片，但是当页面上有多个幻灯片时，我会遇到问题，因为它会刷新以前选择的所有iframes，而不仅仅是活动幻灯片中的那个。
下面是我的脚本，其中".slideshow“是一个flickity实例，我希望能够在一个页面上有多个实例。这个问题与目标正确的'previousVideoContainer‘有关，后者的父母刚刚触发了"settle.flickity“事件。有什
浏览 3提问于2017-02-15得票数 0
回答已采纳
1回答
如何结束单元格直到右箭头
、、、
我使用的是flickity滑块。我显示每个单元格26%，它开始像下面的图像，这是正确的我。 ? 它的结尾如下图所示。 ? 但我想这样结束我的牢房。有可能吗？ ? $('.carousel').flickity({
freeScroll: true,
prevNextButtons: true,
pageDots: false,
draggable: false
}); * {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.carousel {
bac
浏览 11提问于2020-08-12得票数 0
我在我的Vue应用中使用了MetaFizzy's Flickity的vue-flickity包。当从具有vue-flickity滑块实例的路线导航离开时，您会看到一个简短的一览表，其中显示文档中所有未设置样式的幻灯片，因为<Flickity />滑块已卸载(？)视图也会发生变化。 我尝试过将其包装在<keep-alive>中，但无济于事。 在用户离开某个路线之前，隐藏或“动画显示”组件的最佳方法是什么？ 我还尝试使用beforeRouteLeave()，将<Flickity ref="mySlider" />上的opacity转换为
浏览 26提问于2019-09-28得票数 1
回答已采纳
1回答
我有一个页面上的多个Flickity对象的问题。我可以很容易地用幻灯片生成Flickity，但接下来的幻灯片就有问题了。 下面是代码:我试图将flickity放在一个引导选项卡面板中(4个面板，每个面板都有自己的Flickity)。 var featuredFlkty = new Flickity('.carousel-featured', {
cellAlign: 'left',
contain: true,
draggable: true,
groupCells: 1,
pageDots: false,
lazyLoad: tr
浏览 12提问于2019-03-11得票数 1
我正在做一个项目，不管出于什么原因，我在Flickity幻灯片中的图像只有在浏览器稍微调整大小时才会加载。这是我的网站:/
在Flickity中，我已经将大小调整为true，所以我不确定这里的问题是什么。任何帮助都将不胜感激。
谢谢!
编辑:问题解决了！
浏览 0提问于2018-01-26得票数 5
回答已采纳
2回答
我正在使用Flickity gallery，我希望它循环一次，然后停止自动播放。3是画廊中的最后一项，所以这就是当画廊在这里时我尝试调用它的原因。
提前感谢！到目前为止，我的代码如下：
var flkty = Flickity.data( $('.gallery')[0] )
$(".gallery").on( 'settle', function() {
if(flkty.selectedIndex === 3){
$('.gallery').flickity({
浏览 0提问于2016-03-10得票数 1
我用做旋转木马。有一个<flickity />组件(旋转木马)、一个带有数据{{ selectedIndex }}的<p>标记和一个从flickity获取当前幻灯片号并更新selectedIndex的按钮。
当用户向左或向右滚动(即称为方法)时，如何使用当前幻灯片索引自动更新？我很难“勾引”模块的那些方法。
我可以定义一个方法Next()并将其绑定到一个按钮，但是当用户滚动时它不会更新。
编辑：--我已经设法连接到on.change (使用mounted)。console.log现在向我展示了正确的selectedInde，但这并不是说“您在幻灯片编号{ selecte
浏览 7提问于2021-09-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
