jQuery plugin carouselTicker is a lightweight and flexible jQuery plugin that lets you create a modern, semantic pie bar powered by CSS and for endless scrolling for an unordered list of Html content with drag/swipe and pauses on scroll support.
Supports: Chrome, Firefox, Safari, Opera, IE7, IE8, IE9, IE10, and IE11.
carouselTicker v1.0.0:
- Responsive – adapts to any device
- Landscape and portrait mode
- Full callback API and general methods
- Small file size
- Browser support: Firefox, Chrome, Safari, iOS, Android, and IE7 +
- Tons of configuration options
How to make use of it:
1. Load the jQuery library and the jQuery carousel plugin on your HTML page.
<link rel="stylesheet" href="/path/to/stylesheets/carouselTicker.css" /> <script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/javascripts/jquery.carousel-ticker.js"></script>
2. Create a listing of ticker
objects and wrap them right into a DIV container.
<div class="carouselTicker"> <ul class="carouselTicker__list"> <li class="carouselTicker__item">1</li> <li class="carouselTicker__item">2</li> <li class="carouselTicker__item">3</li> <li class="carouselTicker__item">4</li> <li class="carouselTicker__item">5</li> <li class="carouselTicker__item">6</li> <li class="carouselTicker__item">7</li> <li class="carouselTicker__item">8</li> <li class="carouselTicker__item">9</li> <li class="carouselTicker__item">10</li> <li class="carouselTicker__item">11</li> <li class="carouselTicker__item">12</li> <li class="carouselTicker__item">13</li> <li class="carouselTicker__item">14</li> <li class="carouselTicker__item">15</li> </ul> </div>
3. Style the carousel ticker.
.carouselTicker { overflow: hidden; float: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .carouselTicker__list { ... } .carouselTicker__item { ... }
4. Call the carouselTicker()
function on the container to allow the plugin.
$(".carouselTicker").carouselTicker();
5. Adjust the scrolling speed and orientation within the JavaScript.
$(".carouselTicker").carouselTicker({ // animation speed speed: 1, // animation delay delay: 30, // or 'next' direction: "prev", // or 'vertical' mode: "horizontal", // callback onCarouselTickerLoad: function () {}, });
6. API strategies.
// destroy $(".carouselTicker").carouselTicker().destructor(); // reload $(".carouselTicker").carouselTicker().reloadCarouselTicker(); // resize $(".carouselTicker").carouselTicker().resizeTicker(); // stop $(".carouselTicker").carouselTicker().stop(); // run $(".carouselTicker").carouselTicker().run();
7. Trigger a function after the carousel has loaded.
$(".carouselTicker").carouselTicker('onCarouselTickerLoad': function() { // do something });
See Demo And Download
Official Website(yuriyberezovskiy): Click Here
This superior jQuery/javascript plugin is developed by yuriyberezovskiy. For extra Advanced Usage, please go to the official website.