Giter Club home page Giter Club logo

jquery-easy-ticker's Introduction

jQuery Easy Ticker plugin

jQuery easy ticker is a news ticker like plugin which scrolls a list infinitely. It is highly customizable, flexible with lots of features and works in all browsers.

๐Ÿ‘๏ธ Live demo - ๐Ÿ  Home page - โ˜• Buy me a Coffee !

Features

  • Two directions available (Up and down).
  • Can be targeted on any template.
  • Flexible API for extending to various applications.
  • Supports 'easing' functions.
  • Mouse pause feature available.
  • The speed of the transition can be changed.
  • Controls can be added in order to Play/pause or move the list up and down.
  • Cross browser support.
  • Light weight (2.86 KB - minified).

Usage

Include jQuery and easy ticker plugin (available under dist/) in the page.

<script src="jquery.js"></script>
<script src="jquery.easy-ticker.min.js"></script>

HTML

Wrapper > Target > Children

<div class="myWrapper">
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
</div>

or

<div class="myWrapper">
    <div>
        <div>List item 1</div>
        <div>List item 2</div>
        <div>List item 3</div>
        <div>List item 4</div>
    </div>
</div>

jQuery

With default options

$(document).ready(function(){
    
    $('.myWrapper').easyTicker({
        direction: 'up',
        easing: 'swing',
        speed: 'slow',
        interval: 2000,
        height: 'auto',
        visible: 0,
        mousePause: true,
        autoplay: true,
        controls: {
            up: '',
            down: '',
            toggle: '',
            playText: 'Play',
            stopText: 'Stop'
        },
        callbacks: {
            before: false,
            after: false,
            finish: false
        }
    });

});

See demo

Buy me a coffee !

Like this plugin ? If you find it useful and if it helped solved your problem, feel free to Buy me a Coffee ! ๐Ÿ˜€

Documentation

Plugin's documentation is available in the plugin homepage. Please refer this page for more details on usage, options and customization features.

Requirements

  • jQuery 1.7+

License

Copyright (c) 2022 Aakash Chakravarthy, released under the MIT License.

jquery-easy-ticker's People

Contributors

dependabot[bot] avatar vaakash avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery-easy-ticker's Issues

direction left and right

Hi vaakash
How are you?
Can you provide left and right direction for easy ticker?
If you can, I'd like to pay to you
Thanks
Brian

move left and right?

Thanks for the plugin! I have created a News Ticker block for WordPress and Headway Themes.

I was just wondering how hard it would be to get it to scroll left and right?

multiple ?

Hello,
How to configure multiple vtickers ?
is it possible to condensed code :

var dd = $('.vticker_promo').easyTicker({
	direction: 'up',
	easing: 'swing',
	speed: 'slow',
	interval: 3000,
	height: '250px',
	mousePause: 0,
	controls: {
		up: '.vticker_up_promo',
		down: '.vticker_down_promo'
	}
}).data('easyTicker');

var dd = $('.vticker_actu').easyTicker({
	direction: 'up',
	easing: 'swing',
	speed: 'slow',
	interval: 3000,
	height: '250px',
	mousePause: 0,
	controls: {
		up: '.vticker_up_actu',
		down: '.vticker_down_actu'
	}
}).data('easyTicker');

npm package doesn't exist

Hello,
when i search for jquery-easy-ticker in npmjs, it does't exist so i guess you didn't publish the package to npm registry.
please do so.

thanks

Request: add event for when ready

It would be really useful for me to assist in rendering the ticker smoothly if there was a 'ready' event that I could use to then show it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.