swiper

ios 9 mobile safari has a blinking bug with transform scale3d and translate3d

由 家住魔仙堡 提交于 2019-12-01 17:36:00
I've developed the menu of the mobile website: http://famosos.globo.com/ (click the burger icon on the bottom of the page) Its a carousel of brands using swiper 3.0.8, when you swipe to any direction on ios 9 safari the brands keep blinking. I found out that it's because i use transform: scale3d (also happens with normal transform: scale) while the translate3d of swiper happens. I've tried using preserve-3d and backface-visibility tricks, but it still keeps blinking when you swipe. I've tried to isolate the swiper and scale code on this codepen: http://codepen.io/guilhermebruzzi/pen/BoKovN but

Vue-Awesome-Swiper实现缩略图控制循环,循环背景图，显示多图轮播，点击左右滚动一张图

由 半世苍凉 提交于 2019-12-01 16:39:29
效果图： 本姐只展示关键代码哈 上代码：网站有完整代码，但是数据不是循环的。 https://surmon-china.github.io/vue-awesome-swiper/ 循环数据的代码在此： <template> <!-- swiper1 --> <div class="top" style="height: 340px; width: 340px"> <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop"> <swiper-slide class="slide-1" style="height: 340px; width: 340px" v-for="(item,index) in msg" :key="index" :style="item.icon" > <!-- <pic-zoom :url="" :scale="3"></pic-zoom> --> </swiper-slide> </swiper> </div> <!-- swiper2 Thumbs --> <div class="swiper" style="height: 340px; width: 340px" > <swiper :options="swiperOptionThumbs" class="gallery

ios 9 mobile safari has a blinking bug with transform scale3d and translate3d

由 浪子不回头ぞ 提交于 2019-12-01 16:29:51
问题 I've developed the menu of the mobile website: http://famosos.globo.com/ (click the burger icon on the bottom of the page) Its a carousel of brands using swiper 3.0.8, when you swipe to any direction on ios 9 safari the brands keep blinking. I found out that it's because i use transform: scale3d (also happens with normal transform: scale) while the translate3d of swiper happens. I've tried using preserve-3d and backface-visibility tricks, but it still keeps blinking when you swipe. I've tried

工作遇到的问题之 -- mpvue写小程序

由 末鹿安然 提交于 2019-12-01 16:29:43
如何使用mpvue做小程序，引入公共的common.css 随意在目录下建一个common.css文件，然后再App.vue中以import的形式 引入； ====》App.vue中 实现轮播图 使用微信小程序默认的swiper swiper组件<template> <swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" :circular="circular"> <block v-for="(item, index) in images" :key="index"> <swiper-item> <image :src="item.url" class="slide-image" mode="aspectFill"/> </swiper-item> </block> </swiper> </template> <script> export default { props: { images: { type: Array } }, data() { return { indicatorDots: true, autoplay: true, circular:true, interval: 3000,

swiper custom pagination only slides once

由 心不动则不痛 提交于 2019-12-01 00:37:55
I made a very simple image slider with swiper then added custom pagination using swiper's "paginationCustomRender" jQuery and data attributes it generates the pagination just fine and everything works when sliding but its not clickable so I added a small function to tell my slider to "slideTo()" the targeted slide when one of the labels in the pagination is clicked but it only works once and then the function will not start again. I've searched and from what I found out most people didn't use swiper's builtin options and made it themselves so I was wondering what should I do and what is the

使用swiper实现轮播图

由 十年热恋 提交于 2019-11-30 19:49:34
上代码前先记得导包: https://www.cnblogs.com/zeng1997/p/11607991.html 　　这里面有教程 话不多说直接上代码： <%-- Created by IntelliJ IDEA. User: admin Date: 2019/10/8 Time: 21:07 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <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 Swiper's CSS --> <link rel="stylesheet" href="<%=request.getContextPath()%>/swiper/swiper.min.css"> <!-- Demo styles --> <style>

swiper custom pagination only slides once

由 ﹥＞﹥吖頭↗ 提交于 2019-11-30 19:42:15
问题 I made a very simple image slider with swiper then added custom pagination using swiper's "paginationCustomRender" jQuery and data attributes it generates the pagination just fine and everything works when sliding but its not clickable so I added a small function to tell my slider to "slideTo()" the targeted slide when one of the labels in the pagination is clicked but it only works once and then the function will not start again. I've searched and from what I found out most people didn't use

H5制作显示轮播图的方法Swiper

由 痞子三分冷 提交于 2019-11-30 16:01:20
1、需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css"> <script src="https://unpkg.com/swiper/js/swiper.js"> </script> <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script> 2、轮播图的html结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in swiperImgList"> <img :src="item" alt=""> </div> </div> <div class="swiper-pagination"></div> </div> .swiper-pagination-bullet { // 小圆点未激活的css background: #fff !important

时间轴（自定义）

由 落花浮王杯 提交于 2019-11-30 03:20:59
先上效果图： 项目中要求做成上面的效果，在swiper官网找了一下找到类似的，但是起始位置在中间，没办法，只能自己动手借用swiper的css（刚开始用swiper写的，有些样式懒得改。。。）做出自己想要的效果（细节方面没做好不要介意，手动捂脸！） html： <div id="big"> <div class="swiper-container"> <div class="swiper-wrapper"> </div> </div> </div> <div id="left"> <div class="leftTitle"> </div> </div> css： <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> .swiper-container{ position: relative; width: 90%; height: 36px; /* margin: 50px auto; */ padding: 48px 0 6px 0; } .swiper-wrapper{ /* width: 100%; */ left: 0; /* float: left; */ /* white-space:nowrap; */ padding-left: 36px; /* border:1px red

小程序画布海报切换

由 白昼怎懂夜的黑 提交于 2019-11-30 01:38:34
先送上效果图，可手势左右滑动 <!--wxml页面--> <view bindtap="changeYL">点击分享</view> <!--弹出页面代码--> <view class="modal-mask1" bindtap="hideModal" wx:if="{{showModal}}"></view> <view class="modal-dialog1" wx:if="{{showModal}}"> <view class='swiper'> <swiper indicator-dots="{{false}}" autoplay="{{false}}" circular="true" previous-margin="{{'140rpx'}}" next-margin="{{'140rpx'}}" bindchange="swiperChange"> <block wx:for="{{imgUrls}}" wx:key="{{index}}"> <swiper-item> <image src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/> <!-- <canvas canvas-id="mycanvas" class="canvas"></canvas> --> <
订阅 swiper