swiper 向右滑动出现空白解决方案

￡神魔★判官ぃ 2024-04-17 19:32 16阅读 0赞

样式：

<style>
            .cesi1 {
                width: 29.2rem;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-wrap: nowrap;
                -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
                text-align: center;
                font-size: 18px;
                background: #fff;
            }
    
            .cesi {
                margin-top: .37333rem;
                width: 100%;
    			max-width: 1200px;
                overflow: hidden;width:100%;
            }
    
            .swiper-slide {
                margin-left: .4rem;
            }
        </style>

html:

<div class="swiper-container cesi">
                                <div class="swiper-wrapper cesi1">
                                    <div class="swiper-slide"><img data-v-f7061682="" src="./img/download-step1.7faab633.png"></div>
                                    <div class="swiper-slide"><img data-v-f7061682="" src="./img/download-step2.5ae566c1.png"></div>
                                    <div class="swiper-slide"><img data-v-f7061682="" src="./img/download-step3.ce045aec.png"></div>
                                    <div class="swiper-slide"><img data-v-f7061682="" src="./img/download-step4.383f5c6a.png"></div>
                                    <div class="swiper-slide"><img data-v-f7061682="" src="./img/download-step5.302e24c9.png"></div>
                                </div>
                            </div>

js:

<script>
            var swiper1 = new Swiper('.swiper-container',{
    			calculateHeight:true,
    			cssWidthAndHeight:true,
    			on:{
    				touchEnd:function(event){
    					console.log(this.getTranslate());
    					if(this.getTranslate()<=-800)
    					{
    						console.log(this.getTranslate());
    						this.setTranslate(-800);
    					}
    					
    				},        
    			
    			}
    		})
        </script>

[mySwiper.getTranslate()][mySwiper.getTranslate]  
[mySwiper.setTranslate(translate)][mySwiper.setTranslate_translate]

[mySwiper.getTranslate]: https://www.swiper.com.cn/api/methods/116.html
[mySwiper.setTranslate_translate]: https://www.swiper.com.cn/api/methods/117.html

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 swiper 向右滑动出现空白解决方案

式： <style> .cesi1 { width: 29.2rem; ...

￡神魔★判官ぃ/ 2024年04月17日 19:32/ 0 赞/ 17 阅读

相关 swiper反向滑动

swiper一直都是比较喜欢的一个插件，不管是设计还是我自己，都习惯了默认的向左滑动。今天客户要求必须向右，找了半天，终于找到了相应的参数。 direction

亦凉/ 2022年12月18日 09:55/ 0 赞/ 460 阅读

相关解决github访问出现空白页面

最近一段时间发现github访问不了了。当时没在意，认为过几天就可以，我用手机uc浏览器访问发现能够正常访问。但是电脑谷歌浏览器访问发现访问不了，起初我试一下翻墙访

傷城~/ 2022年12月17日 12:59/ 0 赞/ 582 阅读

相关 swiper 快速左右滑动出现自动不停地抖动的BUG

<template> <view class="content"> <view class="nav"> <view :class=

青旅半醒/ 2022年11月25日 04:09/ 0 赞/ 297 阅读

相关向右滑动返回上一界面

- (void)viewDidLoad { [super viewDidLoad]; // 获取系统自带滑动手势的target对

今天药忘吃喽~/ 2022年09月29日 05:21/ 0 赞/ 111 阅读

相关 swiper禁止手动滑动

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6uICDlhYk_size_20_colo

清疚/ 2022年09月15日 14:56/ 0 赞/ 229 阅读

相关 swiper实现触摸滑动

引入需要的文件 <link href="css/swiper.min.css" rel="stylesheet" type="text/css"

骑猪看日落/ 2022年08月05日 02:43/ 0 赞/ 246 阅读

相关左右滑动swiper

转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml <view class="sw

谁践踏了优雅/ 2022年06月01日 11:58/ 0 赞/ 292 阅读

相关 swiper滑动及动画特效

Swiper基本使用方法：一、加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。二、HTML内容。（我是基于angular1.x）

小咪咪/ 2022年05月16日 02:35/ 0 赞/ 510 阅读

相关 swiper的图册滑动效果

首先，我们要做的效果是这样子的！！~~ ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

柔情只为你懂/ 2022年04月04日 12:25/ 0 赞/ 381 阅读