jText jQuery Text Slider Article Tutorial

grahambill, Tutorials, jQuery

Nowadays, jquery slider become more popular, so in this tutorial, we would like to show you how to create a beautiful text slider with jquery plugin. In fact, you can using text sliding in your website anywhere and especially on home page to show recent news or highlight important information to make it more attractive and professional looking.

You may also like this tutorial:

demo download

With this text slider tutorial, hope you can create your slider with jquery on website or template.

Let’s go with my tutorial coding bellow:

This text slider using plugin such as:

The Markup Language

The javascript function for text slider will have the following code:

<script>
            $("#foo3").carouFredSel({
                items: 1,
                auto: true,
                scroll: 1,
                pagination  : "#foo3_pag"
            });
        </script>

 

The HTML structure will have the following code:

 <article class="grid_3  carousel-article">
                    <h4>Slider text article</h4>

                    <div style="display: block; text-align: start; position: relative; top: auto; right: auto; bottom: auto; left: auto; width: 220px; height: 90px; margin: 0px; overflow: hidden;" class="caroufredsel_wrapper">
                    <ul style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 0px; margin: 0px; width: 1540px; height: 90px;" id="foo3" class="carousel-li">

                    <li>
                            <p>
                                Slider1, welcome to freshdesignweb blog, here is useful slider text example tutorial with demo and download link, hope you can learn more about web design. Regard, Graham Bill 
                            </p>
                        </li><li>
                            <p>
                               Slider2, welcome to freshdesignweb blog, here is useful slider text example tutorial with demo and download link, hope you can learn more about web design. Regard, Graham Bill 
                            </p>
                        </li><li>
                            <p>
                               Slider3, welcome to freshdesignweb blog, here is useful slider text example tutorial with demo and download link, hope you can learn more about web design.Regard, Graham Bill 
                            </p>
                        </li></ul></div>

                    <div class="clearfix"></div>

                    <div style="display: block;" class="carousel-pagination" id="foo3_pag"><a class="selected" href="#"><span>1</span></a><a class="" href="#"><span>2</span></a><a class="" href="#"><span>3</span></a></div>

                </article><!-- slider text article end -->

 

The Cascading Style Sheets (CSS) text slider will have the following code:

h1, h2, h3, h4, h5, h6, li, p, ul { border: 0; margin: 0; padding: 0;}
ol, ul {list-style: none;}
li {display: list-item;}

h4{
    font-family: 'Droid Sans', sans-serif;
    font-weight: 400;
    color: #707070;
    text-transform: uppercase;
	font-size: 16px;
    line-height: 24px;
    margin-bottom: 8px; 
}

p{
    font: 12px 'Droid Sans', sans-serif;
    line-height: 18px;
    color: #8f8f8f;
}

.grid_3.carousel-article .caroufredsel_wrapper{
    width: 100% !important;
}

.carousel-article{
    width: 100%;
}

.grid_3.carousel-article .carousel-li > li{
    width: 220px;
    margin-right: 0;
}

.carousel-pagination {
    text-align: center;
    float: left;
    margin-top: 10px;
}

.carousel-pagination a {
    background: url('images/btn.png') no-repeat;
    width: 19px;
    height: 5px;
    margin: 0 5px 0 0;
    display: inline-block;
}

.carousel-pagination a.selected {
    background: url('images/btn-active.png') no-repeat;
    cursor: default;
}

.carousel-pagination a span {
    display: none;
}

Now! We have a beautiful jquery text slider. Check out the demo below, and feel free to download this example1 for future use.

demo | [download id=”34946″]

Related

40+ Free Responsive Navigation Menu Plugins & Tutorials

20+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

30+ Free HTML5 jQuery Upload File Scripts Example

50+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

Written by

Feedback 3 Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *