Bagaimana untuk menyelesaikan masalah ruang kosong selepas imej karusel kelajuan mudah alih slaid ke imej terakhir?

Penyelesaian Pemprosesan untuk Gambarajah Carousel Flickity Mudah Alih Meluncur ke hujung halaman kosong

Apabila membina halaman paparan produk pelbagai atribut, kami biasanya perlu memaparkan gambar produk yang sepadan dengan nilai-nilai atribut yang berbeza yang dipilih oleh pengguna. Sisi PC boleh dicapai dengan hanya menunjukkan/menyembunyikan gambar, tetapi apabila menggunakan gambar karusel kelemahan di sisi mudah alih, halaman kosong mungkin muncul selepas gelongsor ke gambar terakhir. Artikel ini akan menjelaskan cara menyelesaikan masalah ini supaya imej karusel sama ada berhenti gelongsor atau gelung kembali ke imej pertama selepas meluncur ke imej terakhir.

Katakan anda telah melaksanakan fungsi penapisan dan memaparkan imej yang sepadan berdasarkan nilai atribut produk, sebagai contoh:

 _filThumbnails: fungsi (varian) {
  // ... penapisan logik gambar ...
  $ ('[Data-Title]'). Sembunyikan (); // Sembunyikan semua gambar // ... Tunjukkan gambar yang ditapis ...
}

Kod ini berjaya menapis dan memaparkan gambar. Walau bagaimanapun, dalam keruntuhan mudah alih, ia boleh terus meluncur selepas meluncur ke gambar terakhir, menghasilkan halaman kosong. Kita perlu menyesuaikan konfigurasi kelemahan untuk menyelesaikan masalah ini.

Pertama, pastikan kelemahan dimulakan dengan betul:

 $ ('. Carousel'). Flickity ({
  // konfigurasi lain ...
});

Penyelesaian 1: Berhenti gelongsor

Untuk mengelakkan pengguna terus meluncur selepas imej terakhir, tetapkan pilihan wrapAround untuk false :

 $ ('. Carousel'). Flickity ({
  Wraparound: palsu,
  // konfigurasi lain ...
});

Penyelesaian 2: Loop Play

Sekiranya anda ingin melompat secara automatik ke gambar pertama selepas meluncur ke gambar terakhir, tetapkan pilihan wrapAround kepada true :

 $ ('. Carousel'). Flickity ({
  Wraparound: Benar,
  // konfigurasi lain ...
});

Langkah -langkah utama: Refresh Flickity

Untuk memastikan bahawa angka karusel dikemas kini dengan betul selepas bilangan gambar berubah, selepas fungsi _filterThumbnails dipanggil, kerumitan perlu diperkuatkan semula atau kaedah reloadCells perlu dipanggil:

 _filThumbnails: fungsi (varian) {
  // ... penapisan logik gambar ...
  $ ('. Carousel'). Flickity ('ReloadCells');
}

Melalui pelarasan di atas, imej karusel kelajuan mudah alih anda akan berhenti atau gelung selepas meluncur ke imej terakhir, dengan berkesan mengelakkan masalah halaman kosong. Pilihan mana yang anda pilih bergantung pada keperluan reka bentuk anda.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah ruang kosong selepas imej karusel kelajuan mudah alih slaid ke imej terakhir?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!