Swiper loop Mobile bug - Codes Helper - Programming Question Answer

Swiper loop Mobile bug

 var mySwiper = new Swiper(".swiper-container", {
        slidesPerView: 5,
        spaceBetween: 20,
        speed: 1000,
        autoplay: {
            delay: 800,
            stopOnLastSlide: false,
            disableOnInteraction: false,
        },
        loop: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
 var windowW = $(window).width();
    if (windowW <= 768) {
        console.log("cccc")
        mySwiper = new Swiper(".swiper-container", {
            speed: 1000,
            autoplay: {
                delay: 800,
                stopOnLastSlide: false,
                disableOnInteraction: false,
            },
            loop: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    }
    $(window).resize(function () {
        myChart1.resize();
        myChart2.resize();
        var windowW = $(window).width();
        if (windowW <= 768) {
            console.log("aa")
            mySwiper.destroy(false);
            mySwiper = new Swiper(".swiper-container", {
                speed: 1000,
                autoplay: {
                    delay: 800,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        }
        else {
            console.log("bb")
            mySwiper.destroy(false);
            mySwiper = new Swiper(".swiper-container", {
                slidesPerView: 5,
                spaceBetween: 20,
                speed: 1000,
                autoplay: {
                    delay: 800,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        }
    });

Mar.04,2021

if you don't say the version, just press the latest version.

  official documents .



Previous: Can the getFieldDecorator of ant design's Form component bind two components with one id?
Next: The export function of impression notes will export different types of files to disk, how to control that only html files can be written to disk, and other types of files can be dropped by Filter







Swiper multi-row and multi-column layout sorting problem

swiper 23 8
but all I want is to turn the page instead of sliding to the end of the element
or is there any good plug-in that slides through the page
...


Swiper.js
javascript
css


Mar.02,2021




Vue-awesome-swiper, can be rotated, but the swiper-pagination is empty and there is no paging effect. What is the reason?

vue-awesome-swiper, can be used in vue, but the swiper-pagination is empty and there is no paging effect. < div data-v-5818899c= " " class= "swiper-pagination " > < div >
< swiper: options= "swiperOption " ref= "mySwiper " >
<!-- slides --...


Pagination
swiper.js
vue.js


Mar.04,2021




Multiple swiper on a page (the same instance), hope to slide one, the other Synchronize can also slide, how to achieve?

the code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo< title>
<!-- Link Swiper s CSS -->
<link rel="stylesheet" href...


Swiper.js


Mar.04,2021




Use swiper in vue2.0 without carousel

1.npm install swiper@3.4.1-- save-dev installs the swiper dependency package 2.import Swiper from swiper ; references dependencies on the page, and the node has loaded images, but the page does not display
domcreated
page display is blank, ther...


Swiper.js
vue.js


Mar.05,2021




When using zepto.js to slide left and right, it conflicts with using swiper.js slide to switch between left and right. How to slide the slide first and then slide to the next page when switching between slides and slides?

uses zepto.js sliding left and right on full screen. One screen includes slide switch, which is also slide left and right. Using swiper.js, when sliding slide image switch, it slides directly to the next screen. How to let the left and right slide of sw...


Swiper.js
zepto.js


Mar.05,2021




The problem of using swiper in vue
 when you use vue-awesome-swiper to make a rotation picture on the mobile end to get a picture from to the background, when the last picture is switched to the second picture instead of the first , Baidu has a way to initialize swiper after getting data...


Swiper.js
vue.js


Mar.06,2021




Swiper's broadcast picture cannot be dragged to the third picture in angular 5.
 sliders in the carousel chart is uncertain. The data is retrieved from the api API, but there is a delay in data retrieval. I use setTimeout to simulate calling api , and then use setTimeout to update the swiper instance. problem: the broadcast...


Swiper.js
angular5


Mar.07,2021




Vue uses swiper to enter through router-link, refresh the page and then move, how to solve it? Or tell me how to refresh the page every time I enter a route.

vue uses swiper to enter through router-link, and typesetting is not correct, as shown in figure
.
Why?
Code: the code can be downloaded from Baidu s online disk: https: pan.baidu.com s 1ImGg..
<!DOCTYPE html>
<html lang="en"...


Vue.js
vue-router
swiper.js


Mar.08,2021




The swiper carousel component is introduced into vue-cli. When the carousel is turned on, the first picture always flashes by.

I am a globally introduced swiper component, which is normal before auto-rotation is enabled, but after it is enabled. I found a mistake. It s normal until the last one, but when it comes to the last one, it seems to take a little longer, and then the ...


Broadcast-picture
swiper.js
vue-cli


Mar.10,2021




The mixture of box-shadow and swiper has a blank space of one pixel.
 use swiper to do a rotation on the h5 page, add shadow effect, slide to the left to appear a pixel of blank, remove the shadow effect [change the projection margin to 0 is still blank], there will be no blank http: www.lagrandeimage.com.....


Swiper.js
css3


Mar.11,2021




Swiper slides Grid cannot loop??

cannot loop?? with slides Grid
var swiper = new Swiper( .adviser-list .swiper-container , {
autoplay: true,
loop : true,
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 10,
navigation: {
...


Swiper.js
html


Mar.11,2021




Vue quotes the swiper plug-in to report an error

use the swiper plug-in to put js into stat and quote the Times incorrectly. I made this mistake after I installed it with npm. Excuse me, what s going on? The mistake of Zongbao
error as shown in the figure!
...


Es6
swiper.js
vue.js
javascript


Mar.12,2021




Unknown custom element: < swiper > problem occurs after Vue uses Swiper

Vue has a Unknown custom element: < swiper > problem after using Swiper
error code icon
the program code goes like this:
main.js
import Vue from vue
import App from . App
import router from . router
import axios from axios
i...


Swiper.js
vue.js


Mar.17,2021




How does vue-awesome-swiper force the second initialization?

attach code:
swiperOption: {
notNextTick: true,
autoplay: false,
direction: horizontal ,
setWrapperSize: true,
autoHeight: true,
centeredSlides: true,
paginationClickable: true,
navigation: {
nextEl: .s...


Swiper.js
vue.js


Mar.18,2021




The problem that vue-awesome-swiper is affected by width
 Why are there so many blanks at the end of the click? Is it because I set the width. What to do with it. My vue-awesome-swiper plug-in ...


Javascript
vue.js
swiper.js


Mar.18,2021




What is the problem of swiper4 incompatibility under ie?

error
have you met anyone? How to solve it?
...


Swiper.js


Mar.22,2021




The problem of using swiper in vue-cli

the part of swiper is v-for, but it only works for the swiper of the first option, and the swiper of other loops does not work. How to solve this problem?
<template>
<div class="content clearfix">
<div class="leftBar...


Vue.js
swiper.js


Mar.22,2021




Mini Program, developed by wpvue, the sliding page around swiper does not load.

the event of WeChat Mini Programs s component swiper: bindchange, is written directly in mpvue like the following, and will not be triggered, why?
<swiper class="content_top weui-article" :current=currentTab @bindchange="switchTab&q...


Swiper.js
WeChat-Mini-Programs


Mar.23,2021




Initialslide is not valid in swiper
 if the slidesPerView I set is 1.2, the initialslide initializer will not take effect. If you comment out the slidesPerView, the setting of the initialslide will take effect. I need both of these attributes. How to solve the problem ?...


Javascript
swiper.js


Mar.24,2021




Use error report 'Can't find variable: Dom7' after npm install swiper

vue using swiper
import Swiper from swiper ;
methods: {
__init_swiper: function () {
let swiper = new Swiper( -sharpswiper_container , {
autoplay: {
disableOnInteraction: false,
delay: ...


Javascript
swiper.js


Mar.24,2021






False


Django, Why does the system automatically generate an empty session? every time the request is made?


Use python to convert dict1 to dict2, in the example. I tried for a long time but couldn't find a solution.


How to self-start the php-fpm service when building a LNMP environment with docker?


Can an array in react state be bound to a dom state using an element in the array?


Wechat browser version 6.6.5 cannot prevent the springback of pull-up and drop-down to the top under ios system.


In express+hbs, how do you define the routed data as a variable on the page?


How to use symbol reference of Iconfont in dva


How to elegantly add data to JSON objects?


Using node to build video streaming server


The proportional width of the echarts graph is inconsistent.


React uses axios to call the background data. After success, how to jump to the page based on the returned value?


I don't understand what a linux command means. Please explain it.


Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.


Running nodejs reports fewer errors ")"



css
mysql
arrays
josn
react
html
typescript
webpack
npm
sass
R
objective-c
.net
sql-server
jquery
python-3.x
angularjs
django
angular
excel
regex
iphone
ajax
linux
xml
pandas
vba
spring
database
wordpress
string
wpf
xcode
windows
bash
postgresql
oracle
multithreading
eclipse
list
firebase
algorithm
macos
forms
image
scala
visual-studio
azure
bootstrap
spring-boot
react-native
python-2.7
docker
performance
function
winforms
matlab
powershell
apache
dataframe
api
sqlite
numpy
rest
shell
selenium
flutter
dart
maven
loops
qt
swing
android-studio
csv
express
file
class
tensorflow
sorting
codeigniter
perl



Vue init webpack my-project reported an error?


How to set input to get focus state by default in nuxt framework


Swoole compilation error prompts unknown type name 'swBuffer_trunk'


Vrrp_scrpt script is not executed in keepalived


Svg conversion font file, the display is not complete?




© 2021 CodesHelper


Advertising
Contact us
About us


Menu