main.less or main_style.css (depends on the theme you are using) codes:

@import url("http://www.w3schools.com/lib/w3.css");

.w3cssslider .slide1 {
    background-image: url("images/slide1.jpg");
}

.w3cssslider .slide2 {
    background-image: url("images/slide2.jpg");
}

.w3cssslider .slide3 {
    background-image: url("images/slide3.jpg");
}

.w3cssslider .mySlides {
    height: 100%;
}

.middlewrapper {
    display: table;
    width: 100%;
	height: 100%;
}

.middleitem {
    display: table-cell;
    vertical-align: middle;
}

.w3cssslider .slide1, .w3cssslider .slide2, .w3cssslider .slide3{
	background-position: center;
    background-size: cover;
	height: 400px;
}

.w3cssslider .w3-content {
    max-width: 100%;
    position: relative;
    width: 100%;
	z-index: 0;
}

HTML Codes:

<style>
	.w3cssslider .w3-content {
		max-width: 100%;
		position: absolute !important;
		width: 100%;
		height: 100% !important;
		z-index: 1;
	}

	.w3cssslider .slide1, .w3cssslider .slide2, .w3cssslider .slide3{
		height: 100% !important;
	}
</style>

<div class="w3-content w3-display-container">
		<div class="mySlides">
			<div class="slide1 w3-greyscale-min">
				<div class="middlewrapper">
					<div class="middleitem">
						<div class="container">{slide1text:content global="false"}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mySlides">
			<div class="slide2 w3-greyscale-min">
				<div class="middlewrapper">
					<div class="middleitem">
						<div class="container">{slide2text:content global="false"}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mySlides">
			<div class="slide3 w3-greyscale-min">
				<div class="middlewrapper">
					<div class="middleitem">
						<div class="container">{slide3text:content global="false"}</div>
					</div>
				</div>
			</div>
		</div>

		<a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)">&#10094;</a>
		<a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)">&#10095;</a>
</div>

Javascript codes:

var isEditorVersion = document.getElementsByClassName('wsite-editor');
if (isEditorVersion.length > 0) {
	var slideIndex = 1;
	showDivs(slideIndex);

	function plusDivs(n) {
	  showDivs(slideIndex += n);
	}

	function showDivs(n) {
	  var i;
	  var x = document.getElementsByClassName("mySlides");
	  if (n > x.length) {slideIndex = 1}
	  if (n < 1) {slideIndex = x.length}
	  for (i = 0; i < x.length; i++) {
		 x[i].style.display = "block";
	  }
	  x[slideIndex-1].style.display = "block";
	}
}else{
	var slideIndex = 0;
	carousel();

	function carousel() {
		var i;
		var x = document.getElementsByClassName("mySlides");
		for (i = 0; i < x.length; i++) {
		  x[i].style.display = "none"; 
		}
		slideIndex++;
		if (slideIndex > x.length) {slideIndex = 1} 
		x[slideIndex-1].style.display = "block"; 
		setTimeout(carousel, 2000); // Change image every 2 seconds
	}
}