7
respostas

Materialize Source

Bom dia , baixei o source do materialize para usar apenas algumas funções como por exemplo o slider carousel , porém eu não estou conseguindo fazer funcionar , creio eu que precisa de algum código na frente . Já coloquei:

$(document).ready(function(){
    $('.carousel').carousel();
  });

Mas mesmo assim não pegou , por ser um código separado oq eu posso fazer para pegar ?

O começo do código está assim

$(document).ready(function ($) {
  'use strict';

  let _defaults = {
    duration: 200, // ms
    dist: -100, // zoom scale TODO: make this more intuitive as an option
    shift: 0, // spacing for center image
    padding: 0, // Padding between non center items
    numVisible: 5, // Number of visible items in carousel
    fullWidth: false, // Change to full width styles
    indicators: false, // Toggle indicators
    noWrap: false, // Don't wrap around and cycle through items.
    onCycleTo: null // Callback for when a new slide is cycled to.
  };


  /**
   * @class
   *
   */
  class Carousel extends Component {
    /**
     * Construct Carousel instance
     * @constructor
     * @param {Element} el
     * @param {Object} options
     */
7 respostas

Olá, Bruno.

Você está recendo algum mensagem de erro? Já verificou na aba network do developer tools do seu navegador se o código do material está sendo baixado normalmente?

Está falando que o código está errado ! Que alguma função não está definida , no começo pensei que fosse o jquery porém ele está funcionando normalmente .

Coloca o erro pra gente ver qual é a função que está dando erro?

carousel.js:17 Uncaught ReferenceError: Materialize is not defined
    at w.fn.init.init (carousel.js:17)
    at w.fn.init.$.fn.carousel (carousel.js:560)
    at index2.html:38

linha 17 : var namespace = Materialize.objectSelectorString($(this)); linha 560: return methods.init.apply( this, arguments ); linha 38: $('.carousel.carousel-slider').carousel({

Como eu disse estou usando o source deles , so está o código do carrossel porém não funciona !

O erro que você está recendo está te falando que o Objetivo Materialize não foi definido. Na aba network do seu developer tools você consegue verificar se a biblioteca do Materialize está sendo baixada. Por favor, da uma olhada nessa aba pra verificar se não deve nenhum erro de caminho para arquivo da biblioteca do Materialize?

Então fiz oq você falou , todas as bibliotecas estão sendo baixadas, estou até fazendo o teste com o materialize.js completo ( com todas as funções ) ai imediatamente funciona, so que o carousel.js sozinho não está !

No erro que você mandou está falando que não achou a definição do Materialize. Eu nunca usei esse framework mas dando uma olhada na documentação o objeto JavaScript do materialize se chama M. Troca no seu código onde está Materiazlize por M?

Link pra documentação que comentei: https://materializecss.com/carousel.html

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software