Staff en línea
Últimos temas
[html]Un Slider de imágenes genial para tu foro Origin10[html] cambia el popup de notificación de mensaje privado por uno profesional
por Lelu Jue Nov 28, 2019 7:09 am

[html]Un Slider de imágenes genial para tu foro Origin10[html]Menú de enlaces simple
por Lelu Jue Nov 28, 2019 6:30 am

[html]Un Slider de imágenes genial para tu foro Origin10[html]Menú dinámico
por Lelu Jue Nov 28, 2019 6:11 am

[html]Un Slider de imágenes genial para tu foro Origin10[html]Escaparate de imágenes sencillo
por Lelu Jue Nov 28, 2019 6:02 am

[html]Un Slider de imágenes genial para tu foro Origin10[Duda] ModernBB vale la pena?
por mrsrz Miér Nov 27, 2019 9:57 am

[html]Un Slider de imágenes genial para tu foro Origin10[Ocio] Contemos hasta el 5000
por Fibo Miér Nov 27, 2019 9:19 am

 :: Modifica tu foro :: Templetes/HTML

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

#1
[html]Un Slider de imágenes genial para tu foro 
el Vie Dic 15, 2017 10:25 am
staff
[codebox]Slider de imagenes[/codebox]
[html]Un Slider de imágenes genial para tu foro 0krcQBoh
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://7img.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://7img.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
RinC

¿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 :

1149


Me gusta :

200


ingreso :

28/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Responder Mensaje privado
#2
Re: [html]Un Slider de imágenes genial para tu foro 
el Miér Abr 11, 2018 12:03 pm
Gracias Por Publicarlo :3
Gracias :3

[likepost][time="12/09/18 - 13:07 hrs."][avatar="https://7img.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.
House M. D.

¿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 :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

35


Puntos :

56


Me gusta :

19


ingreso :

27/07/2017


Sexo :

Masculino

Plataforma :

phpbb3


Navegador :

chrome


https://mozko-team.foroactivo.com

Volver arriba Ir abajo

Responder Mensaje privado
#3
Re: [html]Un Slider de imágenes genial para tu foro 
el Mar Mayo 01, 2018 1:25 pm
Muchas Graciasssssss a ver si lo puedo implementar [html]Un Slider de imágenes genial para tu foro 953422333

[likepost][time="12/09/18 - 18:47 hrs."][avatar="https://7img.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
Lelu

¿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 :

34


Puntos :

55


Me gusta :

21


ingreso :

08/01/2015


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


http://secretsdesires.forosactivos.net/

Volver arriba Ir abajo

Responder Mensaje privado
#4
Re: [html]Un Slider de imágenes genial para tu foro 
el Vie Jul 06, 2018 9:22 pm
se ve genial, gracias!

[likepost][time="12/09/18 - 18:47 hrs."][avatar="https://7img.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
Valele

¿Que estoy pensando? :

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


Banner en temas :

https://2img.net/h/oi64.tinypic.com/2i8tzma.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

45


Puntos :

66


Me gusta :

11


ingreso :

11/06/2018


Sexo :

Femenino

Plataforma :

PhpBB3


Navegador :

Chrome


Volver arriba Ir abajo

Responder Mensaje privado
#5
Re: [html]Un Slider de imágenes genial para tu foro 
el Sáb Jul 07, 2018 12:50 pm
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
kensha

¿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


http://bookland.activosforos.com

Volver arriba Ir abajo

Responder Mensaje privado
#6
Re: [html]Un Slider de imágenes genial para tu foro 
el Jue Sep 06, 2018 1:07 pm
Gracias por mostrarlo, a ponerse en marcha!

[likepost][time="12/09/18 - 13:07 hrs."][avatar="https://7img.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
Fireheart

¿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 :

https://2img.net/h/oi64.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


Volver arriba Ir abajo

Responder Mensaje privado
#7
Re: [html]Un Slider de imágenes genial para tu foro 
el Lun Sep 10, 2018 7:10 pm
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
Dosh

¿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 :

1698


Puntos :

2458


Me gusta :

468


ingreso :

07/12/2014


Sexo :

Masculino

Plataforma :

punbb


Navegador :

Chrome


http://www.telefoneros.com/

Volver arriba Ir abajo

Responder Mensaje privado

 En la misma categoria

 Temas relacionados

 :: Modifica tu foro :: Templetes/HTML

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