首页 > 其他分享 >最简单模拟swiper功通的代码

最简单模拟swiper功通的代码

时间:2023-07-09 18:44:51浏览次数:34  
标签:box flex 功通 wrapper width swiper border 模拟

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">slider1</div>
        <div class="swiper-slide">slider2</div>
        <div class="swiper-slide">slider3</div>
        <div class="swiper-slide">slider4</div>
        <div class="swiper-slide">slider5</div>
        <div class="swiper-slide">slider6</div>
        <div class="swiper-slide">slider7</div>
        <div class="swiper-slide">slider8</div>
        <div class="swiper-slide">slider9</div>
        <div class="swiper-slide">slider10</div>
        <div class="swiper-slide">slider11</div>
        <div class="swiper-slide">slider12</div>
    </div>
</div>
<div class="navigation">
    <button onclick="prev()">Previous</button>
    <button onclick="next()">Next</button>
</div>
<script>
    x = 0;
    function prev() {
        x = x + 500;
        y = x + 'px'

        // document.querySelector('.swiper-wrapper').style = 'transition-duration: 300ms; transform: translate3d(' + y + ', 0px, 0px);'
        document.querySelector('.swiper-wrapper').style = 'transition-duration: 300ms; transform: translateX(' + y + ');'
    }
    function next() {
        x = x - 500;
        y = x + 'px'
        document.querySelector('.swiper-wrapper').style = 'transition-duration: 300ms; transform: translateX(' + y + ');'

    }
</script>
<style>
    body {
        box-sizing: border-box;
    }

    .swiper-container {
        display: flex;
        overflow: hidden;
        width: 500px;
        height: 700px;
        border: 1px solid red;
        margin: auto;
        box-sizing: border-box;
    }

    .swiper-wrapper {
        width: 100%;
        height: 100%;
        align-items: center;
        display: flex;
    }

    .swiper-slide {
        width: 500px;
        height: 700px;
        border: 1px solid green;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;


    }

    .navigation button {
        width: 100px;
    }
</style>

  

标签:box,flex,功通,wrapper,width,swiper,border,模拟
From: https://www.cnblogs.com/dming4/p/17539135.html

相关文章

  • 「NOIP 模拟赛 20230709」T3 - 与行星相会 题解
    题目大意原题有一个\(n\timesn\)的点阵,将相邻的点连边得到一个\((n-1)\times(n-1)\)的网格。\(q\)次操作,每次删掉一条边,求删掉后边两端的点是否仍在一个连通块内。强制在线。题解显然,由于对偶图的性质,原图的一个割对应对偶图中的一个环,所以只需要删掉一条边时在对偶图中......
  • lvgl PCwin系统codebook模拟
    转载地址:https://blog.csdn.net/qq_36347513/article/details/122837724一、LVGL简介LVGL(LightandVersatileGraphicsLibrary)轻量级通用型图形库,是一个免费的开源图形库,提供了创建嵌入式GUI所需的一切,具有易于使用的组件,美观的视觉效果和低内存占用等特点。支持触摸屏操作,......
  • C# httpclient获取cookies实现模拟web登录
    目前在公司做一款平台化的产品,我主要负责PC端上的开发,在产品推荐过程中为了节省开发时间很多功能模块没来得及做原生,用CEF嵌入了很多带功能web页面,与客户端进行交互从而实现功能。在二期开发中,产品需求说明书中需要把登录功能放在客户端来做,这当中涉及到一个问题客户端做登入登出......
  • 贪心&&模拟&&搜索
    贪心基于微扰证明但关系不具有传递性的贪心感觉起了个离谱的标题先看题:P2123皇后游戏既然这题像国王游戏就顺着考虑微扰贪心,对于两个大臣\(i,j=i+1\),假设现在的顺序是最优顺序,那么记\(last=c_{i-1},sum=\sum_{k=1}^{i-1}a_k\)有:\[cost_1=max\{last+b_i,sum......
  • 20230707-NOIP模拟赛(多校联训)
    20230707T1.信号传输(signal)考场思路先把这\(n+k+1\)个点都转化到平面直角坐标系上面又是没有想清楚就开始打代码(但至少比昨天好,懂得放弃)本来想的是按照x轴从左到右扫一遍每一次处理这一列上的每个点复杂度是\(O(n)\)但是后面想到有可能信号是从后面的点传送过来的所以我......
  • 冲刺国赛模拟 32
    玄学。树赛时以为\(O(mn^22^n),m=200,n=15\)拿头跑\(2s\),结果题解甚至\(m3^n\)跑过……蚌埠了。首先你发现题目要求保留边使得连通的方案数。发现这玩意和\(\ln\)长得类似,于是设\(g_S\)为一个\(m\)次多项式,\(g_{i,S}\)为\(S\)导出子图内选\(i\)条边方案,然后取......
  • 「NOIP 模拟赛 20230707」T2 - 涂照片 题解
    题目大意原题有一个\(n+1\timesm+1\)的网格。对于每一行\(i\),都要将左侧的一些格子\((i,1),(i,2),\ldots,(i,x)\)涂黑,其中\(x=k\)的概率为\(a_{i,k}\)。同理对于每一列\(j\),都要将上方的一些格子\((1,j),(2,j),\ldots,(x,j)\)涂黑,其中\(x=k\)的概率为\(b_{k,......
  • 20230706-NOIP模拟赛
    20230706T1.骰子游戏(dice)题目大意给你两个正整数\(n\)和\(d\),你需要构造\(n\)组数据,每组6个整数满足整数都在\([0,10^6]\)范围内,每组数据中两两不同,在每组数据中分别随机选一个数所得到的异或和为\(d\)的倍数如果能构造出这样的\(n\)组数据,请先输出‘Yes’,随后输......
  • STM32IO口模拟IIC时序
    正点原子IIC讲解:https://www.bilibili.com/video/BV1o8411n7o9/?spm_id_from=333.337.search-card.all.click&vd_source=e35b16eeaf19ae2b23ff9587a735ee20一、IIC总线1.物理层(1)支持多设备,一个IIC通讯总线中可以连接多个IIC设备,支持多个通讯主机及多个通讯从机;(2)两条线:双......
  • P8182 「EZEC-11」雪的魔法 / NOIP 模拟赛 20230706 D 思考--zhengjun
    引用:这是一道非常棒的思维题,可以说没有用到任何高深的知识点,却极大地考验了做题人的思维能力和创造性。本题分为两步。根据线性规划对偶或贪心,转化题意。对\(m\)根号分治,然后分别进行分治。\(m\le\sqrt{n}\)分治比较好想,\(m>\sqrt{n}\)的根号分治比较难想。这......