用layui做轮播图,在手机上宽度异常, 可通过以下方法解决, 不喜欢layui的同学可以选择Swiper

  // 轮播图
layui.use('carousel', function () {
var carousel = layui.carousel;
carousel.render({
elem: '#banner',
width: '100%', //设置容器宽度
height: '100%',
arrow: 'always', //始终显示箭头
indicator: 'none',
//,anim: 'updown' //切换动画方式
});
}); // 响应式轮播图
window.onload = function () {
var bannerH = $('#banner img')[0].height;
$('.layui-carousel').css('height',bannerH+'px');
}

根据自己元素的id做对应的修改

关于Layui 响应式移动端轮播图的问题的更多相关文章

  1. 使用bootstrap建立响应式网页——通栏轮播图(carousel)

    1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...

  2. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  3. 移动端轮播图vue-awesome-swiper

    日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...

  4. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  5. 移动端轮播图实现方法(dGun.js)

    本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...

  6. 原生JS实现移动端轮播图

    功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...

  7. PC 端轮播图的实现

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  8. Unslider – 轻量的响应式 jQuery 内容轮播插件

    Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...

  9. cssSlidy.js 响应式手机图片轮播

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...

随机推荐

  1. hibernate使用truncate清空表 截断表

    public void truncateTable(Session session, String tableNameInDb) { String sql = " truncate tabl ...

  2. Spring Cloud Config-Client 无法获取 Config-Server 在 github 上的配置文件的属性值,竟然是因为

    Spring Cloud Config-Client 无法获取 Config-Server 在 github 上的配置文件的属性值,竟然是因为!!! 2018年07月23日 16:33:25 一颗很菜 ...

  3. WPF+MVVM+EF示例1

    实现了那些功能,先看看效果图: 项目工程目录: 接下来开始具体的步骤: 第一步:在VS中新建工程 第二步:使用NuGet 安装EntityFramework 第三步:使用NuGet 安装EntityF ...

  4. 牛客NOIP暑期七天营-提高组6

    目录 A-积木大赛 题目描述 link 题解 代码 B-破碎的序列 题目描述 link 题解 C-分班问题 题目描述 link 题解 比赛链接 官方题解 A-积木大赛 题目描述 link 题解 标签: ...

  5. Luogu P3209 [HNOI2010]平面图判定(2-SAT)

    P3209 [HNOI2010]平面图判定 题意 题目描述 若能将无向图\(G=(V,E)\)画在平面上使得任意两条无重合顶点的边不相交,则称\(G\)是平面图.判定一个图是否为平面图的问题是图论中的 ...

  6. (补充)10.Hibernate框架的查询方式

    技术分析之Hibernate框架的查询方式 1. 唯一标识OID的检索方式 * session.get(对象.class,OID) 2. 对象的导航的方式 3. HQL的检索方式 * Hibernat ...

  7. HZOI20190822模拟29题解

    题面:https://www.cnblogs.com/Juve/articles/11396238.html 下面开始一句话题解: A:爬山: 二分答案,check即可 #include<ios ...

  8. HZOI20190819模拟26题解

    题面:https://www.cnblogs.com/Juve/articles/11376806.html A. 嚎叫响彻在贪婪的厂房: 是时候学习一下map和set的用法了...... 贪心:区间 ...

  9. QEventLoop配合QTimer实现阻塞任务超时处理

    A阻塞主线程正常运行,需要做特殊处理. 以下代码可实现,A阻塞或者正常处理时,均不阻塞主线程正常处理. QEventLoop eventloop; // use point to manage eve ...

  10. JS的同步和异步加载

    引言 JS的“加载”不能理解为下载,它是分为两个部分:下载,执行.默认的JS加载是同步的,因为浏览器需要一个稳定的DOM结构,而执行JS时可能会对DOM造成改变,所以在执行JS时一定会阻塞HTML的渲 ...