JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <div class="dest">
        <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/astonishing-aristic-mobile-background-wallpaper-background.jpg" alt="suites-slider-dest">
    </div>
    <div class="navbar">
        <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/marvellous-water-drops-background-2013.jpg">
        <img src="http://www.imagebrowse.com/wp-content/uploads/2013/08/marvelous-beautiful-autum-tree-wallpaper-background.jpg">
    </div>
</div>

CSS

img
{
    max-width: 100%;
}

.slider
{
	display: inline-block;
	padding: 75px 0;
}

.dest img
{
	border: 5px solid #fff;
	box-shadow: rgba(0,0,0,0.5) 0 0 15px;
	float: left;
	margin-right: 15px;
	width: 70%;
}

.navbar
{
	float: left;
    margin-left: 10px;
	width: 17%;
}

.navbar img:first-child
{
	margin-top: 0 !important;
}

.navbar img
{
	border: 5px solid #fff;
	box-shadow: rgba(0,0,0,0.5) 0 0 15px;
	cursor: pointer;
	display: block;
	margin-top: 15px;
	opacity: 0.5;
}

.navbar img:hover
{
	opacity: 1;
}

JavaScript

$(".navbar img").click(function()
{
    var dest = $(".dest img").attr('src');
	var icon = $(this).attr('src');

	$(this).removeAttr('src');
	$(this).attr('src', dest);
	$(".dest img").removeAttr('src');
	$(".dest img").attr('src',icon);
});