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="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...

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() {
        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
		});