1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda SlidesJs Fixed

Tema en 'Jquery' comenzado por jorge ruiz, 15 de Septiembre de 2016.

  1. jorge ruiz

    jorge ruiz Nuevo Miembro

    Se incorporó:
    27 de Agosto de 2016
    Mensajes:
    6
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Hola

    Tengo un problema con un sitio, estoy tratando de crear una seccion con un slider que abarque toda la pantalla y lo estoy poniendo como position: Fixed pero no funciona. Si parece funcionar pero cuando reinicio el navegador deja de funcionar, no me muestra las imagenes. No se si sea un problema de Jquery o a que se deba esto.

    A la clase .slides le puse un position:fixed;

    Cuando cambio estas dos líneas de orden:
    <script src="jquery.slides.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    Me muestra la primera imagen pero no funciona el slide.

    Gracias por el apoyo!


    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>

       
        <meta charset="UTF-8">
        <title>Fishbury</title>
        <link rel="stylesheet" href="css/style.css">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <script src="jquery.slides.min.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:700|Roboto:300,400,700" rel="stylesheet">



        <script>
            $(function(){
              $("#slides").slidesjs({
                width: 940,
                height: 528
              });
            });
          </script>
    </head>
    <body>
       
            <div class="slides" id="slides">
                <img src="images/menu1.jpeg">
                <img src="images/menu2.jpeg">
                <img src="images/menu3.jpeg">
            </div>
       
        <header>
            <img src="images/logo.png" alt="">
            <ul>
                <li>Visítanos</li>
                <li>Promociones</li>
                <li>Menú</li>
                <li>Nosotros</li>
            </ul>
        </header>
        <section class="main">
            <div class="main-container">
                <h1>FISH & CHIPS</h1>
               <div class="circulo">
                   <span>Ver Menú</span>
               </div>          
           </div>
       </section>
       <section class="main main2">
           <div class="main-container">
               <h1>FISHBURY</h1>
               <p>FISHBURY es una empresa joven, 100% mexicana, dedicada al negocio de la hospitalidad que tiene como objetivo exceder las expectativas de sus consumidores.

               Innovadores del concepto “FISH & CHIPS”, ya que además de ofrecer alimentos y bebidas de la mejor calidad a excelentes precios, cuenta con un variado y delicioso menú que hará que sus clientes regresen una y otra vez.</p>
           </div>
       </section>
     
       <section class="main3">
           <div class="menu-container">
               <div>
                   <h2>Menú</h2>
                   <img class="menu-img" src="images/menu-icon1.png" alt="">
               </div>
               <div>
                   <img src="images/menu-icon2.png" alt="">
                   <h3><a href="">Appetizers</a></h3>
               </div>
               <div>
                   <h3><a href="">Tacos</a></h3>
                   <img src="images/menu-icon3.png" alt="">
               </div>
               <div>
                   <img src="images/menu-icon4.png" alt="">
                   <h3><a href="">Fish & Chips</a></h3>
               </div>
               <div>
                   <h3><a href="">Special & Chips</a></h3>
                   <img src="images/menu-icon5.png" alt="">
               </div>
               <div>
                   <img src="images/menu-icon6.png" alt="">
                   <h3><a href="">Sandwiches</a></h3>
               </div>
               <div>
                   <h3><a href="">Burguers</a></h3>
                   <img src="images/menu-icon7.png" alt="">
               </div>
               <div>
                   <img src="images/menu-icon8.png" alt="">
                   <h3><a href="">Salads</a></h3>
               </div>
               <div>
                   <h3><a href="">Extras</a></h3>
               </div>
           </div>
       </section>
       <section class="main3">
           <div class="menu-container">
                   <div>
                       <h2>Appetizers</h2>
                       <img class="menu-img" src="images/menu-icon1.png" alt="">
                   </div>
               <div>
                   <div></div>
                   <div></div>
                   <div></div>
                   <div></div>
               </div>
               <div>
                   <div></div>
                   <div></div>
                   <div></div>
                   <div></div>
               </div>
           </div>
       </section>
    </body>
    </html>
     
  2. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.147
    Me gusta recibidos:
    515
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
  3. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    547
    Me gusta recibidos:
    418
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Primero más que nada... las posiciones de los script, primero es jQuery y luego el jQuery del slider

    Código (Javascript):
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="js/jquery.slides.min.js"></script>
    Sobre la posición fixed... Es un elemento que no deja espacio en el lugar de la página donde estaba ubicado normalmente... tiene que asignarle un tamaño para en ese caso... Pero además esa posición se lo estas colocando a tus div donde se encuentran las imágenes, te recomendaría que no lo utilizaras para un movimiento slider.... ya que al momento si contienes información debajo del slider no podrás visualizarla al hacer un scroll, ya que la posición fixed se posicionará sobre la ventana de manera relativa..

    sobre tu script del slider es correcto y te funciona, en el cual puedes agregarle otras características

    Código (Javascript):
    $('#slides').slidesjs({
            width: 940,
            height: 528,
            start: 3, // posición que inicia el elemento
            play: {
              auto: true // se ejecuta automáticamente.
            }
          });
    Espero que resuelva tu duda....
     
    A AngelKrak le gusta esto.
  4. jorge ruiz

    jorge ruiz Nuevo Miembro

    Se incorporó:
    27 de Agosto de 2016
    Mensajes:
    6
    Me gusta recibidos:
    1
    Puntos de trofeos:
    3
    Género:
    Hombre
    Excelente.
    Agregue un z-index: -1;
    con eso se soluciono, es que el slider lo quise usar como fondo y creo que con el -1 ya no estorba a ningún elemento y si funciona.

    Gracias!
     

Comparte esta página