Quería saber si existe alguna forma de agregarle flechas para hacerlo correr a este tipo de carrusel, además de que tenga el touch (que ya viene por defecto) y que corra por sí solo.
Éste es mi código:
(function($, undefined) {
$(window).on("load", function() {
$("#carouselTicker").carouselTicker();
})
$("#carouselTicker1").carouselTicker({
"direction": "next"
});
$("#carouselTicker1").carouselTicker({
"direction": "next"
});
$(".carouselTicker-start").carouselTicker({
"direction": "next"
});
var carouselTickerWidthResize = $("#carouselTicker-width-resize").carouselTicker();
$(window).on('resize', function() {
carouselTickerWidthResize.resizeTicker();
});
$("#carouselTicker-vertical").carouselTicker({
"mode": "vertical",
"direction": "prev"
});
$("#carouselTicker-vertical-with-callback").carouselTicker({
"mode": "vertical",
"direction": "next",
"onCarouselTickerLoad": function() {
console.log("callback")
}
});
})(jQuery);
#main-content {
float: left;
width: 900px;
}
#main-content img {
max-width: 100%;
}
/* MISC */
.clearfix:after {
display: block;
height: 0;
clear: both;
visibility: hidden;
content: '.';
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#main-content {
width: 490px;
}
#main-content h1:before,
#main-content h2:before,
#main-content h3:before,
#main-content h4:before,
#main-content h5:before,
#main-content h6:before {
padding-right: 0;
margin-left: 0;
content: none;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
#main-content h1:before,
#main-content h2:before,
#main-content h3:before,
#main-content h4:before,
#main-content h5:before,
#main-content h6:before {
padding-right: 0;
margin-left: 0;
content: none;
}
}
.carouselTicker__list {
margin: 10px 0;
padding: 0;
list-style-type: none;
overflow: hidden;
}
.carouselTicker__item {
margin: 0 0 0 5px;
float: left;
border: 4px solid red;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
.carouselTicker__loader {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #fff url("../images/loader.gif") center center no-repeat;
}
/**
* CSS style for vertical direction
**/
.carouselTicker_vertical .carouselTicker__list {
margin: 0;
}
.carouselTicker_vertical .carouselTicker__item {
margin: 0 0 5px 0;
border: 4px solid red;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
#carouselTicker .carouselTicker__item {
width: auto;
height: auto;
line-height: normal;
}
.carouselTicker__item img {
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Carousel-Style-Content-Ticker-Plugin-with-jQuery-Carousel-Ticker/javascripts/jquery.carousel-ticker.js"></script>
<section id="main-content">
<div id="demos">
<div id="carouselTicker" class="carouselTicker">
<ul class="carouselTicker__list">
<li class="carouselTicker__item">
<a href="#"><img src="http://placehold.it/190x65" alt="banner image"></a>
</li>
<li class="carouselTicker__item">
<a href="#"><img src="http://placehold.it/190x65" alt="banner image"></a>
</li>
<li class="carouselTicker__item">
<a href="#"><img src="http://placehold.it/190x65" alt="banner image"></a>
</li>
<li class="carouselTicker__item">
<a href="#"><img src="http://placehold.it/190x65" alt="banner image"></a>
</li>
<li class="carouselTicker__item">
<a href="#"><img src="http://placehold.it/190x65" alt="banner image"></a>
</li>
<li class="carouselTicker__item">
<a href="#"><img src="http://placehold.it/190x65" alt="banner image"></a>
</li>
</ul>
</div>
</div>
</section>