Corethink Development (10) Replace the official home carousel with the Html5-3d carousel

Effect:

The resources have been uploaded to my download.
http://download.csdn.net/detail/u012995856/9587206
1. Copy the resource file to the Corethink project

Corethink\application\home\view\public

2. Write the template code
Introducing JS

<block name= "Script" >  <script src= "__home_js__/jquery-1.7.2.min.js" ></script>    < Script src= "__home_js__/html5zoo.js" ></script>    <script src= "__home_js__/lovelygallery.js" > </script></block>

To replace the official carousel with this.

<block name= "Jumbotron" >    <!--Carousel--       <div class= "Pics_wrap" >           <div id= "Html5zoo-1" >               <ul class= "html5zoo-slides" style= "Display:none;" >                 <cms:slider_list name= "SL" >                       <li>                           <a href= "{$sl. URL}" target= "_blank" >                               < IMG src= "{$sl. Cover|get_cover}"/>                           </a>                       </li>                   </cms:slider_list>               </ul >           </div>       </div>       <!--carousel End--></block>

Note:
The official carousel backstage slides are all very perfect, but the foreground template is not displayed dynamically
Corethink\application\home\view\index\index.html

<extend name= "$_home_public_layout"/><block name= "title" ><title>{:c (' Web_site_title ')}-{:c (' Web_site_slogan ')}</title></block><block name= "Style" > <style type= "text/css" >/* Home slide            */#index-carousel. Jumbotron {height:500px;        padding:20px 0;        } #index-carousel. carousel-indicators {bottom:35px;        }/* Introduction to Slide 01 */. OPENCMF. title {margin-top:60px;        }. opencmf. Abstract {margin:30px 0 70px;            }. OPENCMF. Action. Btn-default {color: #fff;            Border-color: #fff;        Background:none;            }. OPENCMF. Action. Btn-default:hover,. Opencmf. Action. btn-default.active {color: #3EA9F5;        Background: #fff;        }/* Slide 02 Features */. Section-feature-slider h3 {color: #fff; }. Section-feature-slider. feature-list. Thumbnail {background:none;        border:0;            }. Section-feature-slider. feature-list. Thumbnail. cover {text-align:center;            Vertical-align:middle;            padding:20px;            Margin:auto;        Overflow:hidden;            }. Section-feature-slider. feature-list. thumbnail. fa {font-size:60px;            margin-top:15px;        Color: #fff;        }. Section-feature-slider. feature-list. Thumbnail. caption {height:60px;            }. Section-feature-slider. feature-list. Thumbnail. Caption h4 {color: #fff;            Cursor:pointer;        font-size:14px;        }/* section */. Section {padding:20px 0;        }. section H3 {margin-bottom:50px;            }/* Official module */. section-module. module-list. thumbnail {background:none;        border:1px solid Transparent; }. Section-modUle. module-list. thumbnail:hover {background:none;            border:1px solid #ddd;        Cursor:pointer;            }. section-module. module-list. Thumbnail. cover {width:100px;            height:100px;            Text-align:center;            Vertical-align:middle;            padding:10px;            border-radius:50%;            Background: #eee;            Margin:auto;        Overflow:hidden;            }. section-module. module-list. thumbnail. fa {font-size:60px;            margin-top:15px;        Color: #fff;        }. section-module. module-list. Thumbnail. caption {height:32px;            }. section-module. module-list. Thumbnail. Caption h4 {color: #727F8C;            Transition:all 1s;        font-size:14px;                } @media (max-width:768px) {/* Slide toggle */#index-carousel. carousel-indicators {            bottom:10px;  }          . opencmf. title {margin-top:10px;            font-size:20px;                }. opencmf. abstract {margin:10px 0;            font-size:12px;            }. OPENCMF. Action. btn {font-size:12px;                }/* Features */#index-carousel. Jumbotron {height:220px;            padding:10px 0;            }. section-feature-slider H3 {font-size:14px;            }. Section-feature-slider. feature-list. thumbnail {margin-bottom:5px;            }. Section-feature-slider. feature-list. Thumbnail. Cover {padding:10px 0 0 0;                }. Section-feature-slider. feature-list. thumbnail. fa {font-size:20px;                margin-top:0px;            Color: #fff; }. Section-feature-slider. feature-list. Thumbnail. caption {height:10px;                }. Section-feature-slider. feature-list. Thumbnail. Caption h4 {color: #fff;                Cursor:pointer;                font-size:12px;            Display:none;                }/* Official module */. section-module. module-list. Thumbnail. cover {width:80px;                height:80px;            padding:10px;                }. section-module. module-list. thumbnail. fa {font-size:30px;                margin-top:15px;            Color: #fff;            }/* section */. Section {padding:0px 0;            }. section H3 {margin-bottom:15px; }} </style></block><block Name= "Jumbotron" > <!--Carousel--<div class= "Pics_w Rap "> <div id=" html5zoo-1 "> <ul class=" html5zoo-slides "style=" Display:none; "                 ><cms:slider_list name= "SL" > <li> <a href= "{$sl. URL}" target                       = "_blank" >  </a> </li> </cms:slider_list> </ul> </div&       Gt </div> <!--carousel End--></block><block name= "main" > <div class= "section section-module" &G        T <div class= "Container" > 
　
Corethink Development (10) Replace the official home carousel with the Html5-3d carousel