JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">43223434
     <div class="child">56464</div>
</div>

CSS

.advertise {
	height:250px;
	margin:30px auto;
	overflow:hidden;
	position:relative;
}
.large-photo {
	text-align:center;
	width:860px !important;
	height:100%;
	float:left;
	overflow:hidden;
	position:relative; 
}
.large-photo .slidephoto{
	overflow:hidden;
	position:relative;
	left:0;
	top:0;
	height:auto;
	height:250px !important;
}
.large-photo .slidephoto .large {
	overflow:hidden;
	float:left;
	width:860px;
	height:250px;
    border:1px solid red;
}
.large-photo .slidephoto .large img{
	width:100%;
	height:100%;
}
.switchlabel{
	bottom: 4px;
	position: absolute;
	right: 4px;
	text-align: right;
	width: 100%;
	z-index: 1000;
}
.switchlabel span{
	background-color: #000;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	height: 24px;
	line-height: 22px;
	margin-right: 2px;
	width: 25px;
	text-align:center;
	font-weight:bold;
}
.switchlabel span.active{
	background-color:#f0f0f0;
	color:#fe5113;
}
.small-photo {
	background-color:#fff;
	border: 1px solid #ddd;
	float:right;
	width:300px;
	height:100%;
}
.small-photo .small{
	float:left;
	width:149px;
	height:83px;
	overflow: hidden;
	padding: 5px;
	cursor:pointer;
}
.small-photo .small img{
	width:100%;
	height:100%;
}
.small-photo .small.selected {
	background-color:#fe5113;
}
.leftarrow,.rightarrow {
	background-color:#000;
	border-radius: 100%;
	color: #fff;
	cursor: pointer;
	height: 30px;
	line-height: 30px;
	text-align: center;
	width: 30px;
	position:absolute;
	top:50%;
}
.leftarrow {
	left: 10px;
}
.rightarrow {
	right: 319px;
}

JavaScript

$(".parent").on('click', callback);



function callback(event){

    alert( event.currentTarget === this );
}