Ditulis oleh: Ditulis pada: 2/14/2020
Update amp-carousel Menjadi Versi 0.2 - Tidak mengikuti perkembangan AMP secara detail, ternyata ada komponen AMP yang sudah diupdate. Salah satunya adalah amp-carousel dari versi 0.1 menjadi versi 0.2.
Jika blog Anda menggunakan AMP HTML dan menggunakan amp-carousel, silahkan update js amp-carousel ke versi terbaru.
Sebelumnya ini adalah js amp-carousel versi pertama.
<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>Jika js amp-carousel di blog Anda masih menggunakan versi 0.1 seperti di atas, silahkan ganti dengan versi terbaru seperti di bawah ini.
<script async="async" custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"></script>amp-carousel ini biasanya digunakan untuk menampilkan slide gambar seperti di bawah ini.
Kode slide di atas yang digunakan adalah berikut ini.
<amp-carousel height="1067" layout="responsive" type="slides" width="1600" autoplay loop delay="2000">
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOHwil_3PrFn_Z9Na6QjlEeHtJjds8kXs0y25IuEfKmk3S6NaeOy4iTUbFptWjYEX6kSPSUKgKOIKejevmzT1jzZyuHj1u3m-z3fQOJMzlH-cgDzfUmEbAjXni2O921lrf0pwS4ba_pA/s1600-rw/google-earth-view-1164.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlOHwil_3PrFn_Z9Na6QjlEeHtJjds8kXs0y25IuEfKmk3S6NaeOy4iTUbFptWjYEX6kSPSUKgKOIKejevmzT1jzZyuHj1u3m-z3fQOJMzlH-cgDzfUmEbAjXni2O921lrf0pwS4ba_pA/s1600/google-earth-view-1164.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsMp-bF32OmfuDMMrXNQ_LAEisGgsQov7ud1xySqQsXt_CE2D81lUjg9c-BiszfS1RGXBrQHyV6xnN4yvh7fUS5qCGj1982Sa7ttNaXSX2vatotofVr_jU4fV18nT2nnW9siI_6ZgHFA/s1600-rw/google-earth-view-1644.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCsMp-bF32OmfuDMMrXNQ_LAEisGgsQov7ud1xySqQsXt_CE2D81lUjg9c-BiszfS1RGXBrQHyV6xnN4yvh7fUS5qCGj1982Sa7ttNaXSX2vatotofVr_jU4fV18nT2nnW9siI_6ZgHFA/s1600/google-earth-view-1644.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8khsiYu5cE0J4gpkpImwjqiY3m2e1Dl_F-cdEnPN9cvfFTNOjH6BK8jpD7s7RZKhfbo25DpjV9O8XpojepASQJMAINYxOXt6FrRCyJ7qH3ZterW2YdzuYeMHS3yt9IKzHhHlW1H5L5c/s1600-rw/google-earth-view-1829.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM8khsiYu5cE0J4gpkpImwjqiY3m2e1Dl_F-cdEnPN9cvfFTNOjH6BK8jpD7s7RZKhfbo25DpjV9O8XpojepASQJMAINYxOXt6FrRCyJ7qH3ZterW2YdzuYeMHS3yt9IKzHhHlW1H5L5c/s1600/google-earth-view-1829.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMnIOfJ2bOpXZS8iljx0fprQXlt5YA2UxNxy5g6GMb89_1ncfJBW_biNi29_w1FKgQiqmYPICpVQRpuxzS6ctOvy5PSwsm4nLza_GscsA9CgmaCG2sHXAQHjdexijPf7Vux7KQwtjoC0/s1600-rw/google-earth-view-2125.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpMnIOfJ2bOpXZS8iljx0fprQXlt5YA2UxNxy5g6GMb89_1ncfJBW_biNi29_w1FKgQiqmYPICpVQRpuxzS6ctOvy5PSwsm4nLza_GscsA9CgmaCG2sHXAQHjdexijPf7Vux7KQwtjoC0/s1600/google-earth-view-2125.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFOnldNzqmCt947F93whE3ZYRF_8TojiK3W8qgnntnEDiUZv7e7Eg8iTOFIMI0ef0N4QgHUXRU88HIaZu89VPEN2ts2Sp2W-lEEB_YuMKgy43lcJK-7ro-z43Y0FvSk1RSvWF00Q2yrf4/s1600-rw/google-earth-view-5484.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFOnldNzqmCt947F93whE3ZYRF_8TojiK3W8qgnntnEDiUZv7e7Eg8iTOFIMI0ef0N4QgHUXRU88HIaZu89VPEN2ts2Sp2W-lEEB_YuMKgy43lcJK-7ro-z43Y0FvSk1RSvWF00Q2yrf4/s1600/google-earth-view-5484.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5M7lkEop5ji8h0JjZYFFULVemQB5VJkPmIA6udUgLVODeQMnrxQG1nLJ7d6ZmjiIQhUDRpFzQENWlAUdn4kDyikELQQ7NY1uV3-mJUfcNWwpypoEHEQtH2vZz7O830K2i-ACPX-lobcU/s1600-rw/google-earth-view-13119.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5M7lkEop5ji8h0JjZYFFULVemQB5VJkPmIA6udUgLVODeQMnrxQG1nLJ7d6ZmjiIQhUDRpFzQENWlAUdn4kDyikELQQ7NY1uV3-mJUfcNWwpypoEHEQtH2vZz7O830K2i-ACPX-lobcU/s1600/google-earth-view-13119.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAXSg4aB4chPCTlDXHdfxgTU6Son5J6wrugebwyprU_sai159wdJRIrc6f4BAEg_ZuiIDX_Hszcju2iEHLRlWKMesbGyq5aVcea1xoYyh4QjvKNaHZagSmnGcLonumJecGYM02jQxJag/s1600-rw/google-earth-view-13765.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDAXSg4aB4chPCTlDXHdfxgTU6Son5J6wrugebwyprU_sai159wdJRIrc6f4BAEg_ZuiIDX_Hszcju2iEHLRlWKMesbGyq5aVcea1xoYyh4QjvKNaHZagSmnGcLonumJecGYM02jQxJag/s1600/google-earth-view-13765.jpg" width="1600" height="1067"></amp-img></amp-img>
<amp-img alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnu0XuTkguBi1G5x3kz1w6X0LclHN0jIhi5PFdwkPslnGRdi83BzyqQev5gFvlqczbeR0Fgi_vcRXKbwXXQT23s1TBJarmERIrDQBpT7rXWRUa2Hn2tlZN5tvGKPdU8ZFfx0u6xZjV-c/s1600-rw/google-earth-view-14730.jpg" width="1600" height="1067"><amp-img fallback alt="Google Earth View Gallery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfnu0XuTkguBi1G5x3kz1w6X0LclHN0jIhi5PFdwkPslnGRdi83BzyqQev5gFvlqczbeR0Fgi_vcRXKbwXXQT23s1TBJarmERIrDQBpT7rXWRUa2Hn2tlZN5tvGKPdU8ZFfx0u6xZjV-c/s1600/google-earth-view-14730.jpg" width="1600" height="1067"></amp-img></amp-img>
</amp-carousel>Nah, pada versi 0.2 ini ada penambahan atribut untuk type="carousel" yaitu autoplay dan loop.
Selengkapnya tentang amp-carousel ini bisa disimak di amp.dev