Mencegah carousel bootstrap twitter dari geser otomatis pada pemuatan halaman

119

Jadi, adakah cara untuk mencegah korsel bootstrap twitter dari geser otomatis pada pemuatan halaman kecuali tombol berikutnya atau sebelumnya diklik?

Terima kasih

jquery twitter-bootstrap carousel Tepken Vannkorn
sumber

Jawaban:

263

Atau jika Anda menggunakan Bootstrap 3.0 Anda dapat menghentikan perputaran dengan data-interval = "false" misalnya

<div id="carousel-example-generic" class="carousel slide" data-interval="false">

Atribut data carousel berguna lainnya ada di sini -> http://getbootstrap.com/javascript/#carousel-usage

Michal Kopec
sumber
4
Ini bukan 100% jawaban atas pertanyaan karena juga menghentikannya dari bersepeda bahkan ketika sebuah tombol diklik. Tapi itulah yang saya cari. Jadi terima kasih!
Tillito
3
data-interval="false"juga bekerja dengan Bootstrap 4
Ionuț Ciuta
53

Sebenarnya, masalahnya sekarang sudah terpecahkan. Saya menambahkan argumen 'jeda' ke metode 'carousel' seperti di bawah ini:

$(document).ready(function() {      
   $('.carousel').carousel('pause');
});

Bagaimanapun, terima kasih banyak @Yohn atas tip Anda menuju solusi ini.

Tepken Vannkorn
sumber
7
Ini akan mulai meluncur setelah sebelumnya / berikutnya, lihat stackoverflow.com/a/18208327/463065 jika itu bukan yang Anda cari.
Trufa
untuk yang lebih spesifik akan menjadi $(function(){ $("#idName").carousel('pause'); });
roger
43

Masalah dengan carousel bergeser secara otomatis setelah tombol prev / next dipecahkan. 

$('.carousel').carousel({
    pause: true,
    interval: false
});

GitHub melakukan 78b927b

Srnux
sumber
17

jika Anda menggunakan set bootstrap 3data-interval="false" pada struktur HTML carousel

contoh: 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
marciocst.dll
sumber
10
  • Gunakan data-interval="false"untuk menghentikan slide otomatis
  • Gunakan data-wrap="false"untuk menghentikan slide melingkar
Anil Ram
sumber
10

tambahkan ini ke div coursel Anda:

data-interval="false"
Dylan B
sumber
Michael Kopec ini jawaban dari 2 tahun yang lalu sudah mengatakan untuk melakukan hal ini.
Semua Pekerja Penting
5

Di bawah ini adalah daftar parameter untuk bootstrap carousel. Seperti Interval, pause, wrap:

masukkan deskripsi gambar di sini

Untuk lebih jelasnya lihat tautan ini:

http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp

Semoga ini bisa membantu Anda :)

Catatan: Ini untuk bantuan lebih lanjut. Maksud saya bagaimana Anda dapat menyesuaikan atau mengubah perilaku default setelah carousel dimuat.

Vikash Pandey
sumber
2

Saya pikir mungkin Anda harus memeriksa instruksi resmi tentang carousel, bagi saya, saya belum menemukan jawaban di atas, karena beberapa versi bootstrap, saya menggunakan b4-alpha dan saya ingin efek putar otomatis berhenti. 

$(document).ready({
    pause:true,
    interval:false
});

script ini tidak memberikan efek apapun saat mouse meninggalkan halaman tersebut, tepatnya area carousel. buka definisi resmi dan temukan itu:

masukkan deskripsi gambar di sini

Jadi Anda akan menemukan why.Jika halaman carousel onmouseover event dipicu, halaman akan berhenti, sementara mouse keluar dari halaman itu, itu akan dilanjutkan lagi.

Jadi, jika Anda ingin halaman berhenti selamanya dan berputar secara manual , Anda tinggal mengaturnya data-interval='false'.

Kepiting
sumber
1

--Gunakan data-interval = "false" untuk menghentikan slide otomatis --Gunakan data-wrap = "false" untuk menghentikan slide melingkar

...
Anil Kumar Ram
sumber
1

Untuk Bootstrap 4 cukup hapus 'data-ride = "carousel"' dari div carousel. Ini menghapus putar otomatis pada waktu buka.

Untuk mengaktifkan putar otomatis lagi, Anda masih harus menggunakan panggilan "putar" dalam javascript.

James
sumber