Apakah yang perlu saya lakukan jika karusel bootstrap tidak boleh bergerak?

藏色散人
Lepaskan: 2021-11-02 11:30:49
asal
6763 orang telah melayarinya

Penyelesaian kepada masalah bahawa karusel bootstrap tidak boleh bergerak: 1. Sahkan versi bootstrap yang digunakan 2. Ubah suai susunan rujukan js dan css 3. Tambah "data-ride="carousel"" penyataan; 4. Tukar Hanya tukar ID dalam karusel supaya konsisten.

Apakah yang perlu saya lakukan jika karusel bootstrap tidak boleh bergerak?

Persekitaran pengendalian artikel ini: sistem Windows 7, bootsrap versi 3.3.7, komputer DELL G3

Apa yang perlu saya lakukan jika karusel bootstrap tidak boleh bergerak?

Selesaikan masalah karusel bootstrap tidak dapat dimainkan:

1. Pertama sekali, semasa mengimport pada permulaan, anda harus memberi perhatian kepada versi bootstrap yang anda gunakan Templat yang dieksport boleh Pergi terus ke tapak web rasmi versi itu untuk mencari dan menyalinnya untuk mengelakkan kesilapan.

ps: Jangan sekali-kali menyalin terus contoh orang lain dan mengimportnya.

Contohnya, mengenai templat bootstrap3.3.7 yang diimport:

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
此处引用的插件来自于bootstrap官网!
Salin selepas log masuk

2. Urutan petikan js dan css mestilah salah. dan akhirnya bootstrap.js

Sebab: bootstrap.js memerlukan bantuan jquery.js

3 Gunakan komponen Karusel Bootstrap secara lalai. Anda hanya perlu menambah data-ride="carousel" untuk mencapai main balik automatik. Tidak perlu menggunakan fungsi js yang dimulakan. Jadi, jika karusel tidak akan dimainkan secara automatik, semak bahagian ini dahulu. Parameter lain boleh ditambah di sini, seperti menetapkan selang masa untuk putaran imej.

<div id="carousel-ad" class="carousel slide" data-ride="carousel" data-interval="2000">
Salin selepas log masuk

4. Kandungan kelas label dalam imej karusel tidak konsisten dengan id bekas div imej karusel

Contohnya: tag li dalam senarai ol , nilai sasaran data mestilah " #carousel-example-generic"

Oleh kerana atribut id mudah bagi div ialah: id="carousel-example-generic"

<ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       .....</ol>
Salin selepas log masuk

Disyorkan pembelajaran: "tutorial penggunaan bootstrap

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika karusel bootstrap tidak boleh bergerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan