如何将Photoswipe和Swiper集成在一起？
将Photoswipe和Swiper集成在一起可以实现图片的浏览和轮播功能。下面是一个基本的集成步骤：
- 引入相应的库文件：在HTML文件中引入Photoswipe和Swiper的CSS和JavaScript文件。
- 创建图片列表：根据需要，创建一个包含图片路径和缩略图路径的图片列表。
- 创建HTML结构：根据需要，在HTML中创建一个容器，用于显示图片。
- 初始化Swiper：使用Swiper的初始化函数，将容器与Swiper实例绑定，并配置轮播相关的参数，如轮播速度、是否自动播放等。
- 初始化Photoswipe：使用Photoswipe的初始化函数，将容器与Photoswipe实例绑定，并配置浏览相关的参数，如缩放比例、缩放动画等。
- 绑定事件：在需要触发图片浏览的元素上，绑定点击事件，当用户点击时触发Photoswipe的打开方法，并传入对应图片的索引。
- 额外配置：根据需要，可以配置更多的参数，如切换动画、缩略图导航等。
下面是一个代码示例，展示了如何将Photoswipe和Swiper集成在一起：
<!DOCTYPE html>
<html>
<head>
<!-- 引入Swiper的CSS和JavaScript文件 -->
<link rel="stylesheet" href="path/to/swiper.css">
<script src="path/to/swiper.js"></script>
<!-- 引入Photoswipe的CSS和JavaScript文件 -->
<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">
<script src="path/to/photoswipe.js"></script>
<script src="path/to/photoswipe-ui-default.js"></script>
</head>
<body>
<!-- 图片容器 -->
<div id="gallery" class="swiper-container">
<div class="swiper-wrapper">
<!-- 图片列表 -->
<div class="swiper-slide">
<a href="path/to/image1.jpg" data-size="800x600">
<img src="path/to/thumbnail1.jpg" alt="Image 1">
</a>
</div>
<div class="swiper-slide">
<a href="path/to/image2.jpg" data-size="800x600">
<img src="path/to/thumbnail2.jpg" alt="Image 2">
</a>
</div>
<!-- 更多图片 -->
</div>
</div>
<script>
// 初始化Swiper
var swiper = new Swiper('#gallery', {
// 配置轮播参数
loop: true,
// 更多参数配置
// 打开Photoswipe
on: {
click: function() {
var index = this.activeIndex;
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
{
src: 'path/to/image1.jpg',
w: 800,
h: 600
},
{
src: 'path/to/image2.jpg',
w: 800,
h: 600
},
// 更多图片
];
var options = {
index: index,
// 配置浏览参数
// 更多参数配置
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
}
});
</script>
</body>
</html>以上示例中，我们使用了Swiper和Photoswipe的相关函数和参数来实现图片的轮播和浏览功能。根据实际需求，你可以根据Photoswipe和Swiper的官方文档来进一步配置和定制化你的集成方案。
推荐的腾讯云相关产品：由于要求不提及具体的云计算品牌商，这里无法给出腾讯云相关产品的推荐。建议在腾讯云官方网站中查找与存储、云原生、网络通信等相关的产品和服务。
相关·内容
1回答
我将我的前端构建模块化如下：
每个组件都有它的.css和.js文件夹(在html文件夹中)。
所有依赖库都进入vendor.js。
所有.js组件的文件都编译成bundle.js。
- vendor.js开发模式:
import $ from 'jquery';
import './assets/Swiper-3.3.1/dist/js/swiper.min';
import './assets/twentytwenty/js/jquery.event.move';
import './assets/twentytwe
浏览 3提问于2016-09-08得票数 0
1回答
我需要添加应该向右和向左滑动的图像，而不是在logcat 10-28 11:48:25.734: E/Web Console(5348): Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined at file:///android_asset/www/04-jquery-mobile.html:59中获得此错误，其中第59行是以下代码下的}(window, window.jQuery, window.Code.PhotoSwipe));。我已经收录了swiper文件并正确引用，仍然无法获取，请帮助我
浏览 1提问于2013-10-28得票数 0
谁能指导我用简单的javascript代码创建图片库。
我发现了很多，但与我的应用程序集成会产生很多问题，所以我希望它很简单。应该能够轻弹图像后和前面，这是所有的。
如有任何帮助，我们将不胜感激。
浏览 0提问于2012-01-05得票数 1
回答已采纳
1回答
我有一个非常困难的时间集成光擦和奥雷利亚。我得到了编译时错误和浏览器错误。我查看了，并尝试了那里建议的内容(除了类型文件的更改，因为我不知道要更改什么)，但它仍然不起作用。使用来自另一个问题的信息，我设法解决了编译时错误，但在初始化Photos威时仍然会出现一个错误：
Uncaught : photoswipe_1.default不是构造函数
aurelia.json:
{
"name": "photoswipe",
"main": "photoswipe",
"path":
浏览 3提问于2017-05-18得票数 0
1回答
我正在尝试将集成到我当前的项目中
这是webpack.config.js
module.exports =
{
entry: './input.js',
output:
{
path: 'js/',
filename: 'output.js'
},
resolve:
{
alias:
{
'photoswipe_js': './node_modules/photoswipe/dist/ph
浏览 2提问于2016-12-08得票数 0
我正在尝试将德米特里·塞梅诺夫( Dmitry )的“PhotoSwipe”()与他的“万能弹出式”()的Ajax Type结合起来。更具体地说，我在我的index.html文件上有一个链接。当点击它时，会显示一个显示Ajax Type内容的other.html镁基弹出。在此弹出窗口(即other.html文件中)中有一个PhotoSwipe图像库。当我单击这些图像时，PhotoSwipe图库就会像预期的那样显示出来，并且工作正常。但是，当我单击“关闭”按钮(“x”图标)或按ESC键时，PhotoSwipe和Magnific都会关闭。如何更改此行为，以便只关闭PhotoSwipe弹出窗口？是否
浏览 2提问于2016-06-16得票数 0
回答已采纳
1回答
我不知道这是否允许，但我有一个两部分的问题。如何将swiper.js和swiper.min.css与Laravel集成？我使用Laravel编译JS和SASS文件。我的第二个问题是，如何在Laravel中调用"onClick“事件函数？我用的是Laravel 7.3.1。
app.js
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
grabCursor: 'true',
centeredSlides: 'true
浏览 3提问于2020-04-14得票数 0
1回答
我试图在我的反应组件和css集成的刷卡插件，但当我点击箭头滑块不工作，它似乎是js代码的刷卡不运行。
var Swiper = React.createClass({
componentDidMount() {
let el = this.getDOMNode();
let swiper = new Swiper(el);
},
render: function() {
return (
<div className="swiper-container">
<div className="
浏览 2提问于2015-04-15得票数 1
回答已采纳
如何将url添加到Photoswipe图像标题？我尝试过的一切都阻止了Photoswipe正常工作。我想添加一个到摄影师网站的链接。
浏览 0提问于2016-06-09得票数 0
2回答
swiper集成
、、、、
我正在尝试将swiper集成到我的网站中。不过，我对编程还是很陌生的。我已经将CSS和HTML添加到我的代码中，但我不确定如何初始化swiper。
我有一个名为swiper-common.js的项目，其中包含以下代码：
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 3000,
l
浏览 2提问于2016-02-11得票数 0
我试图在我的JSPM和TypeScript项目中使用库，但没有成功(我在这里流血。))。
使用来自PhotoSwipe的修改后的版本定义文件(最初的“未定义的PhotoSwipe”没有工作)，我得出了如下结论：
declare var PhotoSwipe: PhotoSwipe.IPhotoSwipeStatic;
declare var PhotoSwipeUI_Default: PhotoSwipeUI_Default.IPhotoSwipeUI_DefaultStatic;
declare module PhotoSwipe {
...
interface IPhot
浏览 0提问于2016-03-22得票数 3
我还只是个初学者，正在尝试制作我的第一个网页。我正在使用angular和angular路由。包含入门文档所需的photoswipe html的页面被注入到index.html中。我得到了下面的错误。“未捕获节点:无法读取未定义的属性'firstChild‘”，该属性指向photoswipe.js的第66行(var TypeError= ....)
getChildByClass: function(parentEl, childClassName) {
var node = parentEl.firstChild;
while(node) {
if( f
浏览 2提问于2015-01-09得票数 0
1回答
我有一个同时依赖于PhotoSwipe和PhotoSwipeUI_Default的模块。我需要这两个模块，像这样，在我的模块内部，我正在初始化我的画廊。例：
define("modules/lightboxStart", ["vendor/PhotoSwipe", "vendor/PhotoSwipeUI_Default"], function (PhotoSwipe, PhotoSwipeUI_Default) {
var StartGallery = function(){
var lightBox = new Phot
浏览 2提问于2015-10-28得票数 2
我正在尝试集成react-native-swiper，它可以在里面加载视频。我正在寻找一种将其与平面列表集成的方法。但是数据加载不正确，有没有其他方法可以使用平面列表(使用array.map())加载数据
export default class HomeTab extends Component {
render() {
return (
<FlatList
data={Data}
keyExtractor={(item, index) => item.id}
renderItem={({
浏览 0提问于2019-01-22得票数 2
我正在尝试在我的站点中实现photoswipe，但我不确定如何在wordpress站点上实现它。
我正在使用acf中继器来显示网格中的所有图像。我想在单击图像时显示照片擦除图库。
我已经阅读了有关photoswipe的文档，但我不知道如何将其与中继器字段一起使用。
如有任何帮助，将不胜感激..
浏览 23提问于2020-05-21得票数 0
回答已采纳
我正在尝试在一个Aurelia项目中使用，但是找不到一种方法来让它工作。
在我的捆绑包下的aurelio.json中，我有：
{
"name": "photoswipe",
"path": "../node_modules/photoswipe/dist/",
"main": "photoswipe.min",
"resources": [
"photoswipe-ui-default.min.js",
浏览 2提问于2016-12-28得票数 2
1回答
我正在尝试集成项目的3d覆盖流，但是覆盖流不像预期的那样工作，我包括了图像和代码。提前感谢您的帮助！
我试过使用最新的软件包，我发现它不起作用，所以我尝试了这些旧版本，这个版本也不起作用，我使用的版本是“react id-swiper”："2.3.2"，"swiper"："^6.1.2“。
代码：
import React from 'react'
import Swiper from 'react-id-swiper';
import 'react-id-swiper/lib/styles/css/swiper.
浏览 3提问于2020-08-22得票数 0
回答已采纳
不明白为什么当我试图将PhotoSwipe添加到Rails项目中时，它没有显示任何东西
Step：使用了这个gem：的复制手册：Wrote 'click‘处理程序，但是它没有显示
我写的代码：
<body>
<!-- some Rails and other stuff -->
<%= render 'shared/photoswipe' %>
</body>
end包含从页尾成功添加的div class="pswp“的完整副本。
在单击处理程序上为PhotoSwipe init添加了一些咖啡代码
$ -
浏览 0提问于2020-10-19得票数 0
回答已采纳
我正在尝试将swiper.js集成到我的angularJs web应用程序中，以显示背景图像。库正在工作，但图像没有正确显示。请看这个柱塞，它的工作与我的应用程序完全一样。
以下是最相关的部分：
<!-- Slider main container -->
<div class="swiper-container" swiper>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
浏览 3提问于2019-12-22得票数 0
回答已采纳
我正在尝试将nolimts4web swiper集成到我在index.html文件中使用的Angular 5项目中
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
</head>
<body>
...
<script
src="https://cdnjs.cloudflare.com/aj
浏览 1提问于2018-04-13得票数 2
回答已采纳
我在使用webback和encore方面还是个新手，所以我不知道哪种方法才是处理这个问题的确切方法。
我有一个包含一些js文件的网站，它使用jQuery和Bootstrap。我想用webpack创建一个独特的精简js文件。
我已经能够按照Symfony网站上的例子成功地做到这一点，所以我能够只包含一个app.js并正确地构建依赖项。
有一些javascript库没有在我的app.js中使用，但会在网站中内联的一些javascript代码中使用，比如PhotoSwipe。
目前，我需要在我的main.js文件中包含PhotoSwipe库，尽管这个文件并没有使用这个库。
// Resources/
浏览 0提问于2017-11-23得票数 3
我尝试将PhotoSwipe包含到我的项目中。以及如何正确地包含所有lib文件、JS、CSS和图像的问题。
我做了这样的事情-
yarn add photoswipe
而不是我添加的esources/assets/js/bootstrap.js的底部
window.PhotoSwipe = require('photoswipe');
但我还需要包含package.json中没有描述的额外JS (photoswipe ui-default.js)，不确定这是正确的方式吗？
mix.copy('node_modules/photoswipe/dist/photoswipe
浏览 17提问于2018-09-10得票数 0
我目前正在将SwiperJS与我的ReactApp集成，除了它没有显示下一张幻灯片外，一切都正常工作。它将显示当前正在显示的幻灯片，但当我在幻灯片上滑动时，它将不会显示下一个幻灯片。我使用的默认滑块和示例代码，他们在网站上，但我似乎不能复制他们的演示。
在本例中，您可以看到前3张幻灯片正在显示中，但当我滑过它时，会切断“幻灯片3”的边缘，而不会显示“幻灯片4”。
JSX代码
import "./aboutus.scss"
import { init } from "ityped"
import { useEffect,useRef } from "r
浏览 0提问于2021-11-20得票数 1
1回答
我正在尝试将ngx-swiper-wrapper集成到一个angular/ionic项目中。然而，“幻灯片”似乎不能正确地折断。一张幻灯片应该同时显示，但会出现某种无限滚动，幻灯片在屏幕外开始，在屏幕外结束，没有幻灯片捕捉到视口。 使用的代码如下； <swiper class="swiper-container" fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
<div class="swiper-slid
浏览 24提问于2021-08-02得票数 0
我正在学习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
photoswipe 3.0.5，jquery 1.8.2
画廊工作正常。
只有在轮播的最后一个和第一个图像之间有一个带有X图标的黑色屏幕，附加class = ps- carousel -item-0 ps-carousel-item-error
我使用了示例02-jquery。
js photoswipe调用：
(function(window, $, PhotoSwipe){
$(document).ready(function(){
var options = {};
$(".gall
浏览 0提问于2013-06-24得票数 2
回答已采纳
我在将Swiper集成到我的NextJS项目时遇到了问题。我已经创建了一个具有基本Swiper配置(文档中的配置)的组件，但是当它包含在已经工作的页面中时，它无法从useEffect中找到React。如果我移除组件，一切都会像预期的那样工作。
错误如下：
SyntaxError: The requested module 'react' does not provide an export named 'useEffect'
调用堆栈指向以下文件：
file:///[...]/<project_root>/node_modules/swiper/re
浏览 10提问于2022-07-10得票数 0
1回答
如何将按钮放置在图像的底部和中心？我目前有一个旋转木马与多个图像，这是很好的工作，但当我试图添加一个按钮的导航目的，它是定位在图像以外的右边。
下面是HTML：
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="">
<button type="button
浏览 3提问于2021-03-06得票数 1
回答已采纳
我有两个Splash.jsx代码和一个homepage.jsx代码。我只想在主页不使用的时候显示飞溅屏幕，但我不知道如何将Splash屏幕与主页集成并设置计时器，所以一旦我不使用主页，就会显示splash屏幕。这将是很好的帮助我显示的飞溅屏幕，一旦主页不使用。Homepage.jsx
import React from 'react';
import Card from '../Card/Card'
import img2 from '../../Assets/AutoLoan.png'
import img3 from '../../
浏览 9提问于2022-02-08得票数 3
回答已采纳
我正在尝试将angular2-useful-swiper集成到一个包含自动旋转功能的SPA中，以便在图像中移动。然而，它根本没有过渡，停留在第一页。
控制台中有错误，一切似乎都正常(我可以手动滑动幻灯片，只是不能在幻灯片之间切换)。
有人能告诉我我哪里做错了吗？在我的component.html中有；
<swiper [config]="swiperConfig" class="col-md-12">
<div class="swiper-wrapper">
<div clas
浏览 0提问于2018-06-12得票数 0
1回答
所有人！我在使用PhotoSwipe插件时遇到了问题。我在移动webview(Android和iphone)中使用PhotoSwipe。当我点击photoswipe图像项目时，一些图像被旋转了90度。我发现这个问题发生在用相机拍摄的图像中。 PhotoSwipe的版本是最新的，我测试了PC和手机上的所有浏览器。我如何解决这个问题？请帮帮我，谢谢大家。
浏览 5提问于2015-08-01得票数 0
所以我有几个HTML页面可以在它们之间进行链接。
假设:1.Page1.html的index.html链接和page2.html的page1链接
这是我的index.html和page1.html中的标题
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.
浏览 4提问于2015-08-13得票数 0
这是我的Swiper代码：
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectFade } from 'swiper';
import 'swiper/css';
import 'swiper/css/effect-fade';
<Swiper
modules={[EffectFade]}
effect="fade"
>
{
items.map(item => <Sw
浏览 7提问于2022-06-27得票数 0
11回答
我正在尝试将插件添加到我的页面中。我想要实现的是在这里集成carousal滑块，
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide"
浏览 7提问于2017-05-03得票数 33
我使用的是一个WordPress插件，当flash不可用时，它会从flash切换到jQuery。我只想使用jQuery版本，即使在安装了flash的浏览器上也是如此。我试图进入swfobject.js，看看我是否能欺骗它搜索一个不存在的flash版本，从而切换到jQuery版本，但它是以最小的方式编码的，我看不到任何版本号。显然，当涉及到javascript时，我还是个新手。
(该插件是大FlAGallery (大闪光相册画廊)，我想使用PhotoSwipe选项，我可以自定义与CSS。我知道有PhotoSwipe的插件版本，但我发现的那些没有像GRAND FlAGallery中包含的版本那样显
浏览 2提问于2012-09-13得票数 0
我正在尝试使用html和javascript实现phonegap应用程序的图像滑动，按照这个演示，它工作得很好，但添加到我的项目后，无法滑动图像。即使正确链接了js文件，我仍然在logcat中得到这样的错误："Uncaught TypeError: Cannot read property 'PhotoSwipe' of undefined at file:///android_asset/www/examples/01-default.html:26"对我的问题有什么想法吗?谢谢。
刷卡代码
<title>PhotoSwipe</title&
浏览 2提问于2013-10-04得票数 0
我使用的是Swiper Maniuplation effect，它可以显示多张幻灯片，但当我单击next按钮时，我希望它只追加一张幻灯片，而不是两张幻灯片。这就是我将其与Svelte集成的方式： <Swiper
modules={[Navigation]}
spaceBetween={20}
slidesPerView={1}
navigation
breakpoints={{
// >= 640px
640: {
width: 640,
slidesPerVi
浏览 58提问于2021-10-29得票数 0
1回答
我正在使用swiper作为我的移动视图的滑块。基本上，我想要应用的swiper-slide类的div不是彼此的兄弟。
下面是演示我的用例的样例小提琴：
每当我尝试以这种方式使用swiper时，第一张幻灯片可以正确显示，但我无法执行从第一张幻灯片到任何其他幻灯片的实际滑动(当您尝试移动滑块时，这一点在演示小提琴中很明显)。我想知道这是否可能。我不能真正重新组织我的html，因为我在多列中有多张卡片，所以这些卡片中的每一张都会变成一张幻灯片，整个标题也是如此。
你能在这里提供一些建议，或者在我放的代码样本上提供任何指针吗？谢谢!
更新:我尝试在中嵌套swiper-*类，它确实创建了swiper，但
浏览 1提问于2016-10-21得票数 2
我有一个来自react组件(特别是swiperjs.com react组件)的对象引用。我希望对对象属性(https://swiperjs.com/api/#methods)中的更改做出反应，但我发现useEffect()在这种情况下不起作用，因为它只是一个引用。有谁能建议在这里做些什么吗？ const [mySwiper, setmySwiper] = useState(0);
useEffect(() => {
console.log(mySwiper.isEnd)
}, [mySwiper]); 这是setmySwiper逻辑，这是一个 <Swiper&
浏览 31提问于2020-07-22得票数 0
1回答
我对node和npm包系统比较陌生。对于我的redux/react web应用程序，我目前结合使用了react-photoswipe和photoswipe包。现在我想给photoswipe包添加一些额外的功能，所以我进入了npm-modules文件夹中的photoswipe文件夹，进行了必要的更改，并在其中运行了npm build。
这是可行的，但无论出于何种原因，一旦删除并重新创建了node_modules-folder，或者如果我升级了photoswipe包，所做的更改就会丢失。
在这种情况下，正确的工作流程是什么？我可以以某种方式克隆现有的包，更改它，然后将其存储在npm可以识别的本地存
浏览 1提问于2016-11-13得票数 0
我对jquery手机和jquery也是新手。我正在与phonegap和jquery移动的一个项目。我正在使用PhotoSwipe的图片库。它工作得很好，可以显示图像。但我想为我的图库制作一个自定义的photoswipe工具栏。我看到了他们给出的自定义工具栏示例，差一点就成功了。但是，尽管我在这个领域是个新手，所以我没能把它与jquery mobile集成起来。我的自定义按钮根本不起作用。以下是我的代码示例。
for (var i = 0; i < photo_len; i++) {
$('.GalleryAccessories').append('<
浏览 0提问于2013-05-03得票数 6
回答已采纳
我已经集成了swiper幻灯片和coverflow效果，现在我不想要第一张和最后一张幻灯片的效果。我们可以只删除第一张和第一张幻灯片的效果吗？
浏览 3提问于2016-07-01得票数 1
我正在建立一个自定义的网络商店，我正在尝试删除photoswipe样式的文档，但我似乎无法摆脱它们，我尝试了网上找到的几个“解决方案”，但它们都不起作用。这是我到目前为止在functions.php中尝试的： remove_theme_support( 'wc-product-gallery-zoom' );
remove_theme_support( 'wc-product-gallery-lightbox' );
remove_theme_support( 'wc-product-gallery-slider' ); 和 add_filte
浏览 15提问于2021-04-05得票数 0
我现在的处境不一样。我使用Swiper.js作为我的React应用程序。我需要改变幻灯片上的应用主题颜色，它必须是动态的。这就是我需要传递一些道具给SwiperSlide，并使这个道具在幻灯片上的变化。我该怎么处理呢？
<Swiper
id="pathway-slider"
slidesPerView={1}
onSlideChange={(swiper) => {
console.log("Slide index changed to: ", swiper);
}}
浏览 2提问于2021-09-29得票数 0
我一直在努力使用Phonegap和Photoswipe。这就是我所拥有的：
1)目前我正在通过php JSON调用请求远程图像(工作中)
2) JSON图片返回并本地存储到Android设备(工作中)
3)所有图片都显示在Photswipe缩略图库页面上(工作中)
问题在这里4)当我点击一个缩略图时，我没有得到Photoswipe图库格式，它只是将图像加载到一个空白页面。
我的猜测是在我将所有图像完全传递到<#gallery之前，photoswipe脚本就已经加载了
我的问题是如何重新初始化Photoswipe以读取所有图像，或者如何将Photoswipe函数附加到附加到
我正在尝试发布
浏览 0提问于2012-10-29得票数 3
回答已采纳
我想在使用swiper-master脚本时像图像一样对齐"li“！！ 但是我不习惯使用"display:flex“代码.. 所以我不知道该怎么解决它。 如何将对齐方式更正为与图像相似？？ 我想像图像一样遍历"li“。 如图所示，只有li01和li02上下排列，所以我很满意！ 图片已附在下面！ ※我不会说英语，所以我用了翻译器。 因此，判决可能并不顺利。对不起..！ ? var swiper = new Swiper('.swiper-container', {
direction: 'horizontal',
浏览 13提问于2021-08-25得票数 0
回答已采纳
1回答
我正在使用react-native-swiper来构建我的应用程序的主用户界面，并且需要想办法从子组件中添加按钮来滑动屏幕。
下面的代码工作(点击Previous Screen将滑动屏幕到屏幕2)，但我需要找到一种方法，以移动Previous Screen文本到<ScreenThree />组件。
如何将<Text onPress={() => this.refs.swiper.scrollBy(-1)} >Previous Screen</Text> <ScreenThree /> 移动到<ScreenThree />组件？
浏览 1提问于2017-11-09得票数 1
回答已采纳
我在<a>标签中有几张图片，它们的点击已经被绑定，以获得正确的图片索引以进行照片擦除。问题是，第一次单击图像会打开正确的图像，但第二次单击总是会打开相同的图像。此模式继续，交替单击将打开与前一个相同的图像。相关的代码是- var init_photoswipe = function(){
var $index = parseInt($(this).attr("index"));
console.log($index)
var options = {index: $index};
var gallery = new PhotoSwip
浏览 16提问于2019-05-21得票数 2
回答已采纳
我使用Photoswipe和我使用完全相同的HTML结构和脚本显示在网站上，但当点击我的缩略图时，黑屏打开，只显示一个"X“图标。
JS错误面板显示404未找到。它试图将"undefined“添加到图像路径的末尾。
JS：
<script>
$(document).ready(function () {
var myPhotoSwipe = $("#ulProdImgs").photoSwipe({ enableMouseWheel: false, enableKeyboard: false });
});
浏览 10提问于2013-03-19得票数 0
回答已采纳
我想我在Photoswipe中发现了一个bug，我需要一些帮助。下面的代码是为使用Photoswipe的移动应用程序创建的页面。在一个html文件上，你有两个页面，一切都很正常：
<html>
<head>
<meta charset="utf-8" />
<title>Photoswipe test</title>
<meta name=viewport content="user-scalable=no, width=device-width" />
<me
浏览 9提问于2012-10-07得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
