关于Layui 响应式移动端轮播图的问题
用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 响应式移动端轮播图的问题的更多相关文章
- 使用bootstrap建立响应式网页——通栏轮播图(carousel)
1.bootstrap提供了js插件——轮播图 我们还是照旧,直接拿过来用,需要改的地方再说. 2.修改 小屏幕看小图,大屏图看大图:这个可以利用自定义属性(data-XXX)data-img-lg( ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 移动端轮播图vue-awesome-swiper
日常写设计文档,日常写Demo,写轮播图的时候觉得bootstrap不适合移动端,或者说不是轻量级的,于是换成Swiper,但是写的时候才发现怎么把这东西嵌到Vue里面啊? Σ( ° △ °|||)︴ ...
- 告别组件之教你使用原生js和css写移动端轮播图
在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...
- 移动端轮播图实现方法(dGun.js)
本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- PC 端轮播图的实现
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- Unslider – 轻量的响应式 jQuery 内容轮播插件
Unslider 是一款非常轻量的 jQuery 插件(压缩后不到3KB),能够用于任何 HTML 内容的滑动. 可以响应容器的大小变化,自动排布不用大小的滑块.可以通过整合 jQuery.event ...
- cssSlidy.js 响应式手机图片轮播
cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等. 在线实例 实例演示 使用方法 <div id="slidy-container"& ...
随机推荐
- Nginx是什么
Nginx很强大,通常作为反向代理服务器,什么是反向代理服务器?就是客户端发送请求给Nginx ,Nginx收到请求后将请求转发给真正的服务器,然后接受服务器处理的结果,最后发送给客户端.客户端以为N ...
- 《DSP using MATLAB》Problem 7.36
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
- 基于neighborhood models(item-based) 的个性化推荐系统
文章主要介绍的是koren 08年发的论文[1], 2.2neighborhood models部分内容(其余部分会陆续补充上来). koren论文中用到netflix 数据集, 过于大, 在普通的 ...
- 跟我一起安装vmware
第一步查看我们的电脑配置 我是windows10,下面的方法是windows10来安装vmware 第二步双击下图文件 (1) 2)弹出如下图,点击下一步即可. (3)一直点击下一步(期间会同意,勾选 ...
- 从github下载项目出现yes/no的选项,无法下载项目
解决办法: # 本地执行: ssh-keygen # 将id_rsa_pub文件中公钥拷贝到github上的ssh认证 oodful@:~/Volumes/Term2 :::$cat ~/.ssh/i ...
- LUOGU NOIP 2018 模拟赛 DAY1
T1 传送门 解题思路 这似乎是小学数学知识???mod 9就相当于各位之和mod 9,打表求了个逆元,等差数列求和公式就行了. #include<iostream> #include&l ...
- SDF与MDF的区别
标签: 杂谈 数据库扩展名为.sdf,是一个基于sql server compact edition的数据库文件,不需要安装SQL Server就可以用 基于服务的数据库扩展名为.mdf,是基于S ...
- DLINK 企业路由器内网部署web开启端口转发后还需要开启是否支持端口回流功能
跑后台使用的服务器,配置一般都很低,带宽只有2Mb 一些大型文件比如app的更新包使用这种服务器不可行 但是公司的网络是100Mb对等静态ip专线 所以能利用起来,每年将会省下8万块 说干就干,这个步 ...
- 视频透雾原理加视频增强Retinex算法介绍
(本文转自:http://www.syphong.cn/52-1.html#) 视频透雾原理加视频增强Retinex算法介绍 -上海凯视力成 钟建军 一. 视频增强的背景 视觉信息是人类获得外界信息的 ...
- Python爬虫笔记【一】模拟用户访问之webdriver用户登入——第三次(8)
经过post方法之后,因为有动态的value值所以再此回到用webdriver的解决上,但是在下载图片上会打开新打开一个链接,导致与网页图片不同即验证码同步问题,没办法只能想了一个笨法子,网页截图,唉 ...