Demo Widget Muktamar NU - Slider Layout

Preview Widget Slider

Widget ini menggunakan layout horizontal slider yang modern, mirip dengan layout event di situs berita populer. Pengunjung dapat menggeser (swipe) untuk melihat berita lainnya.

✨ Fitur Utama:

Horizontal slider dengan navigation buttons
Card layout yang modern dan menarik
Swipe gesture support untuk mobile
Auto-resize iframe otomatis
Lazy loading untuk performa optimal
Responsive untuk semua ukuran layar

          <!-- Embed Widget Slider -->

            <iframe

              src="https://widget.bangsaonline.com/muktamar/widget_muktamar_nu_slider.php?limit=10"

              width="100%"

              frameborder="0"

              scrolling="no"

              style="border: none; min-height: 500px">

            </iframe>

Perbandingan Layout Widget

Kami menyediakan 2 versi widget yang bisa Anda pilih sesuai kebutuhan:

📱

Widget Vertikal

Layout list vertikal dengan 3 pilihan tampilan (default, minimal, card). Cocok untuk sidebar atau area dengan tinggi terbatas.

widget_muktamar_nu.php

↔️

Widget Slider (Baru!)

Layout horizontal slider dengan navigation. Tampilan lebih modern dan interaktif. Cocok untuk konten area utama atau homepage.

widget_muktamar_nu_slider.php

Cara Implementasi

1. Embed Sederhana

Copy-paste kode iframe ini ke halaman Anda:

          <iframe

              src="https://bangsaonline.com/widget/widget_muktamar_nu_slider.php"

              width="100%"

              frameborder="0"

              scrolling="no"

              style="border: none; min-height: 500px">

            </iframe>

2. Dengan Auto-Resize (Rekomendasi)

Tambahkan script ini untuk auto-resize otomatis:

          <iframe

              id="widget-muktamar"

              src="https://bangsaonline.com/widget/widget_muktamar_nu_slider.php"

              width="100%"

              frameborder="0"

              scrolling="no"

              style="border: none; min-height: 400px">

            </iframe>

            <script>

            window.addEventListener('message', function(e) {

              if (e.data.type === 'widget-resize') {

                const iframe =
            document.getElementById('widget-muktamar');

                if (iframe) {

                  iframe.style.height =
            e.data.height + 'px';

                }

              }

            });

            </script>

3. Dengan Parameter Kustom

Sesuaikan jumlah berita yang ditampilkan:

          <!-- Tampilkan 15 berita -->

            <iframe

              src="https://bangsaonline.com/widget/widget_muktamar_nu_slider.php?limit=15"

              width="100%"

              frameborder="0">

            </iframe>

Spesifikasi Teknis

📦 Dependencies:

Swiper.js v11 (dimuat otomatis dari CDN jsdelivr.net) widget)
PHP 7.4+ dengan MySQLi extension
Database MySQL/MariaDB

⚙️ Konfigurasi:

Default limit: 5 berita (dapat diubah via parameter)
Max limit: 20 berita
Card width: 270px (desktop), 240px (tablet), 220px (mobile)
Card height: Auto (menyesuaikan konten)
Navigation: Prev/Next buttons

🎨 Responsive Breakpoints:

Mobile: ≤480px - Card width 220px
Tablet: 481-768px - Card width 240px
Desktop: >768px - Card width 270px

Tips & Rekomendasi

💡 Kapan Menggunakan Widget Slider?

Area konten utama dengan lebar penuh
Homepage atau landing page
Section khusus untuk highlight berita tertentu
Ketika Anda ingin menampilkan banyak berita tanpa scroll vertikal

💡 Kapan Menggunakan Widget Vertikal?

Sidebar dengan lebar terbatas
Area widget dengan tinggi yang bisa scroll
Ketika Anda ingin tampilan list yang lebih compact
Mobile-first design dengan prioritas scroll vertikal

🚀 Optimasi Performa

Widget sudah menggunakan lazy loading untuk gambar
Swiper.js dimuat dari CDN yang cepat dan reliable
CSS dan JS sudah diminifikasi dan dioptimalkan
Database query menggunakan prepared statements dan index