How can I do horizontal auto scrolling?

m.s_shohan · November 19, 2016

Hi, I am creating a portfolio website. Here I want that the testimonials will scroll horizontally automatically and will pause on hover. Guys, please give me some hints on how can I perform this action. Here is the markup and style.

<!DOCTYPE html>
<html>
	<head>
		<style>
			body {
				margin: 0;
				padding: 0;
			}
			.testimonials-container::-webkit-scrollbar {
                                display: none;
			.testimonials-wrapper {
				max-width: 100%;
				height: 450px;
				border: 1px solid lightgrey;
				background: linear-gradient(#000000, #777474);
				padding-left: 25px;
				padding-right: 25px;
				position: relative;
			}
			.testimonials-quote {
				width: 100%;
				text-align: center;
				padding-bottom: 20px;
				color: white;
			}
			.testimonials-container {
				width: 100%;
				height: 100%;
				text-align: center;
				display: flex;
				margin: 0;
				padding: 0;
				padding-bottom: 20px;
				overflow: scroll;
			}
			.testimonials-item {
				min-width: 230.99px;
				max-width: 230px;
				height: 70%;
				background-color: white;
				margin-right: 20px;
				margin-left: 20px;
				color: black;
				-webkit-transition: 0.5s ease-in-out;
				-moz-transition: 0.5s ease-in-out;
				-ms-transition: 0.5s ease-in-out;
				-o-transition: 0.5s ease-in-out;
				transition: 0.5s ease-in-out;
			}
			.testimonials-item:last-child {
				margin-right: 0;
			}
			.testimonials-item:first-child {
				margin-left: 0;
			}
			.testimonials-image {
				width: 124px;
				border-radius: 50%;
				padding-top: 20px;
			}
			.testimonials-image img {
				width: 150px;
				height: 150px;
				border-radius: 50%;
				margin-left: 30%;
			}
			.testimonials-prev, .testimonials-next {
				position: absolute;
				top: 50%;
				padding: 10px 5px;
				font-size: 25px;
				color: white;
				cursor: pointer;
				z-index: 5;
			}
			.testimonials-prev {
				left: 0;
				border-radius: 0 3px 3px 0;
			}
			.testimonials-next {
				right: 0;
				border-radius: 3px 0 0 3px;
			}
			.testimonials-prev:hover, .testimonials-next:hover {
				background-color: white;
				color: black;
			}
		</style>
	</head>
	<body>
		<div class= "testimonials-wrapper">
			<div class= "testimonials-quote">
				<h1>What Others Say About Us</h1>
			</div>
			<div class= "testimonials-container">
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Rahim</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Karim</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Abdullah</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Yasir</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Mahmudullah</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Riad</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Shohan</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
				<div class= "testimonials-item">
					<div class= "testimonials-image">
						<img src= "images/for%20use/tiger.jpg"/>
					</div>
					<div class= "testimonialists-name">
						<h3>Shohan</h3>
					</div>
					<div class= "testimonial">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan sed leo eget malesuada.</div>
				</div>
			</div>
			<span class= "testimonials-prev">❰</span>
			<span class= "testimonials-next">❱</span>
		</div>
		<script src= "jquery-3.1.1.min.js"></script>
		<script>
			var x = 270;
			$(document).ready(function() {
				$(".testimonials-next").click(function() {
					$(".testimonials-container").scrollLeft(x += 270);
				});
				$(".testimonials-prev").click(function() {
					$(".testimonials-container").scrollLeft(x -= 270);
				});
			});
		</script>
	</body>
</html>

Waiting for your great hints. Thank you in advance.

Edited November 19, 2016 by m.s_shohan

Sign In

How can I do horizontal auto scrolling?

Recommended Posts

m.s_shohan

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity