Carousel Style Content Ticker Plugin with jQuery - Carousel Ticker
File Size: | 91.6 KB |
---|---|
Views Total: | 18137 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Carousel Ticker is a jQuery plugin for infinitely scrolling an unordered list of Html content with dragging/swiping and stop-on-hover support.
Ideal for making a news ticker containing any Html content on your web page or web application.
How to use it:
1. Load jQuery library and the jQuery carousel ticker plugin in your HTML document.
<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 list of ticker items and the wrap them 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 whatever you want.
.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 element to enable the plugin.
$(".carouselTicker").carouselTicker();
5. Adjust the scrolling speed and orientation in 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 methods.
// 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 });
Changelog:
2021-04-17
- v1.0.0
2021-02-20
- Fixed event handling
2020-11-14
- Fix/timer clearing
2015-04-20
- add fix if content block has only text
2015-04-16
- update.
2015-01-27
- fix starting move carousel after touch scroll
This awesome jQuery plugin is developed by yuriyberezovskiy. For more Advanced Usages, please check the demo page or visit the official website.