Skip to content

Instantly share code, notes, and snippets.

@irocho

irocho/carrusel

Last active November 14, 2019 12:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save irocho/1d7fc978d079b2b522c3022d2d8c9a2d to your computer and use it in GitHub Desktop.
Save irocho/1d7fc978d079b2b522c3022d2d8c9a2d to your computer and use it in GitHub Desktop.
Download ZIP
Engadir un "carrusel" na páxina de bootstrap
Raw
carrusel
<!DOCTYPE html>
<html lang="gl">
<head>
<title>Bootstrap con carrusel</title>
<meta charset="utf-8">
<!-- Responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Consulta as .css e os scripts en .js para que funcione Bootstrap 4-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
/* Veña vale.... aquí si podemos definir tanto esa clase coma img */
.carousel-inner{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
​
<div id="demo" class="carousel slide" data-ride="carousel">
​
<!-- Indicadores: raias debaixo das imaxes-->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0"></li>
<li data-target="#demo" data-slide-to="1" class="active"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- Slideshow -->
<div class="carousel-inner">
<!-- Imaxe enooorme -->
<div class="carousel-item">
<img src=" gatito.png" alt="Aquí debería saír a miña imaxe" width="200%" height="200%">
</div>
<!-- Quen leva active é o primeiro que sae-->
<div class="carousel-item active" >
<img src="vaquita.jpg" alt="Aquí debería saír a miña imaxe">
</div>
<!-- Imaxe chiquitina -->
<div class="carousel-item">
<img src="cabalo.png" alt="Aquí debería saír a miña imaxe" width="10%" height="10%">
</div>
</div>
<!-- Frechiñas dereita e esquerda -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
​
</body>
</html>
​
@irocho
Copy link
Author

irocho commented Nov 5, 2018

Agora a páxina enteira. Coido que tiñamos mal a cabeceira

@cafecito123456
Copy link

esa muy guapo el botstrap carrusel... y es muy util

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment