Merge Html before/after slider in Html carousel

HTML & CSS
1

Hi everyone,

I’m a beginner in html website creation. I managed to make an html code to create a slider that shows a before/after picture (see below). I also managed to make an html code to create a carousel with images (see below). My problem is that I still don’t understand how to combine the two html codes and therefore make a carousel not with still images, but with before/after slider.

Can someone help me?

Thanks a lot.

H.

Html slider before/after picture

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
	<title></title>
	<link rel="stylesheet" type="text/css" href="https://www.dl.dropboxusercontent.com/s/q34x51te3ii7y3h/twentytwenty.css?dl=1">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
	<div class="container">
		<div id="before_after">
			 <!-- The before image is first -->
			 <img src="https://www.dl.dropboxusercontent.com/s/sxfjip6kkkb1ho5/720p-1.jpg?dl=0" />
			 <!-- The after image is last -->
			 <img src="https://www.dl.dropboxusercontent.com/s/ei2kqsutifc9nch/720p-2.jpg?dl=0" />
		</div>
	</div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/2yeva8cop0pr8cn/custom.js?dl=1"></script>
	<script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/zxzh9jr1knt805v/jquery.event.move.js?dl=1"></script>
	<script type="text/javascript" src="https://www.dl.dropboxusercontent.com/s/k8ikrxcys6pxwfr/jquery.twentytwenty.js?dl=1"></script>
</body>
</html>

Html carousel

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Carousel Using Materialize</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<style type="">
	body
{
	margin: 0;
	padding: 0;
	background: #ffffff;
}
.carousel
{
	transform: translateY(-100px);
	height: 750px;
	perspective: 600px;
}
.carousel .carousel-item
{
	width: 400px;
}
.carousel .carousel-item img
{
	width: 100%;
}
</style>
<body>
	<div class="carousel">
		<div class="carousel-item">
			<img src="720p-1.jpg">
		</div>
		<div class="carousel-item">
			<img src="720p-2.jpg">
		</div>
		<div class="carousel-item">
			<img src="https://upload.wikimedia.org/wikipedia/commons/1/11/B%C3%B6dele_Bregenzerwald_Panorama.jpg">
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
    		$('.carousel').carousel();
  		});
	</script>
</body>
</html>
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.