Jump to content
m.s_shohan

How can I do horizontal auto scrolling?

Recommended Posts

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 by m.s_shohan

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...