标签: swiperjs
React SwiperJs 自动播放不会使 swiper 自动滑动
我在 React 中使用这个 swiper：https ://swiperjs.com/react/
我试图让它“自动播放”，但它不会自动滑动。这是我尝试过的：
// https://swiperjs.com/get-started/
import React from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles({
SwiperStyle: {
backgroundColor: '#f5f5f5',
height: '58px',
width: '100%',
},
});
export default function TextInfoSlider(props) {
const classes = useStyles();
return (
<div>
<Swiper
loop={true}
autoplay={{
delay: 500,
disableOnInteraction: false
}}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
<style jsx global>{`
.swiper-container {
background-color: #f5f5f5;
}
`}</style>
</div> …8
推荐指数
推荐指数
6
解决办法
解决办法
8028
查看次数
查看次数
Swiper观察者随机延迟
我建立与使用滑块功能缩略图画廊组队，探索（v6.5.1）。默认情况下，滑块是隐藏的，当用户单击其中一张图像时，滑块必须显示为显示单击的图像。滑块打开后，用户可以单击关闭按钮将其隐藏并返回缩略图库。
这是我正在使用的代码：
JS：
var swiper;
swiper = new Swiper( '.gallery-slider .swiper-container', {
loop: true,
observer: true,
observeParents: true,
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
});
document.querySelectorAll( '.gallery-thumbnails a[data-slide]' ).forEach( item => {
item.addEventListener( 'click', function( e ) {
e.preventDefault();
window.scrollTo( 0, 0 );
document.querySelector( '.gallery-thumbnails' ).style.display = 'none';
document.querySelector( '.gallery-slider .swiper-container' ).style.display = 'block';
var slideno = $( this ).data( 'slide' );
swiper.slideTo( slideno + 1, false, false );
}); …5
推荐指数
推荐指数
1
解决办法
解决办法
623
查看次数
查看次数
Nuxt js 上的 vue-awesome-swiper(swiperjs) 不在生产环境中工作，但在开发环境中工作
我正在使用 vue-awesome-swiper 并按照以下步骤操作：https : //github.com/surmon-china/vue-awesome-swiper。我选择在 Nuxt js 中全局注册这个插件。
问题：Dev 工作得非常好，幻灯片在每个页面上，导航工作正常。另一方面，生产中的所有幻灯片都在第一页上，导航在这里工作，其他页面留空，因为所有幻灯片都在第一页上。
在开发上：
关于生产：
这些是我的文件：
插件/VueAwesomeSwiper.js
import Vue from 'vue';
import VueAwesomeSwiper from 'vue-awesome-swiper';
// import style
import 'swiper/css/swiper.css';
Vue.use(VueAwesomeSwiper);
nuxt.config.js
...
css: [], <--- Do I need to add something to add here?
plugins: [
{ src: '~/plugins/VueAwesomeSwiper.js' },
]
...
滑块.vue
<template>
<div>
<swiper class="swiper" :options="swiperOption">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide>
<swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide>
<swiper-slide>Slide 9</swiper-slide>
<swiper-slide>Slide 10</swiper-slide>
<div …4
推荐指数
推荐指数
1
解决办法
解决办法
9913
查看次数
查看次数
swiperjs 响应式浏览器宽度问题
嗨，我正在尝试在我的 wordpress 网站上创建响应式滑块，我想在台式机 5 列、平板电脑 4 列和移动设备 3 列上使用滑块，并使用 css 在移动设备上隐藏箭头，这是我的代码：
但似乎不起作用，在任何浏览器宽度上它仍然显示 3 列，如何解决？谢谢
<html>
<!-- start slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
<div>slider item</div>
</div>
<!-- Add Pagination -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
}
</html>
这是我的 jquery
jQuery(document).ready(function () {
//initialize swiper when document ready
var mySwiper = new Swiper ('.swiper-container', {
slidesPerView: 3,
spaceBetween: 10,
breakpoints: {
'480': {
slidesPerView: 4, …1
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何在 Vue3.0 中使用 Swiper slideTo()？
Vue 版本：3.0.2
刷卡版本：6.3.5
我想在Vue3.0中使用Swiper的slideTo方法，但是好像不行。
你能告诉我怎么用吗？https://codesandbox.io/s/interesting-hooks-1jblc?file=/src/App.vue
1
推荐指数
推荐指数
2
解决办法
解决办法
908
查看次数
查看次数
每个视图的 Swiper JS 幻灯片和每列的幻灯片显示不正确
我试图使用官方页面上给出的演示使用 swiper js 在引导程序上制作 2 行幻灯片。但是，当我复制代码并在浏览器上运行时，它显示如下
代码和演示页面完全一样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../package/css/swiper.min.css">
<style>
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
height: calc((100% - 30px) / 2);
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: …0
推荐指数
推荐指数
1
解决办法
解决办法
7304
查看次数
查看次数