JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://timmywil.github.io/jquery.panzoom/dist/jquery.panzoom.js"></script>
<script src="http://timmywil.github.io/jquery.panzoom/test/libs/jquery.mousewheel.js"></script>
<link rel="stylesheet" href="http://www.spaceinstyle.com/plugins/bxslider/jquery.bxslider.css">
<script src="http://www.spaceinstyle.com/plugins/bxslider/jquery.bxslider.min.js"></script>
<script src="http://www.spaceinstyle.com/js/jquery.easing.1.3.min.js"></script>
<div class="slider">
    <ul class="bxSlider">
        <li>
            <section class="focal">
                <div class="panzoom-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="panzoom-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="panzoom-parent">
                    <div class="panzoom">
                        <img...

CSS

.slider {
    max-width:1000px;
    margin:0 auto;
    border:1px solid #eee;
    overflow:hidden;
    margin-bottom:500px;
    position:relative;
}
.slider, .bxSlider {
    height:450px;
}
.bx-wrapper .bx-controls-direction a.disabled {
    display:block;
}
ul {
    padding-left:0;
}
ul li {
    list-style:none;
}
.buttons {
    position:absolute;
    top:0;
    right:0;
}

JavaScript

(function () {
    
     // we need to init every section seperately
     function newPanzoom(elem) {
         var $section = $(elem);
         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,
                 minScale: 1, // so the image won't pop out
                 maxScale: 5  // max zoom
             });
         });
     }
    
     // fire each section
     $('.focal').each(function (key, elem) {
         newPanzoom(elem);
     });


 })();

 $('.bxSlider').bxSlider({
     auto: true,
     autoHover: true,
     speed: 1800,
     controls: true,
     pager: false,
     pause: 10000
 });