CODEWITHSUNDEEP
jqueryhtmlember.jsrevolution-slider
Johhan Santana
Johhan Santana

Reputation: 2415

jQuery Revolution Slider stops working with ember.js

The jQuery Revolution Slider works when you first load the website but as soon as you navigate to another route and come back to the home/index (where the slider is) it breaks the 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>

I've tried putting the slider-start.js at the head but it doesn't start the slider even when you refresh so I guess I have to leave it at the footer/bottom.

jsbin preview (note: it doesn't show the icons but it's working, (add /edit at the end to view the source)) http://jsbin.com/qeqideroze

Upvotes: 1

Views: 761

Answers (1)

Kalman
Kalman

Reputation: 8121

The easiest way to get this working is to throw your revolution stuff into a component:

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')
});

Your index template would then look as follows:

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

      {{ x-revolution }}

    </script>

and your HTML markup would be inside your component template.

Working demo here

To learn more about wrapping jQuery plugin inside Ember component see here

Upvotes: 2

Related Questions