Hi Friends, Today i will how to create simple text slider using jquery slide function. Most of the time we need a text slider upon one image or somewhere else. At that moment anyone can use the text slider for enhancing the user experience with their website.
See the Live Demo and download the code below:
For More information about Website Design you can click below:
Pure CSS Button With Lightening Glowing and Shining Effect
Create Expand Collapse Sliding Menu Using jQuery
Background Color Change Automatically Using Jquery
How to add smart slider Facebook Like Box Pop-up
Learn Ajax For Beginners In Hindi
33 New Awesome Features in CSS3 and CSS4
Simple Show Hide Accordion Code Using Jquery
Add Diwali Fireworks Using Jquery In Your Website
Add CKEditor in Html Form using Jquery
Jquery Me Simple Slider Kaise Bnate Hai
Learn JQUERY Code Step By Step For Beginners
You have to follow some steps to create a text slider using jquery. These steps are
Step1: You have to open your page in code editor.
Step2: Paste the Below Code in your web page.
HTML Code: In the below code you write your own text according to your requirement.
<h1>Simple Text Slider Using Jquery Slide Function</h1> <div id="TextSlider"> <div>Your First Text</div> <div>Your Second Text</div> <div>Your Third Text</div> <div>Your Fourth Text</div> <div>Your Fifth Text</div> <div>Your Sixth Text</div> <div>Increase div to add more</div> </div> |
<h1>Simple Text Slider Using Jquery Slide Function</h1> <div id="TextSlider"> <div>Your First Text</div> <div>Your Second Text</div> <div>Your Third Text</div> <div>Your Fourth Text</div> <div>Your Fifth Text</div> <div>Your Sixth Text</div> <div>Increase div to add more</div> </div>
Jquery Code: Below jquery code is giving the functionality to text slider and you can see that i am using slideToggle function and timing to slide the text.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script> <script> $(function() { $("#TextSlider").css({ "height" :$("#TextSlider div:first").css("height"), "overflow" : "hidden" }); function slide() { $("#TextSlider div:first").slideToggle(1000, function() { var $this = $(this); $this.parent().append(this); $this.show(); slide(); }); } slide(); });</script> |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script><script> <script> $(function() { $("#TextSlider").css({ "height" :$("#TextSlider div:first").css("height"), "overflow" : "hidden" }); function slide() { $("#TextSlider div:first").slideToggle(1000, function() { var $this = $(this); $this.parent().append(this); $this.show(); slide(); }); } slide(); });</script>
You can change the timing between the text
$("#TextSlider div:first").slideToggle(Your Time Interval, function()
Step3: After pasting the code you have to check your page in any web browser.
For any problem you see the live demo and download the code from below.
Read About Other Interesting Things below.
If You like my blog, kindly Subscribe it.
Categories: Website Design
Leave a Reply