Templat: BootstrapCarousel: Perbedaan antara revisi
Dari GBI Danau Bogor Raya
kTidak ada ringkasan suntingan |
k upd |
||
| (6 revisi perantara oleh pengguna yang sama tidak ditampilkan) | |||
| Baris 1: | Baris 1: | ||
<div id="myCarousel" class="carousel slide m-0 {{{addclass|}}}" data-ride=" | <div id="myCarousel" class="carousel slide m-0 {{{addclass|}}}" data-bs-ride="carousel" data-bs-interval="{{{slideinterval|3000}}}" data-bs-pause="hover"> | ||
<!-- Indicators --> | <!-- Indicators --> | ||
<ol class="carousel-indicators | <ol class="carousel-indicators" style="list-style-type: none;"> | ||
{{#ifexpr: {{{slidecount|5}}}>=1 | <li data-target="#myCarousel" data-slide-to="0" class="active" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | {{#ifexpr: {{{slidecount|5}}}>=1 | <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" <!--style="width: 10px; height: 10px; border-radius: 100%;"-->></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=2 | <li data-target="#myCarousel" data-slide-to="1 | -->{{#ifexpr: {{{slidecount|5}}}>=2 | <li data-bs-target="#myCarousel" data-bs-slide-to="1" ></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=3 | <li data-target="#myCarousel" data-slide-to="2" | -->{{#ifexpr: {{{slidecount|5}}}>=3 | <li data-bs-target="#myCarousel" data-bs-slide-to="2" ></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>= | -->{{#ifexpr: {{{slidecount|5}}}>=4 | <li data-bs-target="#myCarousel" data-bs-slide-to="3" ></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount| | -->{{#ifexpr: {{{slidecount|5}}}>=5 | <li data-bs-target="#myCarousel" data-bs-slide-to="4" ></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount| | -->{{#ifexpr: {{{slidecount|5}}}>=6 | <li data-bs-target="#myCarousel" data-bs-slide-to="5" ></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|6}}}>=7 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" ></li>}}<!-- | |||
-->{{#ifexpr: {{{slidecount|6}}}>=8 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" ></li>}}<!-- | |||
-->{{#ifexpr: {{{slidecount|6}}}>=9 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" ></li>}}<!-- | |||
-->{{#ifexpr: {{{slidecount|6}}}>=10 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" ></li>}} | |||
</ol> | </ol> | ||
<!-- Controls --> | <!-- Controls --> | ||
<ol class="carousel-control"> | <ol class="carousel-control"> | ||
<li class="carousel-control-prev rounded p-0" style="top:45%; height: 15%; width: 10%; left: 0em; <!--background: rgba(0, 0, 0, 0.3);-->" data-target="#myCarousel" role="button" data-slide="prev"> | <li class="carousel-control-prev rounded p-0" style="top:45%; height: 15%; width: 10%; left: 0em; <!--background: rgba(0, 0, 0, 0.3);-->" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"> | ||
<span class="carousel-control-prev-icon" aria-hidden="true"></span> | <span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
<span class=" | <span class="visually-hidden">Previous</span> | ||
</li> | </li> | ||
<li class="carousel-control-next rounded p-0" style="top:45%; height: 15%; width: 10%; right: 0em; <!--background: rgba(0, 0, 0, 0.3);-->" data-target="#myCarousel" role="button" data-slide="next"> | <li class="carousel-control-next rounded p-0" style="top:45%; height: 15%; width: 10%; right: 0em; <!--background: rgba(0, 0, 0, 0.3);-->" data-bs-target="#myCarousel" role="button" data-bs-slide="next"> | ||
<span class="carousel-control-next-icon" aria-hidden="true"></span> | <span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
<span class=" | <span class="visually-hidden">Next</span> | ||
</li> | </li> | ||
</ol> | </ol> | ||
<!-- Carousel items --> | <!-- Carousel items --> | ||
<div class="carousel-inner" style="overflow: hidden;"> | <div class="carousel-inner"><div style="style="overflow: hidden;"> | ||
{{#ifexpr: {{{slidecount|5}}}>=1 | <div class="carousel-item active">{{{slide1|[[File:Example 01.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | {{#ifexpr: {{{slidecount|5}}}>=1 | <div class="carousel-item active">{{{slide1|[[File:Example 01.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=2 | <div class="carousel-item">{{{slide2|[[File:Example 02.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=2 | <div class="carousel-item">{{{slide2|[[File:Example 02.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | ||
| Baris 29: | Baris 34: | ||
-->{{#ifexpr: {{{slidecount|5}}}>=4 | <div class="carousel-item">{{{slide4|[[File:Example 04.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=4 | <div class="carousel-item">{{{slide4|[[File:Example 04.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=5 | <div class="carousel-item">{{{slide5|[[File:Example 05.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=5 | <div class="carousel-item">{{{slide5|[[File:Example 05.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=6 | <div class="carousel-item">{{{slide6|[[File:Example 02.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}} | -->{{#ifexpr: {{{slidecount|5}}}>=6 | <div class="carousel-item">{{{slide6|[[File:Example 02.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}}<!-- | ||
</div> | -->{{#ifexpr: {{{slidecount|6}}}>=7 | <div class="carousel-item">{{{slide7|[[File:Example 02.jpg|768px|class=img-fluid d-block w-100 border|link=]]}}}</div>}} | ||
</div></div> | |||
</div><noinclude>{{documentation}}</noinclude> | </div><noinclude>{{documentation}}</noinclude> | ||
Revisi terkini sejak 8 September 2024 20.48
- Previous
- Next
Dokumentasi templat
Pemakaian
{{BootstrapCarousel
| carouselid=myCarousel
| slidecount=
| slideinterval=
| slide1=
| slide2=
| slide3=
| slide4=
| slide5=
| slide6=
| slide7=
| slide8=
| slide9=
| slide10=
}}
- Catatan
slidecount |
diisi 1-5 (maksimal 5) |
slideinterval |
dalam milidetik (default 5000) |