JSFiddle - React, Tailwind, and code Playground

by Vladislav Altyncev

HTML

<script src="http://shadow.perm.ru/test/js/jquery.carouFredSel-6.2.0-packed.js"></script>
<div id="wrap_item_photo">
  <div id="item_photo">
    <div class="item_catalog_photo">
      <img src="http://shadow.perm.ru/test/img/large/zoom_2.jpg" alt="zoom_2" width="350" height="500" border="0" />
      <a href="#">Увеличить фото</a>
    </div>
    <div class="item_catalog_photo">
      <img src="http://shadow.perm.ru/test/img/large/zoom_3.jpg" alt="zoom_3" width="350" height="500" border="0" />
      <a href="#">Увеличить фото2</a>
    </div>
    <div class="item_catalog_photo">
      <img src="http://shadow.perm.ru/test/img/large/zoom_4.jpg" alt="zoom_4" width="350" height="500" border="0" />
      <a href="#">Увеличить фото3</a>
    </div>
    <div class="item_catalog_photo">
      <img src="http://shadow.perm.ru/test/img/large/zoom_5.jpg" alt="zoom_5" width="350" height="500" border="0" />
      <a href="#">Увеличить фото4</a>
    </div>
  </div>
  <div id="item_photo_pager"></div>
</div>

CSS

/*
Item Photo Page
--------------------------------------------------*/
#wrap_item_photo .caroufredsel_wrapper {left: 90px !important;}
#item_photo {}
.item_catalog_photo {position: relative; width: 350px; height: 500px;}
.item_catalog_photo a {
	display: block;
	background: url(http://shadow.perm.ru/test/img/item_catalog_photo.png) no-repeat 0 0;
	width: 133px;
	height: 34px;
	color: #ee3124;
	font-family: 'PTSansNarrowRegular';
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	position: absolute;
	left: 100px;
	top: 42%;
	padding: 41px 0 0 0;
	text-align: center;
	text-decoration: none;
}
.item_catalog_photo a:hover {text-decoration: underline;}
#item_photo img {display: block;}
#item_photo_pager {
	width: 72px;
	overflow: hidden;
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
}
#item_photo_pager img {
	display: block;
	float: left;
	width: 62px;
	height: 62px;
	padding: 3px;
	border: 2px solid #FFF;
}
#item_photo_pager img.selected {border: 2px solid #ee3124;}

JavaScript

$('#item_photo').carouFredSel({
    items: 1,
    auto: false,
    scroll: {
        fx: 'none'
    },
    pagination: {
        container: '#item_photo_pager',
        event: 'mouseenter',
        anchorBuilder: function(nr) {
            var src = $(".item_catalog_photo img").attr('src').replace('/large/', '/small/');
            return '<img src="'+ src +'" border="0" />';
        }
    }
});