Templat: BootstrapCarousel: Perbedaan antara revisi
Dari GBI Danau Bogor Raya
kTidak ada ringkasan suntingan |
kTidak ada ringkasan suntingan |
||
| Baris 1: | Baris 1: | ||
<div id="myCarousel" class="carousel slide m-0 {{{addclass|}}}" data-ride="true" data-interval="{{{slideinterval|1000}}}" data-pause="hover"> | <div id="myCarousel" class="carousel slide m-0 {{{addclass|}}}" data-bs-ride="true" data-bs-interval="{{{slideinterval|1000}}}" data-bs-pause="hover"> | ||
<!-- Indicators --> | <!-- Indicators --> | ||
<ol class="carousel-indicators m-0 mb-2"> | <ol class="carousel-indicators m-0 mb-2" 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" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=2 | <li data-target="#myCarousel" data-slide-to="1" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=2 | <li data-bs-target="#myCarousel" data-bs-slide-to="1" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=3 | <li data-target="#myCarousel" data-slide-to="2" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=3 | <li data-bs-target="#myCarousel" data-bs-slide-to="2" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=4 | <li data-target="#myCarousel" data-slide-to="3" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=4 | <li data-bs-target="#myCarousel" data-bs-slide-to="3" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=5 | <li data-target="#myCarousel" data-slide-to="4" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=5 | <li data-bs-target="#myCarousel" data-bs-slide-to="4" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|5}}}>=6 | <li data-target="#myCarousel" data-slide-to="5" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|5}}}>=6 | <li data-bs-target="#myCarousel" data-bs-slide-to="5" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|6}}}>=7 | <li data-target="#myCarousel" data-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|6}}}>=7 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|6}}}>=8 | <li data-target="#myCarousel" data-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|6}}}>=8 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|6}}}>=9 | <li data-target="#myCarousel" data-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | -->{{#ifexpr: {{{slidecount|6}}}>=9 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></li>}}<!-- | ||
-->{{#ifexpr: {{{slidecount|6}}}>=10 | <li data-target="#myCarousel" data-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></li>}} | -->{{#ifexpr: {{{slidecount|6}}}>=10 | <li data-bs-target="#myCarousel" data-bs-slide-to="6" style="width: 10px; height: 10px; border-radius: 100%;"></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="sr-only">Previous</span> | <span class="sr-only">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="sr-only">Next</span> | <span class="sr-only">Next</span> | ||
Revisi per 2 September 2024 22.49
- 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) |