Grupo TELEGRAM SoyWebmaster - Click para unirteEntrevista a Pablo Aracil - SEO e influencer de moda
Resultados 1 al 3 de 3

Tema: Su ayuda por favor: Integrar css, javascript en un sólo archivo html

  1. #1
    asde está desconectado Registrado
    Rango: Quizás estoy
    haciendo Spam ...

    User Info Menu

    Votacion Su ayuda por favor: Integrar css, javascript en un sólo archivo html

    Hola a todos, soy nuevo en este tema así que agradecería mucho su ayuda.

    En este link https://codepen.io/anon/pen/JyeEdj se puede ver un slide de imágenes (la idea es poner logos ahí) pero en ese ejemplo está separado css. javascript. y html. intenté unirlo de esta manera


    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">

    *, *:before, *:after {
    box-sizing: border-box;
    }

    $bg-color: #d9d8c6;
    $primary-color: #5b5a5c;
    $secondary-color: darken($primary-color, 15%);

    body {
    background: $bg-color;
    }

    li {
    list-style: none;
    }

    .suga-container {
    background: $primary-color;
    padding: .2em;
    max-width: 570px;
    margin: 5em auto;
    box-shadow: 3px 3px 0px $secondary-color;
    border: 2px solid $secondary-color;
    border-radius: 5px;
    }

    .suga-slider-wrap {
    overflow: hidden;
    margin: 1em;
    }


    .suga-slider-group {
    &:before,
    &:after {
    content: " ";
    display: table;
    }

    &:after {
    clear: both;
    }
    }

    .suga-slide {
    float: left;
    position: relative;
    margin-left: 0;
    padding-right: 8px;
    }

    </style>

    <script>
    $.fn.suga = function(options) {
    var settings = $.extend({
    'transitionSpeed': 3000,
    'snap': false
    }, options);

    var $this = $(this);

    // add plugin specific classes
    $this.addClass('suga-slider-wrap');
    $this.children('ul').addClass('suga-slider-group');
    $this.find('li').addClass('suga-slide');

    // caching $$$
    var $slide = $('.suga-slide'),
    $firstEl = $('.suga-slide:first'),
    $group = $('.suga-slider-group'),
    $wrap = $('.suga-slider-wrap');

    var slideWidth = $slide.outerWidth(),
    slideHeight = $('.suga-slide').height(),
    slideCount = $slide.length,
    totalWidth = slideWidth * slideCount;

    // set width on group element
    $group.width(totalWidth);
    $wrap.height(slideHeight);
    $wrap.wrap('<div class="suga-container"></div>');

    // add first class at start
    if (!$group.find($firstEl).hasClass("suga-first")) {
    $group.find($firstEl).addClass("suga-first");
    }

    // lets move baby
    var transitionSnap = function() {
    var $firstEl = $group.find('.suga-first').html();

    $group.find('.suga-first').animate({
    'margin-left': '-' + slideWidth + 'px'
    }, function(){
    $group.append('<li class="suga-slide">' + $firstEl + '</li>');
    $(this).remove();
    $group.find('li:first').addClass("suga-first");

    });
    };

    var transitionScroll = function() {
    var $firstEl = $group.find('.suga-first').html();

    $group.find('.suga-first').animate({
    'margin-left': '-' + slideWidth + 'px'
    }, settings.transitionSpeed, 'linear', function(){
    $group.append('<li class="suga-slide">' + $firstEl + '</li>');
    $(this).remove();
    $group.find('li:first').addClass("suga-first");
    transitionScroll();
    });
    };

    if (settings.snap) {
    window.setInterval(transitionSnap, settings.transitionSpeed);
    } else {
    transitionScroll();
    }
    }


    $(window).load(function(){
    $('#logos').suga({
    'transitionSpeed': 2000,
    'snap': true
    });
    });

    </script>
    </head>

    <body>
    <div id="logos">
    <ul>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    <li><img src="http://placehold.it/100x100" /></li>
    </ul>
    </div>
    </body>
    </html>

    pero me sale una sola lista estática hacia abajo así:



    como podría solucionar esto y que me funcione el slide poniendo en un sólo html todo el código? gracias!!

  2. #2
    moisesphp está desconectado Registrado

    User Info Menu

    Predeterminado

    Hola, te remiendo probar primero como te viene en la demo con los 3 ficheros independientes e ir probando si funciona. Luego vas incluyendo su código CSS y JavaScript en el html directamente y pruebas.

  3. #3
    jose233167 está desconectado Registrado

    User Info Menu

    Predeterminado

    Es raro creo que te debería funcionar, prueba lo que dice el compañero y nos cuentas

Etiquetas para este Tema

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •  

Otros Foros de Interés

Curso SEO - Foro SEO - Foro Programacion - Foro Diseño Web - Intercambio de Enlaces - Negocios por Internet - Como Ganar Dinero - Hosting Gratuito - Foro Apuestas Deportivas
Usamos cookies que analizan hábitos de comportamiento y navegación que aceptas al entrar. Política de privacidad-cookies-aviso legal