1回答
我正试图在我的swiper.js中使用vue.js，但是它一直说Module : Error:无法解决'swiper/css‘。
编译失败。
未找到./src/components/HelloWorld.vue?vue&type=script&lang=js (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loade
浏览 7提问于2021-09-21得票数 1
1回答
我正在jQuery中创建一个刷卡。我使用斯威珀触摸滑块-它不工作在我的主要领域。我唯一能想到的就是另一个JS文件正在覆盖它？但是我删除了我所有的JS文件，但它仍然不能工作。以下是HTML代码
<div class="device">
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="
浏览 4提问于2017-03-19得票数 1
2回答
我正在使用插件。我在第二张幻灯片上有一个按钮。在单击该按钮时，滑块应导航到下一张幻灯片。
我的html文件
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide"&
浏览 8提问于2017-08-04得票数 0
我是新的WordPress主题开发，我想使用Swiper作为我的滑块。我已经尽我所能了但都没起作用。有人能帮我安排一下吗？
对于我页面中的滑块是这样设置的：
<php?
<div class="swiper tree">
<div class="swiper-wrapper">
<div class="swiper-slide slide_1">slide 1</div>
<div class="swiper-slide slide_1">slid
浏览 6提问于2022-10-20得票数 0
2回答
我有自动播放Swiper js滑块，默认情况下一次显示一张幻灯片，我需要一次显示三张幻灯片(或图像)，您能告诉我如何调整它吗？ <!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</d
浏览 52提问于2020-03-17得票数 1
回答已采纳
我正在学习angular 4，并坚持将第三方模块集成到我的angular项目中。
所以，我已经通过这个命令npm install swiper --save安装了Swiper，然后我在.angular-cli.json文件中添加了这个模块的路径
"styles": [
"../node_modules/materialize-css/dist/css/materialize.min.css",
"../node_modules/swiper/dist/css/swiper.min.css",
"styles.scss"
浏览 1提问于2017-11-15得票数 2
1回答
我正在为我的图片库开发一个与Swiper JS合作的webapp应用程序。没有使用Phonegap，它可以正常工作，但使用Phonegap时，“滑动”效果无法正常工作，JS的“上一步”/“下一步”按钮已显示，但它们不可触摸。奇怪的是，它是在改变浏览器窗口(firefox)的大小后开始工作的。有什么想法吗？
<!-- Swiper -->
<div class="swiper-container">
<div id="swiper-wrapper" class="swiper-wrapp
浏览 14提问于2017-01-06得票数 0
1回答
我正在尝试使用Swiper javascript模板创建一个包含两个图库的页面，并使用Bootstrap创建由选项卡分隔的页面。没有选项卡，图库加载得很好，但有了它们，位于非活动选项卡中的图库无法加载。我最好的猜测是，图片库的宽度是由包含div的大小设置的，当选项卡不活动时，div的大小为0，但到目前为止，这还没有给出解决方案。我将从下面的php文件中发布代码；如果有人对这个问题有解决方案或变通方法，我将不胜感激！
<div class="row page-header">
<h1>Photos</h1>
浏览 3提问于2016-03-24得票数 0
我使用的是vue-loader，我面临一个问题，因为我已经在主app.js中创建了一个要在组件中使用的指令，但不可能在组件中使用该指令。
我收到了这样的信息：
vue.common.js?e881:1014 [Vue warn]: Failed to resolve directive: swiper (found in component: <testimonial-comp>)
app.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
el: '#a
浏览 3提问于2016-05-14得票数 3
2回答
在组件中未定义的呈现函数或模板：
、、、、
我在nuxt.js中使用nuxt.js。我从他们的文档中尝试了这个例子，但是我得到了一个错误：
<template>
<swiper
:slides-per-view="3"
:space-between="50"
navigation
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
@swiper="onSwiper"
@slideChange=
浏览 2提问于2020-10-08得票数 0
回答已采纳
我是javascript的新手。我目前有一个普通的html页面，我正在使用swiper JS元素。目前这是我的代码： <head>
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container mySwiper">
<
浏览 16提问于2021-08-01得票数 0
回答已采纳
1回答
我正在导入一个简单的JS文件通过script标签在超文本标记语言页面。
当我在网站上使用jQuery时，我在JS文件的顶部添加了// @ts-check，以及jQuery类型：
/**
* Modal Functionality
* @param {JQueryStatic} $ Provides jQuery types
*/
const example = ($) => ...
虽然jQuery类型被正确地转换为$，但我也使用了Swiper库，并通过另一个脚本标记包括了库的JS。为了便于讨论，这可以是任何其他外部导入库。
当在JS中使用new Swiper('...&#
浏览 0提问于2021-10-25得票数 0
我试图找到最好的方式使用Swiper在引导4基于Laravel5.7网站。
在已安装的Swiper中使用npm install swiper。
In app.js I In：
require('./bootstrap');
require('swiper');
require('./custom');
引导和自定义与app.js一样存在于资源/js中。刷卡安装在/node_modules中。
In custom.js
var ProjectSwiper = new Swiper('.swiper-container', {
浏览 10提问于2019-02-22得票数 1
1回答
iDangerous滑动反向分页
、、、、
我正在尝试创建具有自定义分页的iDangerous swiper。默认情况下，swiper的分页顺序是从1到10。这里有人能帮我将顺序从10倒到1吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" h
浏览 6提问于2020-05-06得票数 0
1回答
我正在开发一个基于黎明的主题，我已经添加了2个JS文件： <script src="{{ 'swiper.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'swiper-handle.js' | asset_url }}" defer="defer"></script> 问题:只有文件swiper.js是从本地加载的，而文件swiper-handle.js是从Shopify CD
浏览 60提问于2021-09-30得票数 0
我有带有代码的插件swiper.js：
import Vue from "vue";
// import Swiper core and required components
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";
// Import Swiper style
浏览 12提问于2020-10-06得票数 4
我正在使用Swiper库显示图像幻灯片和缩略图。每当我单击一个特定的缩略图，图像映射到单击的缩略图应该出现在视图上。
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Thumbs } from "swiper";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/thumbs";
import "./swiper.cs
浏览 23提问于2022-07-20得票数 3
回答已采纳
2回答
我试图在我的图板中添加脚本，但它经常会出错：
解析错误:语法错误，第21行Z:\home\localhost\www\RealEstate\templates\real_estate\index.php中的意外T_CONSTANT_ENCAPSED_STRING
这是我的密码：
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$user = J
浏览 3提问于2015-04-30得票数 2
回答已采纳
我在用swiper.js安装纱加刷
这是我的代码，但它没有显示任何幻灯片什么的。
<swiper
:slides-per-view="3"
:space-between="50"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
浏览 7提问于2020-11-08得票数 0
回答已采纳
3回答
我想使用Swiper在我的React应用程序中添加滑块。它不能正确刷卡。首先，我将swiper安装为
npm install Swiper
然后
import Swiper from swiper
这是在我的组件的componentDidMount方法中编写的
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
pagination: {
el: '.swiper-pagination'
浏览 1提问于2019-12-04得票数 2
1回答
在下面的项目中安装了Swiper
我想使用“覆盖流”效应，如本例所示：
我已经安装了Swiper，并添加了它的CSS，JS CDN的项目。
var mySwiper = new Swiper ('.swiper-container-aboutus', {
// Optional parameters
effect: 'coverflow',
loop: true,
centeredSlides: true,
slidesPerView: 3,
initialSlide: 3,
keyboardCo
浏览 0提问于2019-04-17得票数 0
回答已采纳
4回答
我正在使用Swiper为一个简单的幻灯片与图像和视频。这就像一种魅力。然而，由于设计要求是有一个一致和好看的播放器UI，我需要使用Video.js作为一个视频播放器。所以我有斯威伯作为幻灯片插件和Video.js作为视频插件。这是可行的，只是这两个插件之间存在着事件冲突。
Video.js在其根目录上有一个mousedown事件，而在视频及其(由Video.js动态创建的)父容器上也有一个mousedown事件。当拖拽幻灯片(视频)时，不仅斯威珀检测到它必须滑动，而且Video.js也会在点击视频时处理这个问题。因此，如果您滑动到下一张幻灯片，这意味着视频将被播放/暂停.。
另外，当你拖动时间
浏览 4提问于2017-08-02得票数 3
回答已采纳
Swiper.js导航按钮消失在生产模式中
Swiper.Js导航按钮显示在开发中，但没有显示在产品中。
next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
module.exports = withCSS(withSass({
webpack(config) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|
浏览 3提问于2021-02-28得票数 2
回答已采纳
1回答
我试着用斯威伯8和Webpack 5。
在Webpack配置中，我定义了两个入口点：
module.exports = {
entry: {
vendor: './vendor.js',
frontend: './frontend.js',
}
...
}
在vendor.js中，我导入了Swiper：
import 'swiper/scss';
import Swiper from 'swiper';
在frontend.js中，我导入了脚本文件：
import '
浏览 3提问于2022-07-01得票数 1
回答已采纳
我试图导入在nextjs项目中使用官方文档中提供的cdn链接。这是我的密码
import React from 'react'
import Image from 'next/image'
import Head from 'next/head'
import swiper from '../Configuration/swiper'
const aboutus = () => {
return (
<>
<Head>
<link rel="styleshe
浏览 8提问于2022-07-04得票数 0
3回答
我正在尝试更新库
我用的是6.8.2，
现在我想把它升级到一个更新的版本7.4.1
我的应用程序是用React和Node编写的(我不使用Next.js)和Node版本: v14.11.0
下面是我的组件代码的样子
import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
const CustomView = () => {
return (
<Swiper>
</Swiper>
)
}
export
浏览 25提问于2022-11-18得票数 1
3回答
"vue"："^2.6.14“"swiper"："^7.0.5"，
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
例如，我尝试默认导入，但是：
没有找到这些依赖关系：
./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js
浏览 5提问于2021-09-14得票数 5
我正在使用vue-cli工具进行开发，我很难让 npm包在我的站点上工作。我已经在导入、js初始化和css中加载了TLDR ，但是该刷无法移动到第一个幻灯片之后的其他幻灯片，并且在页面上保持静态。。
和
我正在将js和css文件从包中导入到特定的视图home.vue中，在那里我尝试使用它。
<script>
//import js and css files
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export def
浏览 2提问于2017-07-08得票数 1
回答已采纳
我最近尝试在我的网站上设置一个"idangero.us Swiper“功能。不幸的是，它似乎不起作用。我使用JS的经验非常有限，所以我完全不知道如何解决这个问题。
我收到的错误是Uncaught ReferenceError: Swiper is not defined
感谢您所能提供的任何帮助。
我的HTML是
<!-- Swiper -->
<style>
.swiper-container{
width:100%;
height:auto;
margin:20px auto;
}
.swiper-slide{
text-align:center;
浏览 1提问于2016-06-22得票数 2
回答已采纳
我引用的是swiper.min.js的CDN版本，该文件似乎已经消失，或者在7/3被重命名为swiper-bundle.js。 Cannot find "/js/swiper.min.js" in swiper@6.0.0 我下载并引用了swiper-bundle.js的本地副本，但一定是有什么地方发生了改变，破坏了我的原始代码。 是否有相同情况的人和/或有旧版本的副本？
浏览 21提问于2020-07-06得票数 2
1回答
我在documentation中找不到有关在幻灯片加载后立即添加类的信息。问题是swiper.js添加了'swiper-slide-active'类，但是在滑动的时候！当幻灯片完成动画时，我需要添加一些类...就像幻灯片动画结束后的“空闲”一样。 这有可能吗？ var mySwipper = new Swiper('.my-swiper', {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 30,
slidesPerGroup: 3,
speed: 800,
autoplay
浏览 41提问于2021-08-20得票数 1
1回答
在使用holder.js时，刮水器的高度是错误的。这可能是因为该Swiper在holder.js之前/同时执行。必须先执行holder.js，这样swiper才能知道正确的图像尺寸。有没有简单的解决方案？
$(document).ready(function () {
// =============================================
// CAROUSEL (Swiper)
// =============================================
// Hero Carousel
// - - - -
浏览 3提问于2016-05-25得票数 0
我刚开始使用javascript，我正在尝试实现一个卡片旋转木马。我遇到了斯威珀的滑块插件，我想我试了一试。现在，我在外部javascript文件中出现了问题，在其中初始化Swiper，或者我认为这就是问题所在。我怀疑它没有被正确加载，改变<script>标记的顺序可以解决这个问题，但我不确定，如果是这样，我不知道是如何解决的。
以下是我的html标题标记：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-wid
浏览 3提问于2020-02-23得票数 0
回答已采纳
1回答
这是npm start的问题，运行react-scripts start。有谁能帮我一下吗？ 我正在尝试使用我的应用程序中的Swiper，我在控制台上得到了这个错误。 !UPDATED:新增使用卷帘的代码。 Failed to compile.
./node_modules/swiper/dist/js/swiper.esm.bundle.js
Module not found: Can't resolve '/home/lemes/Projects/idealnemoloko-react/node_modules/babel-preset-react-app/node_mo
浏览 26提问于2018-12-28得票数 1
回答已采纳
1回答
我一直在尝试使用带有自定义类的swipe slider创建一些幻灯片。
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<di
浏览 0提问于2017-08-21得票数 1
回答已采纳
我正在用jquery手机创建一个phonegap应用程序，我有一个启动屏幕，5秒后，将滑到滑动幻灯片，下面是代码：
index.html
<!--splash-->
<div data-role="page" id="page_splash">
<script type="text/javascript" charset="utf-8" src="scripts/splash.js"></script>
<div class=&#
浏览 5提问于2015-08-07得票数 0
回答已采纳
目前，我尝试在一个应用程序中实现一个旋转旋转木马(使用cordova和离子型)，但是它不起作用。
我跟踪了。
因此，我在我的index.html顶部添加了这个链接：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"><
浏览 3提问于2017-01-08得票数 1
回答已采纳
1回答
在将Swiper升级到7.0.7版本之后，我得到了一个恼人的错误：
Error: Cannot find module 'swiper/react'
.
.
.
Source
.next\server\pages\items.js (1:0) @ Object.swiper/react
> 1 | module.exports = require("swiper/react");
在上一个版本(6.8)中，我没有看到这个错误。我还检查了和github问题，但没有找到有帮助的答案。
问题是VSCode中的“导入成本”扩展显示了导入模块的大小，所以我认为Ne
浏览 3提问于2021-09-30得票数 1
回答已采纳
4回答
有人能帮忙吗？我需要一个滑动计数器用于我的js旋转木马，但是这个计数器不能工作：
例如，如果总幻灯片为8，则起始值如下：幻灯片: 0/8。当一个幻灯片移动时，它就变成了幻灯片: 1/8等等。
我找到了这个示例，但它适用于较早版本的swiper js，我无法找到一种方法来使用swiper的最新版本。在我的密码里有我需要的版本。
谢谢!
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
loop: true,
// If we need pagination
pagi
浏览 9提问于2020-12-01得票数 1
我使用的是vue-可怕的-刷卡，并遵循以下步骤：。我已经选择在全球注册这个插件在Nuxt。
PROBLEM：Dev运行得非常好，幻灯片在每个页面上，导航工作正常。生产，另一方面，有所有的幻灯片在第一页，导航工作在这里留下其他页空白，因为所有的幻灯片在第一页。
关于发展中国家：
关于生产：
这些是我的档案：
plugins/VueAwesomeSwiper.js
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
// import style
impor
浏览 8提问于2020-05-19得票数 4
回答已采纳
1回答
我想为浏览器屏幕设置项目编号。这里是关键部分：
<body>
<!-- Swiper -->
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</di
浏览 1提问于2021-07-02得票数 0
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<video-js
id="overlayVideo"
class="overlayVideo"
data-account="6269594386001"
data-player="oHG2
浏览 5提问于2022-07-07得票数 1
我试图在"vue": "^2.6.11"中使用Swiper，但是它会引发运行时错误。我遵循了的指南，并将导入更改为：
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js';
// Import Swiper styles
import 'swiper/swiper-bundle.css';
错误消息：
属性或方法"onSwiper“未在实例上定义，但在呈现过程中引用，事件”swi
浏览 16提问于2022-02-22得票数 1
回答已采纳
我正在使用thebird swipe示例，只是删除了thebird swipe示例中的静态div，并将动态div添加到已准备好的文档上，但我的默认样式如data-index、transition-duration、transform没有应用
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
&l
浏览 2提问于2017-05-27得票数 0
为什么滑动滑块滑动我所有的div作为一个整体？图书馆变了吗？
以下是我的例子：
var swiper = new Swiper('.swiper-container', {
autoplay:false,
direction: "horizontal",
loop:false,
pagination: {
el: '.product-image-thumbs .swiper-pagination',
clickable: true,
bulletActiveClass
浏览 1提问于2020-07-20得票数 0
回答已采纳
1回答
我试图在我的angular2 + npm应用程序中使用刷库，但是在试图使用它时在构建时出现了错误。
错误是：
ERROR in vendor.95f9dda80938ded736ad.bundle.js from UglifyJs
Unexpected token: name (class_SwiperClass) [vendor.95f9dda80938ded736ad.bundle.js:16626,6]
我已经将它包含在我的package.json中，并且正在使用它，如下所示：
import Swiper from 'swiper/src/components/core/core
浏览 6提问于2017-09-27得票数 0
4回答
第一次使用swiper时，我按照文档说明在代码中添加了html部分，然后在JS中初始化它，我初始化了分页，但它没有显示在我的页面上。这是我的代码： JS： var Swiper = require('swiper');
$(document).ready(() => {
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
}
});
浏览 22提问于2020-01-27得票数 6
1回答
只是在学vue。从这里安装该站点的滑块插件：。传输代码并收到这样一个错误：“窗口未定义”下面的代码。我用nuxt.js。互联网上有几种解决方案，但没有一种对我有帮助。
slider.vue
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper';
if (process.browser) {
const VueAwesomeSwiper = require('vue-awesome
浏览 1提问于2019-07-24得票数 0
回答已采纳
我正在使用swiper在我的网站上做一个滑块。不幸的是，在Chrome中导航不起作用。按钮出现，但不执行任何操作。
这是我的代码：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
</div>
<div class="swiper-slide">
</div>
<
浏览 0提问于2018-04-25得票数 9
1回答
我正在使用swiper.js制作图像和视频的幻灯片。在这里，我想更改用户单击按钮时的延迟。但是我不知道如何更改swiper中的延迟或任何其他方法来做它？？ 我已经阅读了swiper.js的文档，但在创建swiper对象后没有更改延迟的功能。 JSFiddle(code) <div id="swiper" class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide&#
浏览 135提问于2021-07-03得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
