Carousel Mol Tecnologia e Inovação

Instalação do Carousel Mol

Na hora da instalação do Carousel Mol você terá duas opções:

Instalação da versão simples, 1 slide por vez

Veja como é fácil installar o Carousel Mol Simples

Instalação versão simples, 1 slide por vez

Defina uma div com a classe "car-mol-23-box":

<div class="car-mol-23-box"></div>

Defina uma div com a classe "car-mol-23-box" e id (único) "id-unico":

<div class="car-mol-23" id="id-unico"></div>

Cada item do slide deve ficar envolvido dentro de uma div com classe "item":

<div class="item">
	<img src="https://mol.dev.br/img/carousel-mol-slide-1-tecnologia.webp" alt="Alt">
</div>
<div class="item">
	<img src="https://mol.dev.br/img/carousel-mol-slide-1-tecnologia.webp" alt="Alt">
</div>

<div class="item">
	<h2>Títulos</h2>
	<p>Paragráfo</p>
</div>

Ao final deverá ter uma estrutura similar a esta:

<div class="car-mol-23-box">
	<div class="car-mol-23" id="banner-5">
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-1-tecnologia.webp" alt="Alt">
		</div>
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-2-tecnologia.webp" alt="Alt">
		</div>
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-3-tecnologia.webp" alt="Alt">
		</div>
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-4-tecnologia.webp" alt="Alt">
		</div>
	</div>
</div>

Abaixo da estrutura ou ao final da página dentro do <body> faça a chamada ao script:

<script src="https://mol.dev.br/js/carousel.min.js"></script>

*Chamar apenas uma vez por página

Adicione os estilos css dentro do <body>:

<link rel="stylesheet" href="https://mol.dev.br/css/carousel.min.css">

*Adicionar uma vez por página

Instanciar e configurar o Carousel:

<script>
	configCarousel('banner-5', true, 5000, true)
</script>

Descrição de cada item:

banner-1 (string): id único do slider, definido na box dos sliders no passo 2
true (true|false): true para o carousel auto iniciar, false para não
5000 (interger): tempo de duração de cada slide
true (true|false): se as bolhas indicando a quantidade de slides aparecerão (true) ou não (false). Este método ajuda ao usuário a identificar que existe mais conteúdo para ser navegado para direita e/ou esquerda (artifício de UI e UX)

Instancie quantos carousels desejar (inclusive multiplo ou simples), desta forma:

<script>
	configCarousel('banner-1', true, 5000, true)
	configCarousel('banner-2', true, 3000, false)
	configCarouselMulti('banner-3', true, 5000, true)
</script>

Instalação multíplo Slides

Veja como é fácil installar o Carousel Mol Múltiplo

Defina uma div com a classe "car-mol-23-multi-box":

<div class="car-mol-23-multi-box"></div>

Defina uma div com a classe "car-mol-23-multi" e id (único) "id-unico":

<div class="car-mol-23-multi" id="id-unico"></div>

Cada item do slide deve ficar envolvido dentro de uma div com classe "item":

<div class="item">
	<img src="img/circulo-futurista.jpg" alt="Alt">
</div>

<div class="item">
	<h2>Títulos</h2>
	<p>Paragráfo</p>
</div>

Ao final deverá ter uma estrutura similar a esta:

<div class="car-mol-23-multi-box">
	<div class="car-mol-23-multi" id="banner-6">
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-1-tecnologia.webp" alt="Alt">
		</div>
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-2-tecnologia.webp" alt="Alt">
		</div>
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-3-tecnologia.webp" alt="Alt">
		</div>
		<div class="item">
			<img src="https://mol.dev.br/img/carousel-mol-slide-4-tecnologia.webp" alt="Alt">
		</div>
	</div>
</div>

Abaixo da estrutura ou ao final da página dentro do <body> faça a chamada ao script:

<script src="https://mol.dev.br/js/carousel.min.js"></script>

*Chamar apenas uma vez por página

Adicione os estilos css dentro do <body>:

<link rel="stylesheet" href="https://mol.dev.br/css/carousel.min.css">

*Adicionar uma vez por página

Instanciar e configurar o Carousel:

<script>
	configCarouselMulti('banner-6', true, 5000, true)
</script>

Descrição de cada item:

banner-1 (string): id único do slider, definido na box dos sliders no passo 2
true (true|false): true para o carousel auto iniciar, false para não
5000 (interger): tempo de duração de cada slide
true (true|false): se as bolhas indicando a quantidade de slides aparecerão (true) ou não (false). Este método ajuda ao usuário a identificar que existe mais conteúdo para ser navegado para direita e/ou esquerda (artifício de UI e UX)

Instancie quantos carousels desejar (inclusive multiplo ou simples), desta forma:

<script>
	configCarousel('banner-1', true, 5000, true)
	configCarousel('banner-2', true, 3000, false)
	configCarouselMulti('banner-3', true, 5000, true)
</script>