Slick.js 未加载到 vue 组件中
[英]Slick.js is not loading in vue component
问题描述
I have made a Carousel Component in vue.
我在 vue 中制作了一个轮播组件。 I have used Slick.js slider.我用过 Slick.js slider。 Now problem is that slick.js is not being loaded and I'm facing following error.现在的问题是 slick.js 没有被加载，我面临以下错误。
jquery-3.3.1.slim.min.js:2 Uncaught TypeError: $(...).slick is not a function
Even I have used Slick.js CDN but still facing same error.即使我使用过Slick.js CDN ，但仍然面临同样的错误。 In normal html file it works properly.在正常的 html 文件中，它可以正常工作。 But in vue I'm facing this issue.I have checked jquery is also working fine.但是在 vue 中我遇到了这个问题。我检查了 jquery 也可以正常工作。 Only slick.js is not being load.只有 slick.js 没有被加载。 Here is my vue component这是我的Vue组件
<template>
<section class="feature-sound">
<div class="container">
<div class="tile-text-area">
<h2 class="mb-0 cairo-title">Explore Sounds by</h2>
</div>
<ul class="list-unstyled tab-list">
<li><div class="explore-tab-1 tab-item active">Location</div></li>
<li><div class="explore-tab-2 tab-item ">Categories</div></li>
<li><div class="explore-tab-3 tab-item ">Tags</div></li>
</ul>
<div class="explore-tab-1-area animate__animated animate__fadeIn">
<section class="regular1 slider">
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
<div class="tab-slider-element r-r-border">
<img :src="'assets/img/abdeen-01.png'">
<a class="slider-link" href="#">Abdeen</a>
</div>
</section>
</div>
<div class="explore-tab-2-area animate__animated animate__fadeIn">
<section class="regular2 slider">
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">SOCIAL</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">RELIGIOUS</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">TRANSPORTATION</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">WILDLIFE</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border">
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
<div class="tab-slider-element r-r-border" >
<button class="btn slider-inner-btn">ECONOMIC</button>
</div>
</section>
</div>
<div class="explore-tab-3-area animate__animated animate__fadeIn">
<section class="regular3 slider">
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
<div class="tab-slider-element ">
<div class="tab-slider-small-box r-r-border">
</div>
<div class="tab-slider-small-box r-r-border">
</div>
</div>
</section>
</div>
</div>
</section>
</template>
<script>
export default {
name: "ExploreSound"
}
</script>
<style scoped>
</style>
here us js code of slick这是我们光滑的js代码
$('.regular1').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 6,
slidesToScroll: 4,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 3,
}
},
{
breakpoint: 576,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
$(".regular2").slick({
dots: false,
infinite: true,
slidesToShow: 5,
navs:false,
slidesToScroll: 3
});
$(".regular3").slick({
dots: false,
infinite: true,
slidesToShow: 6,
navs:false,
slidesToScroll: 3
});
});
1 个解决方案
解决方案1
0 2022-02-03 06:11:53
Error message: TypeError: $(...).slick is not a function错误信息： TypeError: $(...).slick is not a function
One solution is to use jQuery in noConflict mode.一种解决方案是在无冲突模式下使用 jQuery。
Ex: Your code:例如：您的代码：
$(document).ready(function() {
$('a').click( function(event) {
$(this).hide();
event.preventDefault();
});
});
Code in noConflict mode: noConflict 模式下的代码：
var $jq = jQuery.noConflict();
$jq(document).ready(function() {
$jq('a').click( function(event) {
$jq(this).hide();
event.preventDefault();
});
});
The solution was found here: http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/解决方案在这里找到： http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何在另一个组件中使用Slick.js方法-Vue - How to use the Slick.js method in another component - Vue
加载滑块后Slick.js打破样式 - Slick.js breaking styling after loading a slider
从链接加载HTML并使用slick.js库写入div - Loading HTML from link & write into div with slick.js library
slick.js滑块问题 - Issue with slick.js slider
Slick.JS pauseOnHover 事件 - Slick.JS pauseOnHover Event
Slick.js 自定义点 - Slick.js customizing dots
Slick.js 的滑块未显示 - Slider for Slick.js is not showing
如何解释 slick.js / slick-theme.css 奇怪的点样式加载问题？ - How to explain slick.js / slick-theme.css strange dot style loading issue?
Vue js 组件加载 - Vue js component loading
随机和顺序Divs-Slick.JS - Randomise and Order Divs - Slick.JS
相关标签