Tut được làm theo yêu cầu của 1 bạn trên VXF
- Compatible (tương thích):
- XenForo 1.0
- XenForo 1.1
- XenForo 1.2
- XenForo 1.3
www.angiang.net slide logo mini by carousel
Demo:
+ http://angiang.net
+ http://quangcaoangiang.net
Bước 1. upload file file trong thư mục upload lên host chứa xenforo
Bước 2. tạo 2 template: carousel và carousel.css
Vào AdminCP -> Appearance -> Templates -> create new template:
Template: carousel
Template: carousel.cssMã:<div style="margin: 5px 0px;"> <xen:require css="carousel.css" /> <script src="js/slidelogomini/jquery.flexisel.js"></script> <ul id="flexiselDemo3"> <li><img src="js/slidelogomini/logo3_white.png" /></li> <li><img src="js/slidelogomini/your_logo_here.png" /></li> <li><img src="js/slidelogomini/logo3_white.png" /></li> <li><img src="js/slidelogomini/your_logo_here.png" /></li> <li><img src="js/slidelogomini/logo3_white.png" /></li> <li><img src="js/slidelogomini/your_logo_here.png" /></li> </ul> <div class="clearout"></div> <script type="text/javascript"> $(window).load(function() { $("#flexiselDemo1").flexisel(); $("#flexiselDemo2").flexisel({ enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); $("#flexiselDemo3").flexisel({ visibleItems: 6, animationSpeed: 1000, autoPlay: true, autoPlaySpeed: 3000, pauseOnHover: true, enableResponsiveBreakpoints: true, responsiveBreakpoints: { portrait: { changePoint:480, visibleItems: 1 }, landscape: { changePoint:640, visibleItems: 2 }, tablet: { changePoint:768, visibleItems: 3 } } }); $("#flexiselDemo4").flexisel({ clone:false }); }); </script> </div>
Bước 3. chèn template vào nơi bạn cần bằng 2 cách sau:Mã:.clearout { height:0px; clear:both; } #flexiselDemo1, #flexiselDemo2, #flexiselDemo3 { display:none; } .nbs-flexisel-container { position:relative; max-width:100%; } .nbs-flexisel-ul { position:relative; width:9999px; margin:0px; padding:0px; list-style-type:none; text-align:center; } .nbs-flexisel-inner { overflow:hidden; float:left; width:100%; background:#fcfcfc; background: #fcfcfc -moz-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* FF3.6+ */ background: #fcfcfc -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#eee)); /* Chrome,Safari4+ */ background: #fcfcfc -webkit-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Chrome10+,Safari5.1+ */ background: #fcfcfc -o-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* Opera11.10+ */ background: #fcfcfc -ms-linear-gradient(top, #fcfcfc 0%, #eee 100%); /* IE10+ */ background: #fcfcfc linear-gradient(top, #fcfcfc 0%, #eee 100%); /* W3C */ border:1px solid #ccc; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; } .nbs-flexisel-item { float:left; margin:0px; padding:0px; cursor:pointer; position:relative; line-height:0px; } .nbs-flexisel-item img { width: 100%; cursor: pointer; position: relative; margin-top: 10px; margin-bottom: 10px; max-width:100px; max-height:45px; } /*** Navigation ***/ .nbs-flexisel-nav-left, .nbs-flexisel-nav-right { width: 22px; height: 22px; position: absolute; cursor: pointer; z-index: 100; opacity: 0.5; } .nbs-flexisel-nav-left { left: 10px; background: url(js/slidelogomini/button-previous.png) no-repeat; } .nbs-flexisel-nav-right { right: 5px; background: url(js/slidelogomini/button-next.png) no-repeat; }
1. Tạo widget [Advanced] Template (without wrapper)
với template carousel
2. dùng đoạn code sau để chèn:
Bước 4. Thay hình ảnh logo và thêm link trong template carousel theo ý bạn.Mã:<xen:include template="carousel" />
DONE.
Official Slide logo mini by carousel (responsive) 1.1
carousel,slide logo mini, angiang.net
Recent Updates
comments powered by Disqus