用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. 深入浅出 Java Concurrency (29): 线程池 part 2 Executor 以及Executors[转]

    Java里面线程池的顶级接口是Executor,但是严格意义上讲Executor并不是一个线程池,而只是一个执行线程的工具.真正的线程池接口是ExecutorService. 下面这张图完整描述了线程 ...

  2. 滚动字幕标记<marquee></marquee>

    <marquee>滚动内容</marquee> 常用属性: Direction : 滚动方向 取值 up, down left right width  :滚动宽度 heigh ...

  3. apache+flask部署

    wsgi方式 1.安装apache 1.解压httpd并进行安装 # tar zxvf httpd-2.2.15.tar.gz # cd httpd-2.2.15    # ./configure - ...

  4. iOS开发系列-SQLite

    概述 SQLite3是一款轻型的嵌入式数据库.它占用资源非常低,在嵌入式设备中,可能只需要几百K的内存就够了.它的处理速度比Mysql.PostgreSQL这两款著名的数据库速度还快. 数据库简介 常 ...

  5. 深度残差网络——ResNet学习笔记

    深度残差网络—ResNet总结 写于:2019.03.15—大连理工大学 论文名称:Deep Residual Learning for Image Recognition 作者:微软亚洲研究院的何凯 ...

  6. 【心无旁骛】vuex-simple

    这个算是一个小的demo嘛,先放上开源github地址:https://github.com/sascha245/vuex-simple 倒是可以先看下效果 呃呃,因为这个项目所在的目录与平时我们一般 ...

  7. [转]基于MefBootstrapper的Bootstrapper

    public class Bootstrapper : MefBootstrapper    {        ModuleCatalog moduleCatalog; protected overr ...

  8. 第四章 Odoo 12 开发之模块继承

    Odoo 的一个强大功能是无需直接修改底层对象就可以添加功能.这是通过其继承机制来实现的,采取在已有对象之上修改层来完成.这种修改可以在不同层上进行-模型层.视图层和业务逻辑层.我们创建新的模块来做出 ...

  9. Coursera ML笔记 - 神经网络(Representation)

    前言 机器学习栏目记录我在学习Machine Learning过程的一些心得笔记,涵盖线性回归.逻辑回归.Softmax回归.神经网络和SVM等等,主要学习资料来自Standford Andrew N ...

  10. 记一次server 2008 R2的按装过程

    项目上一直在用的dell务器在去年年底突然出现系统过期,导致c盘的东西全部丢失.我们用激活工具激活,还是没能找回丢失的东西. 为了装这个系统,跟同事一起折腾了好些次,最后发现安装服务器的时候有个磁盘阵 ...