切换选项卡时Flickity无法初始化
是因为在切换选项卡时，Flickity插件没有正确地初始化或者没有被销毁和重新初始化。Flickity是一个流行的响应式轮播插件，用于创建漂亮的滑动轮播效果。
要解决这个问题，可以采取以下步骤：
- 确保正确引入Flickity插件的相关文件，包括CSS和JavaScript文件。可以通过在HTML文件中添加链接或者使用npm安装来引入。
- 确保在切换选项卡时销毁和重新初始化Flickity插件。可以通过监听选项卡切换事件，在切换时调用Flickity的destroy()方法来销毁插件实例，然后再调用Flickity的初始化方法来重新初始化插件。
- 确保在初始化Flickity插件时，传入正确的选项和配置参数。可以根据需要设置轮播的方向、速度、自动播放等参数。
- 检查是否存在其他与Flickity插件冲突的JavaScript代码或者CSS样式。有时候其他插件或者自定义的样式可能会影响Flickity的正常初始化。
以下是一个示例代码，展示了如何在切换选项卡时正确初始化Flickity插件：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="path/to/flickity.css">
</head>
<body>
<div class="tabs">
<div class="tab" data-tab="1">Tab 1</div>
<div class="tab" data-tab="2">Tab 2</div>
<div class="tab" data-tab="3">Tab 3</div>
</div>
<div class="carousel">
<div class="carousel-cell">Slide 1</div>
<div class="carousel-cell">Slide 2</div>
<div class="carousel-cell">Slide 3</div>
</div>
<script src="path/to/flickity.pkgd.min.js"></script>
<script>
// 初始化Flickity插件
var carousel = new Flickity('.carousel', {
// 设置选项和配置参数
cellAlign: 'left',
contain: true,
wrapAround: true
});
// 监听选项卡切换事件
var tabs = document.querySelectorAll('.tab');
tabs.forEach(function(tab) {
tab.addEventListener('click', function() {
// 销毁和重新初始化Flickity插件
carousel.destroy();
carousel = new Flickity('.carousel', {
cellAlign: 'left',
contain: true,
wrapAround: true
});
});
});
</script>
</body>
</html>在上述示例中，我们使用了一个简单的选项卡和轮播的结构。通过监听选项卡的点击事件，我们在切换选项卡时销毁了原有的Flickity实例，并重新初始化了一个新的实例。
腾讯云提供了一系列云计算相关的产品，其中包括云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品进行部署和使用。更多关于腾讯云产品的信息可以在腾讯云官网上找到：腾讯云产品介绍。
相关·内容
1回答
我在多个vanilla js选项卡中安装了flickity，它在第一个选项卡中被正确初始化。加载第一个选项卡的内容时，第二个选项卡的内容未正确初始化。class="clear-float"></div>
<div id="tab-1" class="tab-page active-page"><div class="carousel&q
浏览 13提问于2019-07-29得票数 1
(其中有此代码)，它只会在顶部生成第一段代码(即未初始化的版本)。编辑1每件事或多或少都是完全固定的，但是每当我回到以前用Flickity加载的页面时，我仍然会看到一个双重加载。例如，考虑以下流程：
转到没有Flickity的Articl
浏览 1提问于2020-04-29得票数 3
回答已采纳
我在使用Flickity滑块时遇到了一个问题；问题是滑块恰好就在我想要的位置上……但是..。font-size:.8rem; margin-top:.5rem;
} 代码在CMS系统上，所以模块是从那里来的；此外，还有两个来自Flickity
浏览 67提问于2019-12-25得票数 1
2回答
angulars *ngFor一起使用，比如： <div *ngFor="let slide of slides;">slide </div>但是因为flickity将‘s添加到div flickity-viewport和flickity-slider中，并将幻灯片放进去，所以角不喜欢它。<div class="gallery">
<div
浏览 2提问于2018-01-25得票数 0
回答已采纳
这些包装器中的每一个我都设置为Flickity滑块，它们的子项是幻灯片。我通过执行以下操作对其进行了初始化：问题是Flickity现在还没有在网格中的新.c-v-wrapper元素上设置。
浏览 1提问于2020-04-05得票数 0
我正在做一个项目，不管出于什么原因，我在Flickity幻灯片中的图像只有在浏览器稍微调整大小时才会加载。这是我的网站:/谢谢!
编辑:问题解决了！
浏览 0提问于2018-01-26得票数 5
回答已采纳
1回答
我将其初始化如下： this.flkty.destroy() this.flkty = new Flickity(this.refs.carousel, { }
这一切都很好，但问题是它在我的呈现中以<div ref="carou
浏览 3提问于2016-02-18得票数 0
回答已采纳
1回答
我一直在我的Vue 3应用程序中使用Flickity，当我使用带有静态单元格的硬编码HTML旋转木马时，它工作得很好。但是，我需要在运行时以编程方式添加单元格，并且无法使Flickity正确工作。我正在尝试遵循append()的示例，但我得到了错误：
我的巡查员在运行时。看起来这是由于Flickity上的TypeScript错误造成的。我还安装了@types/f
浏览 8提问于2021-06-29得票数 1
回答已采纳
我有一些画廊与flickity库在一个简单的页面，当桌面上每个画廊有3张图片每3秒滑动一次，当分辨率设置为智能手机时，画廊的视窗应该切换到每个点1张图片。下面是html代码：
<div class="carousel flick" data-flickity='{ "cellAlign": "left", "contain": true, "groupCellstrue, "wrapAround": true, &q
浏览 2提问于2017-08-09得票数 0
2回答
<div class="gallery js-flickity"> <img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4
浏览 0提问于2015-08-09得票数 5
回答已采纳
2回答
我使用flickity插件在我的网站上进行幻灯片放映，我想显示图像上的点，以允许用户导航图像。即使有10个图像，也可以显示例如4个点。我并不总是知道图像的数量，所以我是否可以将点数限制为4，并在每次切换图像时进行更新？下面是我的一些代码：
$('[data-venue-id="' + venueId + '"]').find('.flickity-button-inset').each(function ()
浏览 28提问于2021-06-03得票数 0
问题：
接下来我做的是在Keycloak管理服务器上添加Okta作为Idp，当我在选项卡之间切换时，它会刷新Okta的重定向屏幕。这是因为当我切换选项卡时，我加载了一个不同的微UI应用程序，它在场景后面初始化key斗篷，->调用okta进行验证(即重定向闪存) ->页面加载。，所以无法工作。在我第一次登录后，当我切换选项卡时，我尝试用静默登录来执行“check”，但仍然看到Okta重定向
浏览 1提问于2021-07-27得票数 0
回答已采纳
1回答
我想要发生的是，当用户滑动旋转木马时，选定的幻灯片停止播放，然后位于选定中间位置的幻灯片开始播放。jQuery，我让选定的幻灯片开始播放： var $partnerSlides = $('.partner-slides').flickity();
var cell = $partnerSlides.flickity('getParent
浏览 11提问于2016-08-10得票数 0
回答已采纳
1回答
离子标签再注入元件
、、、
当前，当用户在选项卡之间切换时，选项卡<ion-tab [root]="SomeComponent"></ion-tab>中的组件只有在用户第一次切换到它时才被初始化。问题是:是否有可能破坏选项卡更改上的组件，然后在以后再次初始化它？
浏览 3提问于2019-02-20得票数 0
回答已采纳
2回答
我正在尝试向angular2添加第三方库，即Flickity滑块。this.slider =新的Flickity(‘. new包装器’，{ cellAlign：‘左’，包含: true，prevNextButtons: false，pageDots: true })；
在编译时，我会得到一个错误的Cannot find name 'Fl
浏览 2提问于2016-10-31得票数 1
回答已采纳
我在第二个选项卡上显示电子图表时遇到问题。该图表仅显示在第一个选项卡上，但在导航到第二个选项卡时不显示
<ul class="nav nav-tabs" style="margin-bottom
浏览 0提问于2016-11-11得票数 1
我正在尝试metafizzy的flickity。工作得很好，但在更新页面后，新加载的图库将不起作用。如何在ajax加载后重新初始化flickity？我使用js-flickity类来初始化脚本。<div class="gallery js-flickity"></div>
浏览 8提问于2015-07-01得票数 6
我有一个移动第一网站，内容根据设备缩小，我希望Flickity旋转木马与内容高度匹配。
你有什么解决办法吗？
浏览 0提问于2019-03-20得票数 1
我正在使用Flickity实现一个基于选项卡的内容轮播。下面的示例使用hash script。这允许用户访问特定的选项卡，例如example.com/#slide-1。我遇到的唯一问题是，当用户导航到另一个页面并返回或刷新该页面时，tab-nav上的is-selected类会自行重置。这意味着它与加载的内容不匹配。在javascript中，有没有一种方法可以让浏览器记住用户刷新或返回时的最后一个is-selected位置？ @2/dist/flickity
浏览 13提问于2019-09-19得票数 0
1回答
我有一个页面上的多个Flickity对象的问题。我可以很容易地用幻灯片生成Flickity，但接下来的幻灯片就有问题了。下面是代码:我试图将flickity放在一个引导选项卡面板中(4个面板，每个面板都有自己的Flickity)。 : true, pageDots: false,});
浏览 12提问于2019-03-11得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
