FlexSlider是一个轻量级的jQuery内容滚动插件,压缩后只有4KB大小。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。它是将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制
安装很简单最总要是jquery版本的问题,花的点时间LIGHTBOX使用的 版本是1.3而FLEXSLIDER却是1.9该列的版本兼容问题,还好上网找的一个就有一大堆的方法搞定,也顺便贴出我的模板文件,做下记录,编辑default.html模板文件
<!-- Arquivos utilizados pelo jQuery lightBox plugin --> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" media="screen" /> <!-- Ativando o jQuery lightBox plugin --> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); $('a[rel*=lightbox]').lightBox(); }); </script> <!-- flexslider.js --> <link rel="stylesheet" href="/css/flexslider.css" type="text/css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> var jq = jQuery.noConflict(); </script> <script src="/js/jquery.flexslider.js"></script> <script type="text/javascript"> jq(window).load(function() { jq('.flexslider').flexslider({ animation: "slide" }); }); </script> <script src="/js/jquery.scrollUp.js"></script> <script type="text/javascript"> jq(function(){ jq.scrollUp(); }); </script>
然后把修改下css就可以看到效果了.