Simple jQuery Text Slider
How do I make an simple jquery text slider?
I see a lot of people asking all the time, you can find tons of tutorials on making image sliders, but there are never really text versions. These applications are great for startups and other companies to slide through customer feed back with out taking up too much of their site real estate.. What is a simple jquery text slider? How do you make a simple jquery text slider? This script and codes were developed by Ty Stelmach on 09 December 2022, Friday.
Simple jQuery Text Slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple jQuery Text Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body>
<div id="carousel"> <div class="btn-bar"> <div id="buttons"><a id="prev" href="#"><</a><a id="next" href="#">></a> </div></div> <div id="slides"> <ul> <li class="slide"> <div class="quoteContainer"> <p class="quote-phrase"><span class="quote-marks">"</span> I was literally BLOWN AWAY by Company A's work! They went above and beyond all of our expectations with design, usability. and branding, I will reccommend them to everyone I know!<class="quote-marks">"</span> </p> </div> <div class="authorContainer"> <p class="quote-author">John Doe // Local Business Owner</p> </div> </li> <li class="slide"> <div class="quoteContainer"> <p class="quote-phrase"><span class="quote-marks">"</span> I could not stop staring! Company A's Web Solutions are by far the most elegant solutions, you can't beat their quality and attention to detail! <span class="quote-marks">"</span> </p> </div> <div class="authorContainer"> <p class="quote-author">Andy Fakename // CEO: Andy's Camping Supplies</p> </div> </li> <li class="slide"> <div class="quoteContainer"> <p class="quote-phrase"><span class="quote-marks">"</span>Carl Fakeguy, was the most helpful designer I've ever hired. He listened to my ideas and advised against things that could negatively affect my CEO. Company A is by far the most generous and helpful company, 5/5!<span class="quote-marks">"</span> </p> </div> <div class="authorContainer"> <p class="quote-author">Janice Falsename</p> </div> </li> </ul> </div> </body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple jQuery Text Slider - Script Codes CSS Codes
body{
background:#E96D65;
}
#carousel {
position: relative;
width:60%;
margin:0 auto;
}
#slides {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
}
#slides ul {
list-style: none;
width:100%;
height:250px;
margin: 0;
padding: 0;
position: relative;
} #slides li {
width:100%;
height:250px;
float:left;
text-align: center;
position: relative;
font-family:lato, sans-serif;
}
/* Styling for prev and next buttons */
.btn-bar{ max-width: 346px; margin: 0 auto; display: block; position: relative; top: 40px; width: 100%;
} #buttons {
padding:0 0 5px 0;
float:right;
}
#buttons a {
text-align:center;
display:block;
font-size:50px;
float:left;
outline:0;
margin:0 60px;
color:#b14943;
text-decoration:none;
display:block;
padding:9px;
width:35px;
}
a#prev:hover, a#next:hover {
color:#FFF;
text-shadow:.5px 0px #b14943;
}
.quote-phrase, .quote-author {
font-family:sans-serif;
font-weight:300;
display: table-cell;
vertical-align: middle;
padding: 5px 20px;
font-family:'Lato', Calibri, Arial, sans-serif;
}
.quote-phrase {
height: 200px;
font-size:24px;
color:#FFF;
font-style:italic;
text-shadow:.5px 0px #b14943;
}
.quote-marks {
font-size:30px;
padding:0 3px 3px;
position:inherit;
}
.quote-author {
font-style:normal;
font-size:20px;
color:#b14943;
font-weight:400;
height: 30px;
}
.quoteContainer, .authorContainer {
display: table;
width: 100%;
}
Simple jQuery Text Slider - Script Codes JS Codes
$(document).ready(function () { //rotation speed and timer var speed = 5000; var run = setInterval(rotate, speed); var slides = $('.slide'); var container = $('#slides ul'); var elm = container.find(':first-child').prop("tagName"); var item_width = container.width(); var previous = 'prev'; //id of previous button var next = 'next'; //id of next button slides.width(item_width); //set the slides to the correct pixel width container.parent().width(item_width); container.width(slides.length * item_width); //set the slides container to the correct total width container.find(elm + ':first').before(container.find(elm + ':last')); resetSlides(); //if user clicked on prev button $('#buttons a').click(function (e) { //slide the item if (container.is(':animated')) { return false; } if (e.target.id == previous) { container.stop().animate({ 'left': 0 }, 1500, function () { container.find(elm + ':first').before(container.find(elm + ':last')); resetSlides(); }); } if (e.target.id == next) { container.stop().animate({ 'left': item_width * -2 }, 1500, function () { container.find(elm + ':last').after(container.find(elm + ':first')); resetSlides(); }); } //cancel the link behavior return false; }); //if mouse hover, pause the auto rotation, otherwise rotate it container.parent().mouseenter(function () { clearInterval(run); }).mouseleave(function () { run = setInterval(rotate, speed); }); function resetSlides() { //and adjust the container so current is in the frame container.css({ 'left': -1 * item_width }); }
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
function rotate() { $('#next').click();
}
Developer | Ty Stelmach |
Username | TyStelmach |
Uploaded | December 09, 2022 |
Rating | 3.5 |
Size | 3,560 Kb |
Views | 10,120 |
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!
Name | Size |
Spotify layout and UI | 6,919 Kb |
Codepen recreation | 2,689 Kb |
Personal Celebration Module | 4,537 Kb |
Lazy Load and Filter Resource Library | 2,800 Kb |
A Pen by Ty Stelmach | 10,216 Kb |
Add a custom right-click menu using jQuery | 2,476 Kb |
Moonshot Countdown | 2,771 Kb |
Credit Card Payment Modal | 4,461 Kb |
Angular Deluxe Task List | 5,711 Kb |
Adding content to an iframe with jQuery | 2,380 Kb |
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!
Name | Username | Size |
Nice responsive team page | Infomiho | 3,139 Kb |
Magnus 3 | ARocketfish | 7,944 Kb |
A Pen by Eka Risyana | Risyana | 3,705 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Popover Example | Seanboom | 2,429 Kb |
CSS3 Snow Animation | NickyCDK | 1,695 Kb |
Flex Table | Simeonoff | 4,059 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Table Exercise | Fresco | 9,585 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!