新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效

这是一款基于owl-carousel的卡片水平轮播展示特效。该卡片轮播展示特效可以通过前后导航按钮来切换卡片，它是响应式设计，在手机等小屏幕设备上，会自动调节为只展示一个卡片。

使用方法

在页面中引入bootstrap.css和style.css文件，以及jquery和owl.carousel.min.css和owl.carousel.min.js文件。

HTML结构

该卡片水平轮播展示特效的基本的使用方法如下：

标题

描述信息

......

Javascript

在页面DOM元素加载完毕之后，通过下面的方法来初始化owl-carousel插件。

$(function(){

$('.mhn-slide').owlCarousel({

nav:true,

//loop:true,

slideBy:'page',

rewind:false,

responsive:{

0:{items:1},

480:{items:2},

600:{items:3},

1000:{items:4}

smartSpeed:70,

onInitialized:function(e){

$(e.target).find('img').each(function(){

if(this.complete){

$(this).closest('.mhn-inner').find('.loader-circle').hide();

$(this).closest('.mhn-inner').find('.mhn-img').css('background-image','url('+$(e.target).attr('src')+')');

}else{

$(this).bind('load',function(e){

$(e.target).closest('.mhn-inner').find('.loader-circle').hide();

$(e.target).closest('.mhn-inner').find('.mhn-img').css('background-image','url('+$(e.target).attr('src')+')');

});

}

});

navText:['','']

});

新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效相关推荐

新闻分页循环图片左右滚动代码html,jQuery响应式触屏图片左右滚动代码owl.carousel...
这是一款基于owl.carousel.js和jquery-1.9.1.min.js实现的响应式左右滚动代码,自适应屏幕大小,响应式设计,完美兼容PC端和手机移动设备,支持触屏滑动效果,支持点击按钮切换 ...
css使图片有3d效果,利用CSS3实现3D倾斜视差图片展示特效
特效描述:利用CSS3实现 3D倾斜视差图片展示特效.利用CSS3实现3D倾斜视差图片展示特效代码结构 1. HTML代码 Movies Popular Princess Mononoke Sp ...
Owl Carousel轮播插件介绍
Owl Carousel:Basic Demo | Owl Carousel | 2.3.4 (owlcarousel2.github.io) 「Owl Carousel」插件常用的参数配置如下: 参 ...
基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览源码下载实现的代码: <div id= ...
html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法
本文实例为大家全面的解析了Bootstrap中Carousel的使用方法,供大家参考,具体内容如下源码文件: Carousel.scss Carousel.js 实现原理: 隐藏所有要显示的元素,然 ...
强大的jQuery焦点图插件Owl Carousel + 响应式图片（案例解析）
GitHub地址:https://github.com/OwlCarousel2/OwlCarousel2 在各式各样的网站中,都能看到焦点图插件的身影. 一个好的焦点图插件必须满足以下特点:1. 支 ...
owl.carousel.js深入使用
"owl.carousel.js" 一个jquery的幻灯片插件. 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏 ...
html轮播图速度加快,jQuery按需加载轮播图(web前端性能优化)
引言关于幻灯轮播图,想必大家都不陌生,尤其是基于 jQuery 的,插件.代码网上一搜一大堆,但是真正符合自己需求的几乎没有,所以我要打造一个符合自身需求,经得起广大网民考验的 jQuery 轮播图 ...
9款基于CSS3 Transitions实现的鼠标经过图标悬停特效
之前给大家分享了很多css3实现的按钮特效.今天给大家分享9款基于CSS3 Transitions实现的鼠标经过图标悬停特效.这款特效适用浏览器:360.FireFox.Chrome.Safari.O ...

新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效

标题

新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效相关推荐

最新文章

热门文章