Pan zoom with bxSlider not zooming in centralized

Question

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.

find fiddle demo here.

<div class="slider">    
        <ul class="bxSlider">
            <li>
                <section class="focal">
                    <div class="parent">
                        <div class="panzoom">
                            <img src="https://rockwoodtables.files.wordpress.com/2012/06/table-4.jpg" width="1000" height="450" />
                        </div>
                    </div>
                    <div class="buttons">
                        <button class="zoom-in">Zoom In</button>
                        <button class="zoom-out">Zoom Out</button>
                        <input type="range" class="zoom-range" />
                        <button class="reset">Reset</button>
                    </div>
                </section>
            </li>
            <li>
                <section class="focal">
                    <div class="parent">
                        <div class="panzoom">
                            <img src="http://www.patiocollection.com/images/D/971250B.jpg" width="1000" height="450" />
                        </div>
                    </div>
                    <div class="buttons">
                        <button class="zoom-in">Zoom In</button>
                        <button class="zoom-out">Zoom Out</button>
                        <input type="range" class="zoom-range" />
                        <button class="reset">Reset</button>
                    </div>
                </section>
            </li>
            <li>
                <section class="focal">
                    <div class="parent">
                        <div class="panzoom">
                            <img src="http://s3.amazonaws.com/images2.eprevue.net/p4dbimg/1375/images/ce0941_ext.jpg" width="1000" height="450" />
                        </div>
                    </div>
                    <div class="buttons">
                        <button class="zoom-in">Zoom In</button>
                        <button class="zoom-out">Zoom Out</button>
                        <input type="range" class="zoom-range" />
                        <button class="reset">Reset</button>
                    </div>
                </section>
            </li>
        </ul>
</div>

js

 (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 > div')
    });
    $panzoom.parent().on('mousewheel.focal', function( e ) {
      e.preventDefault();
      var delta = e.delta || e.originalEvent.wheelDelta;
      var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 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
    });

Answer 1

Your problem is not the slider, per se. You're just selecting multiple elements (sections) with the same class .focal.

Panzoom is designed to use on a single element. So we just need to create a function and iterate through each element with each(). Now we can call the function every time which binds a panzoom() method to each element (seperately).

JSFiddle (only edited JS)

http://jsfiddle.net/6upt2gn3/4/