Staff en línea

[html]Un Slider de imágenes genial para tu foro
Tema iniciado por y Añadir a favoritos

staff
[codebox]Slider de imagenes[/codebox]

HTML
[hidecode]
Código:
<div id="slider">
  <a href="#" class="control_next">>></a>
  <a href="#" class="control_prev">
    <</a>
      <ul>
        <li>SLIDE 1</li>
        <li style="background: #aaa;">SLIDE 2</li>
        <li>SLIDE 3</li>
        <li style="background: #aaa;">SLIDE 4</li>
      </ul>
</div>

<div class="slider_option">
  <input type="checkbox" id="checkbox">
  <label for="checkbox">Autoplay Slider</label>
</div>
[/hidecode]

CSS
[hidecode]
Código:
#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto 0 auto;
  border-radius: 4px;
}

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 2px 2px 0;
}

a.control_next {
  right: 0;
  border-radius: 2px 0 0 2px;
}

.slider_option {
  position: relative;
  margin: 10px auto;
  width: 160px;
  font-size: 18px;
}
[/hidecode]

JS
[hidecode]
Código:
jQuery(document).ready(function($) {
  $("#checkbox").change(function() {
    setInterval(function() {
      moveRight();
    }, 3000);
  });

  var slideCount = $("#slider ul li").length;
  var slideWidth = $("#slider ul li").width();
  var slideHeight = $("#slider ul li").height();
  var sliderUlWidth = slideCount * slideWidth;

  $("#slider").css({ width: slideWidth, height: slideHeight });

  $("#slider ul").css({ width: sliderUlWidth, marginLeft: -slideWidth });

  $("#slider ul li:last-child").prependTo("#slider ul");

  function moveLeft() {
    $("#slider ul").animate(
      {
        left: +slideWidth
      },
      200,
      function() {
        $("#slider ul li:last-child").prependTo("#slider ul");
        $("#slider ul").css("left", "");
      }
    );
  }

  function moveRight() {
    $("#slider ul").animate(
      {
        left: -slideWidth
      },
      200,
      function() {
        $("#slider ul li:first-child").appendTo("#slider ul");
        $("#slider ul").css("left", "");
      }
    );
  }

  $("a.control_prev").click(function() {
    moveLeft();
  });

  $("a.control_next").click(function() {
    moveRight();
  });
});
[/hidecode]



[likepost][time="12/09/18 - 13:07 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/43-5.jpg" user_id="http://www.opensourcephpbb3.com/u43"][userlike="http://www.opensourcephpbb3.com/u43"] Roger[/userlike], [time="11/09/18 - 20 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/4-0.jpg" user_id="http://www.opensourcephpbb3.com/u4"][userlike="http://www.opensourcephpbb3.com/u4"] Dosh[/userlike][/likepost]
RinC
avatar

¿Que estoy pensando? :

Ni se te ocurra -_- [table class=fecha_up][td]Se modifico:29/03/18 - 17:44 hrs. [/td][/table]


Banner en temas :

♥♥Open♥♥


Color de titulos :

#DF7401


Sombra titulo :

1px 1px 1px #fff


Mensajes :

789


Puntos :

1147


Me gusta :

198


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

Gracias Por Publicarlo :3
Gracias :3

[likepost][time="12/09/18 - 13:07 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/43-5.jpg" user_id="http://www.opensourcephpbb3.com/u43"][userlike="http://www.opensourcephpbb3.com/u43"] Roger[/userlike][/likepost]
House M. D.
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

35


Puntos :

54


Me gusta :

17


ingreso :

27/07/2017


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario https://mozko-team.foroactivo.com

Volver arriba Ir abajo

Muchas Graciasssssss a ver si lo puedo implementar

[likepost][time="12/09/18 - 18:47 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/43-5.jpg" user_id="http://www.opensourcephpbb3.com/u43"][userlike="http://www.opensourcephpbb3.com/u43"] Roger[/userlike], [time="12/09/18 - 13 hrs."][avatar="https://illiweb.com/fa/i/avatars/gallery/Cinema/Cinema_67.jpg" user_id="http://www.opensourcephpbb3.com/u1"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike][/likepost]
Lelu
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://portadafb.com/wp-content/uploads/2012/05/portada-facebook-nyan-cat.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

29


Puntos :

50


Me gusta :

21


ingreso :

08/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://secretsdesires.forosactivos.net/

Volver arriba Ir abajo

se ve genial, gracias!

[likepost][time="12/09/18 - 18:47 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/43-5.jpg" user_id="http://www.opensourcephpbb3.com/u43"][userlike="http://www.opensourcephpbb3.com/u43"] Roger[/userlike], [time="12/09/18 - 13 hrs."][avatar="https://illiweb.com/fa/i/avatars/gallery/Cinema/Cinema_67.jpg" user_id="http://www.opensourcephpbb3.com/u1"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike][/likepost]
Valele
avatar

¿Que estoy pensando? :

send help [table class=fecha_up][td]Se modifico:2/010/18 - 8:45 hrs. [/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

44


Puntos :

62


Me gusta :

10


ingreso :

11/06/2018


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

gracias lo voy a probar

[likepost][time="12/09/18 - 13:07 hrs."][avatar="https://illiweb.com/fa/i/avatars/gallery/Cinema/Cinema_67.jpg" user_id="http://www.opensourcephpbb3.com/u1"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike][/likepost]
kensha
avatar

¿Que estoy pensando? :

regresando [table class=fecha_up][td]Se modifico:27/03/17 - 9:42 hrs.[/td][/table]


Banner en temas :

http://facecoverz.com/static/img/uploads/o_facecoverz.com-1365693265366.jpg


Color de titulos :

#0FAEAC


Sombra titulo :

1px 1px 1px #fff


Mensajes :

287


Puntos :

421


Me gusta :

82


ingreso :

12/05/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Ver perfil de usuario http://bookland.activosforos.com

Volver arriba Ir abajo

Gracias por mostrarlo, a ponerse en marcha!

[likepost][time="12/09/18 - 13:07 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/43-5.jpg" user_id="http://www.opensourcephpbb3.com/u43"][userlike="http://www.opensourcephpbb3.com/u43"] Roger[/userlike], [time="9/09/18 - 12 hrs."][avatar="https://illiweb.com/fa/i/avatars/gallery/Cinema/Cinema_67.jpg" user_id="http://www.opensourcephpbb3.com/u1"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike][/likepost]
Fireheart
avatar

¿Que estoy pensando? :

Escribe lo que tienes en mente [table class=fecha_up][td]Se modifico:10/7/15 - 15:25 hrs.[/td][/table]


Banner en temas :

http://i64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

6


Puntos :

15


Me gusta :

9


ingreso :

06/09/2018


Sexo :

Femenino

Plataforma :

Wordpress


Navegador :

Chrome


Ver perfil de usuario

Volver arriba Ir abajo

staff
@RinC Gracias por el aporte...

[likepost][time="12/09/18 - 13:07 hrs."][avatar="https://illiweb.com/fa/i/avatars/gallery/Cinema/Cinema_67.jpg" user_id="http://www.opensourcephpbb3.com/u1"][userlike="http://www.opensourcephpbb3.com/u1"] Chalo[/userlike][/likepost]
Dosh
avatar

¿Que estoy pensando? :

Vuelve el hijo prodigo... [table class=fecha_up][td]Se modifico:1/010/18 - 15:59 hrs. [/td][/table]


Banner en temas :

https://i.imgur.com/JdnysKr.png


Color de titulos :

#fff


Sombra titulo :

1px 1px 1px #fff


Mensajes :

1585


Puntos :

2328


Me gusta :

453


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


Ver perfil de usuario http://www.telefoneros.com/

Volver arriba Ir abajo

 En la misma categoria


Permisos de este foro:
No puedes responder a temas en este foro.