Anonymous

Test3: Difference between revisions

From Now That's What I Call Music Wiki
No edit summary
No edit summary
Line 1: Line 1:
Carousel Example
<html><main role="main">
<html>.jumbotron {
background-image: url(https://nowmusicwiki.com/images/e/e5/Pattern_Backgroumd.jpg);
background-size: cover;
height: 100%;}


<div class="jumbotron jumbotron-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div class="container">
<ol class="carousel-indicators">
    <h1 class="display-4">Fluid jumbotron</h1>
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
<li data-target="#myCarousel" data-slide-to="1"></li>
  </div>
<li data-target="#myCarousel" data-slide-to="2"></li>
</div>
</ol>
 
</html>
<html>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :" preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>
 
<div class="container">
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :" preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>
 
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Some representative placeholder content for the second slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" role="img" aria-label=" :" preserveAspectRatio="xMidYMid slice" focusable="false"><title> </title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em"> </text></svg>
 
<div class="container">
<div class="carousel-caption text-right">
<h1>One more for good measure.</h1>
<p>Some representative placeholder content for the third slide of this carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</html>
<button class="carousel-control-prev" type="button" data-target="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div></html>

Revision as of 03:56, 3 November 2024