title: Pan zoom with bxSlider not zooming in centralized
body: <p>I have used Panzoom jquery with bxSlider. The problem is this while zooming with scroll it doesn't zoom on center. Zoom goes either left side or right Because of slider otherwise it works proper.</p>
  
  <p>find <strong><a href="http://jsfiddle.net/6upt2gn3/" rel="nofollow">fiddle demo</a></strong> here.</p>
  
  <pre><code>&lt;div class="slider"&gt;    
          &lt;ul class="bxSlider"&gt;
              &lt;li&gt;
                  &lt;section class="focal"&gt;
                      &lt;div class="parent"&gt;
                          &lt;div class="panzoom"&gt;
                              &lt;img src="https://rockwoodtables.files.wordpress.com/2012/06/table-4.jpg" width="1000" height="450" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="buttons"&gt;
                          &lt;button class="zoom-in"&gt;Zoom In&lt;/button&gt;
                          &lt;button class="zoom-out"&gt;Zoom Out&lt;/button&gt;
                          &lt;input type="range" class="zoom-range" /&gt;
                          &lt;button class="reset"&gt;Reset&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;section class="focal"&gt;
                      &lt;div class="parent"&gt;
                          &lt;div class="panzoom"&gt;
                              &lt;img src="http://www.patiocollection.com/images/D/971250B.jpg" width="1000" height="450" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="buttons"&gt;
                          &lt;button class="zoom-in"&gt;Zoom In&lt;/button&gt;
                          &lt;button class="zoom-out"&gt;Zoom Out&lt;/button&gt;
                          &lt;input type="range" class="zoom-range" /&gt;
                          &lt;button class="reset"&gt;Reset&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;section class="focal"&gt;
                      &lt;div class="parent"&gt;
                          &lt;div class="panzoom"&gt;
                              &lt;img src="http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/1375/images/ce0941_ext.jpg" width="1000" height="450" /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="buttons"&gt;
                          &lt;button class="zoom-in"&gt;Zoom In&lt;/button&gt;
                          &lt;button class="zoom-out"&gt;Zoom Out&lt;/button&gt;
                          &lt;input type="range" class="zoom-range" /&gt;
                          &lt;button class="reset"&gt;Reset&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/section&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>js </p>
  
  <pre><code> (function() {
      var $section = $('.focal');
      var $panzoom = $section.find('.panzoom').panzoom({
          $zoomIn: $section.find(".zoom-in"),
          $zoomOut: $section.find(".zoom-out"),
          $zoomRange: $section.find(".zoom-range"),
          $reset: $section.find(".reset"),
          $set: $section.find('.parent &gt; div')
      });
      $panzoom.parent().on('mousewheel.focal', function( e ) {
        e.preventDefault();
        var delta = e.delta || e.originalEvent.wheelDelta;
        var zoomOut = delta ? delta &lt; 0 : e.originalEvent.deltaY &gt; 0;
        $panzoom.panzoom('zoom', zoomOut, {
          increment: 0.1,
          animate: false,
          focal: e
        });
      });
  
    })();
  
    $('.bxSlider').bxSlider({
          auto:true,
          autoHover: true,
          speed:1800,
          controls: true,
          pager: false,
          pause: 10000
      });
  </code></pre>