<div class='card'>
	<h1 style='margin-top: 0'>Shopping thing</h1>
	<div class='wrapper'>
		<div class='image-wrapper'>
			<div class='images'>
		<div class='image active'>
			<img src='https://images-na.ssl-images-amazon.com/images/I/71yTs5LzcSL._SL1500_.jpg' />
		</div>	
		<div class='image'>
<img src='https://images-na.ssl-images-amazon.com/images/I/61UCg7rC1GL._SL1000_.jpg' />
		</div>
		<div class='image'>
			<img src='https://images-na.ssl-images-amazon.com/images/I/61tSbY1J7aL._SL1200_.jpg' />
		</div>		
	</div>
		</div>	
		<div class='section'>
		<div class='content active'>
			<h1>item 1</h1>
			<p class='price'>$45.99</p>
			<div class='desc'>
				<p>Green juice flexitarian vegan fixie, godard williamsburg migas farm-to-table messenger bag. Hella meditation yr post-ironic, try-hard farm-to-table church-key marfa. Seitan tattooed af trust fund put a bird on it, neutra post-ironic brooklyn franzen bicycle rights beard wolf.</p>
			</div>	
		</div>
		<div class='content'>
			<h1>item 2</h1>
			<p class='price'>$398.89</p>
			<div class='desc'>
				<p>Green juice flexitarian vegan fixie, godard williamsburg migas farm-to-table messenger bag. Hella meditation yr post-ironic, try-hard farm-to-table church-key marfa. Seitan tattooed af trust fund put a bird on it, neutra post-ironic brooklyn franzen bicycle rights beard wolf.</p>
			</div>	
		</div>
		<div class='content'>
			<h1>item 3</h1>
			<p class='price'>$109.99</p>
			<div class='desc'>
				<p>Green juice flexitarian vegan fixie, godard williamsburg migas farm-to-table messenger bag. Hella meditation yr post-ironic, try-hard farm-to-table church-key marfa. Seitan tattooed af trust fund put a bird on it, neutra post-ironic brooklyn franzen bicycle rights beard wolf.</p>
			</div>	
		</div>
	</div>	
	</div>
	<div class='buttons'>
		<a class='prev' href='#'><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
		<a class='next' href='#'><i class="fa fa-arrow-right" aria-hidden="true"></i></a>
	</div>	
</div>
*
	box-sizing: border-box

img
	max-width: 100%

body
	font-family: 'Raleway', sans-serif

.card
	width: 90%
	overflow: hidden
	padding: 20px
	box-shadow: 0px 1px 10px rgba(0,0,0,0.35)
	margin: 40px auto
	background: #df405a
	color: white
	.buttons
		padding-top: 20px
		a
			width: 40px
			height: 40px
			display: inline-block
			text-align: center
			line-height: 40px
			font-size: 20px
			color: white
			text-decoration: none
			transition: 0.15s ease-in-out
			border-radius: 20px
			box-shadow: 0px 1px 10px rgba(0,0,0,0.35)
			&:hover
				color: rgba(white, .85) 
	.wrapper
		display: flex
		.image-wrapper
			width: 480px
			min-width: 480px
			overflow: hidden
			box-shadow: 0px 1px 10px rgba(0,0,0,0.35)
			background: white
			.images
				display: flex
				flex-wrap: wrap
				transition: 0.35s ease-in-out
				.image
					width: 480px
					height: 480px
					padding: 20px
					display: flex
					justify-content: center
					align-items: center
		.section
			color: white
			.content
				display: none
				padding: 20px
				&:first-child
					display: block
				&.active
View Compiled
$('.images').each( function(){
	var totalWidth = 0,
			$this = $(this);
	
	$($this).children().each( function(){
		totalWidth += $(this).outerWidth();
	});
	
	$($this).width(totalWidth)
	
});

$('.next').on('click', function(e){
	e.preventDefault();
	
	var selectImages = $(this).parents('.card').find(".images"),
			targetImage = $(selectImages).find(".active").next('.image'),
			$this = $(this),
			offsetLeftImages = $(selectImages).offset().left,
			offsetLeftImage = $(targetImage).offset().left,
			totalOffset = offsetLeftImage - offsetLeftImages,
			selectSection = $($this).parents('.card').find(".section"),
			selectTargetContent = $(selectSection).find(".active").next(".content")
	
	$(selectImages).find(".active").removeClass('active');
	$(targetImage).addClass("active");
	$(selectSection).find(".active").removeClass('active').fadeOut(175, function(){
		$(selectTargetContent).fadeIn(175);
	});
	$(selectTargetContent).addClass("active");
	
	$(selectImages).css({"transform": "translate(-"+totalOffset+"px, -0)"});
	
	
});

$('.prev').on('click', function(e){
	e.preventDefault();
	
	var selectImages = $(this).parents('.card').find(".images"),
			targetImage = $(selectImages).find(".active").prev('.image'),
			$this = $(this),
			offsetLeftImages = $(selectImages).offset().left,
			offsetLeftImage = $(targetImage).offset().left,
			totalOffset = offsetLeftImage - offsetLeftImages,
			selectSection = $($this).parents('.card').find(".section"),
			selectTargetContent = $(selectSection).find(".active").prev(".content")
	
	$(selectImages).find(".active").removeClass('active');
	$(targetImage).addClass("active");
	$(selectSection).find(".active").removeClass('active').fadeOut(175, function(){
		$(selectTargetContent).fadeIn(175);
	});
	$(selectTargetContent).addClass("active");
	
	$(selectImages).css({"transform": "translate(-"+totalOffset+"px, -0)"});
	
});
Rerun