Difference between revisions of "Carousel"

From Tweeki
Jump to: navigation, search
 
(14 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
+
[[Category:Components]]
<ol class="carousel-indicators">
 
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
 
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
 
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
 
</ol>
 
  
<div class="carousel-inner" role="listbox">
+
== Simple Example ==
<div class="item active">
+
 
[[File:Screenshot_tweeki.png]]
+
<pre>
<div class="carousel-caption">
+
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
Caption 1
+
<div class="carousel-inner">
 +
<div class="carousel-item active">
 +
[[File:Screenshot_tweeki.png|link=Mainpage|class=d-block w-100]]
 
</div>
 
</div>
 +
<div class="carousel-item">
 +
[[File:Screenshot_skrifo.png|link=Mainpage|class=d-block w-100]]
 
</div>
 
</div>
<div class="item">
 
[[File:Screenshot_tweeki.png]]
 
<div class="carousel-caption">
 
Caption 2
 
 
</div>
 
</div>
 
</div>
 
</div>
Bottom
+
</pre>
 +
 
 +
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
 +
<div class="carousel-inner">
 +
<div class="carousel-item active">
 +
[[File:Screenshot_tweeki.png|link=Mainpage|class=d-block w-100]]
 +
</div>
 +
<div class="carousel-item">
 +
[[File:Screenshot_skrifo.png|link=Mainpage|class=d-block w-100]]
 +
</div>
 
</div>
 
</div>
 
<btn class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 
<span class="sr-only">Previous</span>
 
</btn>
 
<btn class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 
<span class="sr-only">Next</span>
 
</btn>
 
 
</div>
 
</div>

Latest revision as of 14:30, 30 December 2021


Simple Example

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
[[File:Screenshot_tweeki.png|link=Mainpage|class=d-block w-100]]
</div>
<div class="carousel-item">
[[File:Screenshot_skrifo.png|link=Mainpage|class=d-block w-100]]
</div>
</div>
</div>