BXslider.js crashes when I combine it with Jquery.smoothState.js. How to fix it?

Question

I made a homepage with a full-screen slider using BXslider.js . Each image in the slider has a caption text with an anchor. After clicking on the link link, you will be redirected to one detailed page. If you go from home to the detailed page, a transition will appear. This is actually the same as the demo on the jquery.smoothstate.js page .

I ran into one problem, BXslider is broken after enabling jquery.smoothstate javascript. Each time you press the button with the prev or next arrow in BXslider, the slider itself overwrites itself and duplicates the previous / next buttons, and the images disappear. In firebug, I do not receive any warnings or errors. This makes debugging difficult. Hope someone can help me on this.

Thanks in advance!

Below you will find the code that I wrote for my site bxslider.js / smootstate.

Code for the main page

        <div id="main" class="m-scene">
            <div class="scene-element scene-element--fadeinup">
            <section id="banner">
                <div class="inner">

                    <div id="box">
                        <div class="relative-box">
                            <div class="logo"></div>
                            <h2>Client-name</h2>
                            <div id="captions">
                                <p>&#34; This is a caption &#34;</p>
                            </div>
                        </div>
                        <a href="/generic.html" class="more">To genericpage</a>
                    </div>

                    <ul class="bxslider">
                      <li style="background-image: url('/images/pic1.jpg');"></li>
                      <li style="background-image: url('/images/pic2.jpg');"></li>
                      <li style="background-image: url('/images/pic3');"></li>
                      <li style="background-image: url('/images/pic4.jpg');"></li>
                      <li style="background-image: url('/images/pic5.jpg');"></li>
                    </ul>

                </div>

            </section>
        </div>
    </div>
   </div>

Universal html / css selectors

I am using generic html / selectors for jquery.smootstate.js. Below html is identical for home and detail page.

  <div id="main" class="m-scene">
        <div class="scene-element scene-element--fadeinup">

css3 transitions

scene element and scene element - fadeinup selectors are used to animate css3 pages.

@keyframes fadeInUp{
    0%{opacity:0; transform:translate3d(0,100%,0);}
    100%{opacity:1;transform:none;}
}

.m-scene .scene-element{
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animtation-fill-mode: both;
}

.m-scene .scene-element--fadeinup {animation-name:fadeInUp;}

.m-scene.is-exiting .scene-element {animation-direction: alternate-reverse;}

javascript for jquery.smoothstate.js

        (function($) {
          'use strict';
          var $body = $('html, body'),
              content = $('#smooth').smoothState({
                // Runs when a link has been activated
                onStart: {
                  duration: 250, // Duration of our animation
                  render: function (url, $container) {
                    // toggleAnimationClass() is a public method
                    // for restarting css animations with a class
                    content.toggleAnimationClass('is-exiting');
                    // Scroll user to the top
                    $body.animate({
                      scrollTop: 0
                    });
                  }
                }
              }).data('smoothState');
              //.data('smoothState') makes public methods available
        })(jQuery);

Answer 1

1. DIY jquery.smoothstate

#smooth #main <div>. jquery jquery.smoothstate, , #main jquery.smoothstate.js.

2. smoothstate

, , . bxslider . , BXslider, .

, . jquery.smoothstate. .

3.toggleAnimationClass

toggleAnimationClass functioncall restartCSSAnimations();

'is-exited' addClass()

:

    (function($) {

      'use strict';

          content = $('#main').smoothState({
            // Runs when a link has been activated
            prefetch: true,
            pageCacheSize: 4,
            anchors: 'link',
            onStart: {
              duration: 250, // Duration of our animation
              render: function (url, $container) {

                //add temporary class #main
                $('#main').addClass('is-exited');

                // for restarting css animations with a class
                content.restartCSSAnimations();

              }
            }
          }).data('smoothState');
    })(jQuery);