Question

jQuery Revolution Slider在您第一次加载网站时起作用，但只要您导航到另一条路线并返回到主页/索引（滑块位置），它就会打破滑块。

<script type='text/x-handlebars' data-template-name='application'>
            <nav class='navbar navbar-default navbar-fixed-top' role='navigation'>
                <div class='container'>
                    <div class='navbar-header'>
                        <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
              </button>
              <a href='#'><img {{bind-attr src='logo'}} alt="logo" style='width: 120px;' /></a>
                    </div>
                    <div id='navbar' class='navbar-collapse collapse'>
                        <ul class='nav navbar-nav'>
                            {{#link-to 'index' tagName='li'}}<a>Home</a>{{/link-to}}
                            {{#link-to 'games' tagName='li'}}<a>Games</a>{{/link-to}}
                            {{#link-to 'about' tagName='li'}}<a>About Us</a>{{/link-to}}
                            {{#link-to 'contact' tagName='li'}}<a>Contact</a>{{/link-to}}
                        </ul>
                    </div>
                </div>
            </nav>
            <div>{{outlet}}</div>
            <footer class='container'>
            <hr/>
            </footer>
        </script>

        <script type='text/x-handlebars' data-template-name='index'>
            <div class="tp-banner-container">
                <div class="tp-banner" >
                    <ul>
                    <!-- THE BOXSLIDE EFFECT EXAMPLES  WITH LINK ON THE MAIN SLIDE EXAMPLE -->

                     <li data-transition="boxslide" data-slotamount="7">
                       <img src="examples&source/images/darkblurbg.jpg">
                       <div class="caption sft medium_grey"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
                       <div class="caption sfb medium_grey"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
                       <div class="caption lfr medium_grey"  data-x="400" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
                     </li>
                     <li data-transition="boxslide" data-slotamount="7">
                       <img src="examples&source/images/darkblurbg.jpg">
                       <div class="caption sft medium_grey"  data-x="400" data-y="100" data-speed="700" data-start="1700" data-easing="easeOutBack">KICKSTART YOUR WEBSITE</div>
                       <div class="caption sfb medium_grey"  data-x="400" data-y="142" data-speed="500" data-start="1900" data-easing="easeOutBack">WITH SLIDER REVOLUTION!</div>
                       <div class="caption lfr medium_grey"  data-x="400" data-y="210" data-speed="300" data-start="2000">UNLIMITED TRANSITIONS</div>
                     </li>
                    </ul>
                </div>
            </div>
        </script>

        <script type="text/javascript" src="assets/slider-start.js"></script>

我已经尝试将slider-start.js放在头部，但即使刷新也不会启动滑块，所以我想我必须将它留在页脚/底部。

jsbin预览（注意：它没有显示图标但它正在工作，（在末尾添加/edit以查看来源）） http://jsbin.com/qeqideroze

Answer 1

使这项工作最简单的方法是将你的革命东西扔进一个组件：

App.XRevolutionComponent = Ember.Component.extend({
  initRevolution: function(){

    $('.tp-banner').revolution({
      delay:9000,
      startwidth:1170,
      startheight:600,
      startWithSlide:0,

      fullScreenAlignForce:"off",
      autoHeight:"off",
      minHeight:"off",
      // ... more properties ...

    });

  }.on('didInsertElement')
});

您的index模板将如下所示：

    <script type='text/x-handlebars' data-template-name='index'>            

      {{ x-revolution }}

    </script>

，您的HTML标记将在您的组件模板中。

工作演示here

要了解有关在Ember组件中包装jQuery插件的更多信息，请参阅here

jQuery Revolution Slider停止使用ember.js

1 个答案: