Staff en línea

[html]Slider como Instagram
Tema iniciado por y Añadir a favoritos

[html]Slider como Instagram 
el Vie Dic 15, 2017 10:38 am
staff
[codebox]Slider de imagenes[/codebox]

HTML
[hidecode]
Código:
<div class="wallpaper-overlay"></div>
<div class="wrapper">
  <div class='main-insta'>
      <div class='insta-header'>
        <span>
        </span>
 <span class="header-title">
            <h2>Slider</h2>
            <h3>The Eternal Capital of Palestine</h3>
            <span class="tooltip">Verified as the only capital of the state of Palestine</span>
        </span>
        <span class="dots"></span>
      </div>
      <div class="insta-post">
        <div class="css-slider-wrapper">
            <input type="radio" name="slider" class="slide-radio1" checked id="slider_1">
            <input type="radio" name="slider" class="slide-radio2" id="slider_2">
            <input type="radio" name="slider" class="slide-radio3" id="slider_3">
            <input type="radio" name="slider" class="slide-radio4" id="slider_4">
            <input type="radio" name="slider" class="slide-radio5" id="slider_5">
            <div class="slider-pagination">
              <label for="slider_1" class="page1"></label>
              <label for="slider_2" class="page2"></label>
              <label for="slider_3" class="page3"></label>
              <label for="slider_4" class="page4"></label>
              <label for="slider_5" class="page5"></label> 
            </div>
            <div class="next pagi-main">
              <label for="slider_1" class="numb1"></label>
              <label for="slider_2" class="numb2"></label>
              <label for="slider_3" class="numb3"></label>
              <label for="slider_4" class="numb4"></label>
              <label for="slider_5" class="numb5"></label> 
            </div>
            <div class="previous pagi-main">
              <label for="slider_1" class="numb1"></label>
              <label for="slider_2" class="numb2"></label>
              <label for="slider_3" class="numb3"></label>
              <label for="slider_4" class="numb4"></label>
              <label for="slider_5" class="numb5"></label> 
            </div>
            <div class="slider slide1">
              <div>
                  <h2>Jerusalem shall be ours</h2>
              </div>
            </div>
            <div class="slider slide2">
              <div>
                  <h2>Jerusalem shall be free </h2>
              </div>
            </div>
            <div class="slider slide3">
              <div>
                  <h2>Together we shall walk it's scented air</h2>
              </div>
            </div>
            <div class="slider slide4">
              <div>
                  <h2>Our little hearts have turned into men</h2>
              </div>
            </div>
            <div class="slider slide5">
              <div>
                  <h2>Soon we will pray under Al Aqsa's dome</h2>
              </div>
            </div>
        </div>
      </div>
      <!-- insta-post -->
      <div class="insta-reaction">
        <span></span>
        <span></span>
        <span></span>
        <span></span>   
      </div>
  </div>
</div>
[/hidecode]


CSS
[hidecode]
Código:
.main-insta {
    max-width: 380px;
    min-width: 300px;
    margin: auto;
    background-color: rgba(250, 250, 250, 0.85);
    -webkit-box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
    border-radius: 5px;
}
.insta-header h2:after,
.insta-header .dots,
.insta-reaction span {
    background-image: url(https://2.bp.blogspot.com/-dvvriE9ZKTA/Wi6rZx7U7kI/AAAAAAAAC4g/U2OrjuO9lvIHxdsYTFv_0TFqPpHeGR4NgCLcBGAs/s1600/f2eee39b755e.png);
}
.insta-header {
    padding: 10px;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
  -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}
.insta-header span:nth-child(1) {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-image: url(https://3.bp.blogspot.com/-w6wn_9WJANI/Wi6rYtB-kTI/AAAAAAAAC4c/w8azX7AZVmgsRhzHPpwzGTeei_opUlXiQCLcBGAs/s1600/ff4a5109f997020065090205f56c2c8b.jpg);
    background-size: cover;
    background-position: 100% 25%;
    overflow: hidden;
    float: left;
    margin-right: 8px
}
.insta-header .header-title {
    float: left
}
.insta-header h2 {
    position: relative;
    color: #444;
    margin: 5px 0;
    font-size: 18px;
}
.insta-header h3 {
    color: #03A9F4;
    font-size: 12px
}
.insta-header h2:after {
    content: '';
    width: 19px;
    height: 19px;
    display: inline-block;
    position: absolute;
    background-position: -434px -226px;
    -webkit-transform: scale(.9);
        -ms-transform: scale(.9);
            transform: scale(.9);
    top: 50%;
    margin: -9.5px 0 0 4px;
}
.tooltip {
    top: 10px;
    font-size: 10px;
    width: 100px;
    text-align: center;
    background: rgba(0,0,0,0.3);
    position: absolute;
    padding: 4px;
    border-radius: 3px;
    color: #fff;
    right: 10px;
    display: none;
    text-transform: capitalize;
    z-index: 1;
}
.tooltip:after {
 content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px;
    position: absolute;
    left: -14px;
    top: 7px;
    border-color: transparent rgba(0,0,0,0.3) transparent transparent;
}
.insta-header .header-title:hover .tooltip{
    display: block
}
.insta-header .dots{
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: -434px -345px;
    height: 16px;
    width: 16px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -8px;
}
.insta-post {
    position: relative;
    height: 350px;
    width: 100%;
    overflow: hidden;
}
.css-slider-wrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.slider {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    z-index: 0;
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-align: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-transition: all 1s cubic-bezier(0.01, 0.97, 0.35, 0.99);
    -o-transition: all 1s cubic-bezier(0.01, 0.97, 0.35, 0.99);
    transition: all 1s cubic-bezier(0.01, 0.97, 0.35, 0.99);
}
.slide1,
.page1 {
    background: url(https://3.bp.blogspot.com/-ULPTYqjxQ0E/Wi6rVjtdVdI/AAAAAAAAC4I/6TBeGdPw49s1SSxQpKjHQrUtLxCxStvygCLcBGAs/s1600/1.jpg);
    background-size: cover;
    left: 0;
}
.slide2,
.page2 {
    background: url(https://2.bp.blogspot.com/-n1mRXW_QGfY/Wi6rVevyenI/AAAAAAAAC4E/Ui5_NefPmwwLbzNpUCjTAGHVBuapwWyqACLcBGAs/s1600/2.jpg);
    background-size: cover;
    left: 100%
}
.slide3,
.page3 {
    background: url(https://4.bp.blogspot.com/-FGxjMI1_0EI/Wi6rWNOePOI/AAAAAAAAC4M/XtU8ktClrZ0xjfo0Nf3VJ8nR1mI8eAMuwCLcBGAs/s1600/3.jpg);
    background-size: cover;
    left: 200%
}
.slide4,
.page4 {
    background: url(https://2.bp.blogspot.com/-RRw8jWo6vrg/Wi6rYkY2CvI/AAAAAAAAC4Y/3_ItIrb99AEgGegExl_Ro0VM3-jIYNF0gCLcBGAs/s1600/4.jpg);
    background-size: cover;
    left: 300%;
}
.slide5,
.page5 {
    background: url(https://2.bp.blogspot.com/-cBCRFKl8-oM/Wi6rWnhESyI/AAAAAAAAC4Q/YY8iEpHUurcsKBqegiusBwEeXUeGIZriwCLcBGAs/s1600/5.jpg);
    background-size: cover;
    background-position: center;
    left: 400%;
}
.slider > div {
    text-align: center;
}
.slider h2 {
    color: rgba(250, 250, 250, 0.85);
    font-weight: 900;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    font-size: 40px;
    opacity: 0;
    -webkit-transform: translateX(500px);
    -ms-transform: translateX(500px);
    transform: translateX(500px);
    -webkit-transition: opacity 800ms, -webkit-transform 800ms;
    transition: opacity 800ms, -webkit-transform 800ms;
    -o-transition: transform 800ms, opacity 800ms;
    transition: transform 800ms, opacity 800ms;
    transition: transform 800ms, opacity 800ms, -webkit-transform 800ms;
    -webkit-transition-delay: 1s;
    -o-transition-delay: 1s;
    transition-delay: 1s;
}
.pagi-main {
    position: absolute;
    bottom: 0%;
    z-index: 1000;
    overflow: hidden;
    height: 54px;
    line-height: 54px;
    width: 35px;
    color: #444;
    font-size: 20px;
    background-color: rgba(250, 250, 250, 0.85);
}
.pagi-main > label {
    z-index: 0;
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.previous {
    left: 0;
    border-top-right-radius: 25.5px;
    border-bottom-right-radius: 25.5px;
}
.next {
    right: 0;
    border-top-left-radius: 25.5px;
    border-bottom-left-radius: 25.5px;
}
.previous > label {

}
.previous > label:before {
    content: '\f053';
    font-family: fontAwesome;
    display: inline-block;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}
.next > label {

}
.next > label:before {
    content: '\f054';
    font-family: fontAwesome;
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    display: inline-block;
}
.slider-pagination {
    height: 54.1px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0;
    text-align: center;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.slider-pagination label {
    height: 47px;
    width: 47px;
    border-radius: 50%;
    display: inline-block;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    margin: 0 -6px 0 0;
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.4);
}
.slide-radio1:checked ~ .next .numb2,
.slide-radio2:checked ~ .next .numb3,
.slide-radio3:checked ~ .next .numb4,
.slide-radio4:checked ~ .next .numb5,
.slide-radio5:checked ~ .next .numb1,
.slide-radio2:checked ~ .previous .numb1,
.slide-radio3:checked ~ .previous .numb2,
.slide-radio4:checked ~ .previous .numb3,
.slide-radio5:checked ~ .previous .numb4 {
 
    z-index: 1
}
/* Slider Pagger event */

.slide-radio1:checked ~ .slider-pagination .page1,
.slide-radio2:checked ~ .slider-pagination .page2,
.slide-radio3:checked ~ .slider-pagination .page3,
.slide-radio4:checked ~ .slider-pagination .page4,
.slide-radio5:checked ~ .slider-pagination .page5 {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
    -webkit-box-shadow: 0px 0px 0px 3px #03A9F4;
    box-shadow: 0px 0px 0px 3px #03A9F4;
}
.slide-radio1:checked ~ .slider {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}
.slide-radio2:checked ~ .slider {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}
.slide-radio3:checked ~ .slider {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
}
.slide-radio4:checked ~ .slider {
    -webkit-transform: translateX(-300%);
    -ms-transform: translateX(-300%);
    transform: translateX(-300%);
}
.slide-radio5:checked ~ .slider {
    -webkit-transform: translateX(-400%);
    -ms-transform: translateX(-400%);
    transform: translateX(-400%);
}
.slide-radio1:checked ~ .slide1 h2,
.slide-radio2:checked ~ .slide2 h2,
.slide-radio3:checked ~ .slide3 h2,
.slide-radio4:checked ~ .slide4 h2,
.slide-radio5:checked ~ .slide5 h2 {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    opacity: 1
}
@media only screen and (min-width: 720px) {
  .pagi-main, .slider-pagination{
    -webkit-transition: .3s ease;
-o-transition: .3s ease;
transition: .3s ease
  }
  .next {
    right: -20px;
}
    .previous {
    left: -20px;
}
  .main-insta:hover .next{
    right: 0px;
  }
  .main-insta:hover .previous{
    left: 0px;
  }
  .slider-pagination{
    bottom: -54.1px;
    }
  .main-insta:hover .slider-pagination{
        bottom: 0;
  }
}

.insta-reaction {
    padding: 10px 10px 6px;
    position: relative;
    -webkit-user-select: none;
  -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}
.insta-reaction span {
    background-repeat: no-repeat;
    height: 24px;
    width: 25px;
    display: inline-block;
    overflow: hidden;
    cursor: pointer;
    margin-right: 10px;
}
.insta-reaction span:first-child {
    background-position: -407px -156px;
}
.insta-reaction span:nth-child(2) {
    background-position: -407px -26px;
}
.insta-reaction span:nth-child(3) {
    background-position: -104px -389px;
}
.insta-reaction span:nth-child(4) {
    position: absolute;
    right: 10px;
    margin-right: 0px;
    background-position: -364px -391px;
}
[/hidecode]

El código tendrás que personalizar las balizas. Los iconos de buscar, me gusta y demás son meramente decorativos.

[likepost][time="8/04/18 - 20:58 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], [time="26/02/18 - 8 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/13-41.jpg" user_id="http://www.opensourcephpbb3.com/u13"][userlike="http://www.opensourcephpbb3.com/u13"] Lelu[/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

Re: [html]Slider como Instagram 
el Dom Feb 25, 2018 7:48 am
Muchas gracias por este code![likepost][time="20/05/18 - 9:16 hrs."][avatar="https://s.yimg.com/wv/images/cbe5af0680d53694356a643fe831528c_96.jpeg" user_id="https://source.foroactivo.com/u105"][userlike="https://source.foroactivo.com/u105"] Ysamar[/userlike], [time="11/05/18 - 18 hrs."][avatar="https://s.yimg.com/wv/images/cbe5af0680d53694356a643fe831528c_96.jpeg" user_id="https://www.opensourcephpbb3.com/u105"][userlike="https://www.opensourcephpbb3.com/u105"] Ysamar[/userlike], [time="7/03/18 - 9 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/1-51.gif" user_id="https://www.opensourcephpbb3.com/u1"][userlike="https://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

Re: [html]Slider como Instagram 
el Dom Feb 25, 2018 9:06 am
Ups se me cerro la pag [likepost][time="7/03/18 - 9:41 hrs."][avatar="https://imgfast.net/users/3214/29/54/58/avatars/1-51.gif" 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

Re: [html]Slider como Instagram 
el Dom Abr 08, 2018 11:45 am
staff
Excelente aporte muy bueno....
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

Re: [html]Slider como Instagram 
el Mar Mayo 01, 2018 1:27 pm
Miro de nuevo para revisar mi code graciasssss
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

Re: [html]Slider como Instagram 
el Miér Mayo 09, 2018 12:45 pm
Que interesante! me parece una idea muy buena para enriquecer las imagenes, a ver como va...
Ysamar
avatar

¿Que estoy pensando? :

jjp´j [table class=fecha_up][td]Se modifico:10/05/18 - 19:04 hrs. [/td][/table]


Banner en temas :

http://descargarimagenestiernas.com/wp-content/uploads/2015/07/imagenes-tiernas-con-frases-para-descargar-3.jpg


Color de titulos :

#333


Sombra titulo :

1px 1px 1px #fff


Mensajes :

68


Puntos :

78


Me gusta :

10


ingreso :

28/11/2015


Sexo :

Femenino

Plataforma :

phpbb3


Navegador :

chrome


Ver perfil de usuario

Volver arriba Ir abajo

Re: [html]Slider como Instagram 
el Vie Jul 06, 2018 10:43 pm
intenté usar el de un slider genial para tu foro y no pude ponerlo jeje, intentaré con este
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

 En la misma categoria


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