用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. 数据库DSN是什么

    数据库建立好之后,要设定系统的 DSN(数据来源名称),才能让网页可以知道数据库所在的位置以及数据库相关的属性.使用DSN的好处还有,如果移动数据库档案的位置,或是换成别种类型的数据库,只要重新设定 ...

  2. iOS开发自定义转场动画

    1.转场动画 iOS7之后开发者可以自定义界面切换的转场动画,就是在模态弹出(present.dismiss),Navigation的(push.pop),TabBar的系统切换效果之外自定义切换动画 ...

  3. neo4j 实战、实例、示例 创建电影关系图 -1

    1. 创建关系 因为代码占篇幅太大,创建整个"电源关系图"的代码在文章最下方. 2. 简单分析创建语句 2.1 创建电影节点 CREATE (TheMatrix:Movie {ti ...

  4. 【机器学习】机器学习入门01 - kNN算法

    0. 写在前面 近日加入了一个机器学习的学习小组,每周按照学习计划学习一个机器学习的小专题.笔者恰好近来计划深入学习Python,刚刚熟悉了其基本的语法知识(主要是与C系语言的差别),决定以此作为对P ...

  5. Spring Cloud Eureka 使用外网IP和端口号进行服务注册

    应用场景如下: 服务提供方(即要注册到服务中心的服务)的内网地址,外界无法访问(或者使用docker等做了应用端口等的配置),做了IP映射后,公网IP49.10.22.106映射到服务提供方的内网ip ...

  6. HBase+Redis

  7. 提示框插件layer的使用讲解

    官方网站:http://layer.layui.com/ 在页面中引入: <script src="js/layer-v3.0.3/layer/layer.js">&l ...

  8. charles for https

    To remotely capture http or https traffic with charles you will need to do the following: HOST - Mac ...

  9. SDF与MDF的区别

    标签: 杂谈   数据库扩展名为.sdf,是一个基于sql server compact edition的数据库文件,不需要安装SQL Server就可以用 基于服务的数据库扩展名为.mdf,是基于S ...

  10. 63 搜索旋转排序数组II

    原题网址:https://www.lintcode.com/problem/search-in-rotated-sorted-array-ii/description 描述 跟进“搜索旋转排序数组”, ...