1

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>

2
  • 1
    Hola Mariano, la página oficial no es la que has puesto, esa parece una página que recopila plugins, la página del autor es ésta. Aparte, sería bueno que agregaras algo más de detalle a la pregunta: ¿qué flechas quieres agregar?¿qué funcionalidad tendrán o quieres que tengan?¿con qué problemas te estás encontrando al agregarlas?
    – Alvaro Montoro
    Commented el 19 dic. 2017 a las 14:17
  • Hola Alvaro si perdón la pagina no es oficial, con respecto a lo que quiero es poder agregarle unas flechas para hacerlo correr ademas de la funcionalidades que trae por defecto. La idea es que uno también pueda hacerlo correr manualmente. el problema es que no se como agregarlas y en base a que tendria que hacerlas.
    – MarianoF
    Commented el 19 dic. 2017 a las 14:19

1 respuesta 1

1

Buenas amigo la libreria como tal creo que no tiene esa funcionalidad pero en su defecto puedes programarlo tu mismo para eso hay que agregarle al elemento .carouselTicker__list que contiene todas las imagenes el left deseado en caso de la flecha1(<) le quitamos -=200px y en el caso de la flecha2(>) le agregamos -=200 espero te ayude saludos.

Explicación Detallada

Para agregar a un elemento una propiedad, sumándole a la que ya posee usamos += y para restarle usamos -=.

En este caso queremos una animación al agregar y quitar los px al left para eso usamos la función animate()

$(".carouselTicker__list").animate({"left":"-=200px"}) //quitar

$(".carouselTicker__list").animate({"left":"+=200px"}) //agregar

Ejemplo Funcional

(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);

/*Nuevas functiones para las flechas*/
  $(".flecha1").click(function(){
    $(".carouselTicker__list").animate({"left":"-=200px"})
  })
  
    $(".flecha2").click(function(){
    $(".carouselTicker__list").animate({"left":"+=200px"})
  })
#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;
}


/*Nuevo codigo Flechas*/
*{
  padding:0;
  margin:0;
}
#main-content{
  width:100% !important;
}

.con-carrusel{
  position:relative;
  overflow:hidden;
  width:100%;
}
.flecha1 {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:100;
  background: rgb(255, 255, 255);
  color: rgb(86, 131, 191);
  border: 0px;
  outline: none;
  box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.flecha2 {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index:100;
  background: rgb(255, 255, 255);
  color: rgb(86, 131, 191);
  border: 0px;
  outline: none;
  box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
.flecha1,.flecha2{
  font-size: 24px;
  cursor: pointer;
  transition: all .3s ease;
}
.flecha1:hover,.flecha2:hover{
  background: rgb(86, 131, 191);
  color: rgb(255, 255, 255);
}
<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 class="con-carrusel">
<button class="flecha1" type="button" name="button"><i class="fa fa-angle-left" aria-hidden="true"></i></button>
    <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>
    <button class="flecha2" type="button" name="button"><i class="fa fa-angle-right" aria-hidden="true"></i></button>
</div>


  </div>
</section>

<script src="https://use.fontawesome.com/ef8ad22161.js"></script>

2
  • Gracias Luis, por la ayuda me re sirvió
    – MarianoF
    Commented el 19 dic. 2017 a las 15:36
  • Excelente amigo dale como respuesta correcta para que los demás programadores encuentren la solución en caso de tener el mismo problema y buscar la solución saludos. Commented el 19 dic. 2017 a las 15:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.