Athlete Slider Speed Test

Developer
Bryce Hanscomb
Size
3,111 Kb
Views
30,360
  1. Athlete Slider Speed Test Previews
  2. Athlete Slider Speed Test HTML Codes
  3. Athlete Slider Speed Test CSS Codes
  4. Athlete Slider Speed Test JS Codes

How do I make an athlete slider speed test?

What is a athlete slider speed test? How do you make a athlete slider speed test? This script and codes were developed by Bryce Hanscomb on 07 September 2022, Wednesday.

Athlete Slider Speed Test Previews
IQ Test

Athlete Slider Speed Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Athlete Slider Speed Test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2> Hover over the left / right arrows to scroll. Also, try different browser widths!
</h2>
<div class="athletes-list-wrapper"><div class="nav-block left"></div><div class="athlete-list with-buttons"><div id="list-holder"><ul id="athlete-images"><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li><li><a href="" alt=""><img alt="" src="https://i.imgur.com/WT1ty1F.jpg"><span>John Person</span></a></li></ul></div></div><div class="nav-block right"></div></div>
<h2> adjust the <code>SPEED</code> variable at the top of the JS to change the scroll speed.
</h2> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Athlete Slider Speed Test - Script Codes CSS Codes

.athlete-list ul li img { width: 150px;
}
.athlete-list ul li span { background-color: #EFEFEF; color: #F15A00; display: block; line-height: 2; text-align: center; width: 100%;
}
a, .a, .builder .summary-list .show-specifications { color: #F15A00; cursor: pointer; text-decoration: none;
}
.athlete-list ul li { display: inline-block;
}
.athlete-list ul { list-style: none outside none; margin: 0; padding: 0;
}
.athlete-list #list-holder { display: inline-block;
}
.athlete-list.with-buttons { display: inline-block;
}
.athlete-list { overflow-x: scroll; white-space: nowrap; width: 100%;
}
.athletes-list-wrapper .nav-block.left:before { content: "<";
}
.athletes-list-wrapper .nav-block.left { left: 0;
}
.athletes-list-wrapper .nav-block { background-color: #F15A00; color: #FFFFFF; cursor: pointer; height: 182px; line-height: 182px; position: absolute; text-align: center; top: 0; vertical-align: top; width: 40px;
}
.athletes-list-wrapper .nav-block.right:before { content: ">";
}
.athletes-list-wrapper .nav-block.right { right: 0;
}
.athletes-list-wrapper { padding: 0 40px; position: relative; white-space: nowrap; max-width: 1000px; margin: 0 auto;
}
body { text-align: center;
}

Athlete Slider Speed Test - Script Codes JS Codes

var SPEED = 5;
(function($athList,context){	context.scroll = function(e) {	if (e.target == context.leftArrow[0]) {	//left	$athList.scrollLeft($athList.scrollLeft() - SPEED);	} else {	//right	$athList.scrollLeft($athList.scrollLeft() + SPEED);	}	if (context.keepScrolling) {	setTimeout(function() {	context.scroll(e);	},(1000 / 60)); //60 frames per second	}	};	context.stopScroll = function() {	context.keepScrolling = false;	};	context.leftArrow = $('.nav-block.left',context.wrapper);	context.rightArrow = $('.nav-block.right',context.wrapper);	context.leftArrow.add(context.rightArrow)	.on('mouseover',function(e) {	context.keepScrolling = true;	context.scroll(e);	})	.on('mouseout',context.stopScroll);
})($('.athlete-list'),{});
Athlete Slider Speed Test - Script Codes
Athlete Slider Speed Test - Script Codes
Home Page Home
Developer Bryce Hanscomb
Username Bryce
Uploaded September 07, 2022
Rating 3
Size 3,111 Kb
Views 30,360
Do you need developer help for Athlete Slider Speed Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Bryce Hanscomb (Bryce) Script Codes
Name
A Pen by Bryce Hanscomb
Instant String Length Comparison
Vuly Trampolines Email Footer
IOS Safari Scrolling Bug
CSS Link Zoom On Click
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!