Önyükleme atlıkarınca sadece ilk öğeyi gösterir. Burada neyi özlüyorum?

Önyükleme atlıkarınca sayfamda uygulamak, ancak diğer iki değil, sadece ilk öğeyi (3 bölüm içeren) görebilirsiniz.

Bootply http://www.bootply.com/A465PmKBRm 'de çalışıyor, sitemde çalışmıyor . Kullandığım sürümlerle test etti.

Burada neyi özlüyorum?

<div class="row">

                <div id="carousel-content" class="carousel slide" data-ride="carousel">
                  <!-- Indicators -->
                  
                  <!-- Wrapper for slides -->
                  <div class="carousel-inner">
                    <div class="item active">
                                    <!-- SINGLE SERVICE -->
                                    <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                        <!-- SERVICE HEADING -->
                                        

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> </div> <div class="item"> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> </div> <div class="item"> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                        <!-- SERVICE DESCRIPTION -->
                                        
description </div> <!-- /END SINGLE SERVICE --> </div> </div> <!-- Controls --> </div> </div>
16
Korkarım bunu nasıl çözebiliriz bilmiyorum. Çalışan bir sürüm yayınladınız ve neden çalışmadığını sordunuz. Canlı ortamınızla ilgili, onu kıran bir şey olduğu açık. Sayfada 404 veya JS hatası var mı?
katma yazar JᴀʏMᴇᴇ, kaynak
Kendi sorunuzu çözerseniz, yapılacak doğru şey cevabınızı paylaşmaktır; böylece başkaları öğrendiklerinizden yararlanabilir.
katma yazar Flexo, kaynak
Bootstrap.js eksik gibi görünüyor? Bu yüzden sadece düzen üzerinde çalışır (örneğin, aktif olmayan diğerleri için "display: block", ancak "display: none" olan aktif sınıf)
katma yazar R Lam, kaynak
@Xalloumokkelos Hangi tarayıcıyı kullanıyorsunuz? geliştirici konsolunda herhangi bir hata olup olmadığını kontrol edin ve sorunuza ekleyin
katma yazar Aminul, kaynak
1. Görünüşe göre JS <script> codes </script> || 2. bağlantılar
katma yazar Timothy Nwanwene, kaynak

7 cevap

R Lam tarafından belirtildiği gibi, bir yorumda zaten bunun en olası nedeni, bootstrap.js 'nin eksik olması veya sitenizde Javascript yürütülmesini bir şekilde devre dışı bırakmış olmanızdır (örneğin, çok katı bir CSP politikası). Konsolunuzda hata olup olmadığını ve Javascript’in açık olup olmadığını kontrol edin. Bunun olası nedeni, Javascript olmadan bootstrap.css dosyasının ilk atlıkarınca öğesini göstermesi, ancak diğer öğelere geçilmesine izin vermemesidir.

10
katma

Aşağıdakileri kontrol et

(1) Bootstrap.js kodunuzda çok önemli olduğunu ve bootstrap.css dosyasını unutmayın.

(2) Uygulamanızı ve diğer 3. bölüm JS kitaplık dosyalarını, özellikle donatılacak ve küçültülmüş olarak kullanıyorsanız kontrol edin. Küçük onayınız için kullandığınız her şeyin doğru yapıldığından emin olun, çünkü yapmazsanız, bootstrap.js içeren birçok kütüphaneniz karışabilir ve işlevlerini kaybedebilirsiniz

(3) Yazdığınız diğer JavaScript dosyalarındaki hatalar da kontrol edilmelidir.

Lütfen JavaScript hataları için projekte hata ayıklayın. Öğle yemeği krom tarayıcısı ve F12 tuşuna basın, F12 komutunuz tarafından açılan geliştirici görünümündeki konsol sekmesini tıklayın, ardından sitenizi o sekmede açın ve javascripts dosyalarınızla ilgili sorun olup olmadığını görün.

Yalnız gördüğünüz gibi bootstrap carousel'ınız iyi çalışıyor ancak sitenizde diğer kütüphaneleri ve muhtemelen kendi JavaScript dosyalarınızı içeren sitenizde çalışmıyor.

Eğer bootstrap carousel'ınızla ilgili sorunlar hakkında daha fazla bilgiye sahipseniz, burada yayınlayın ve insanların onlardan destek almasını ve öğrenmelerini sağlayın.

1
katma

Aşağıdakileri kontrol et

(1) Bootstrap.js kodunuzda çok önemli olduğunu ve bootstrap.css dosyasını unutmayın.

(2) Uygulamanızı ve diğer 3. bölüm JS kitaplık dosyalarını, özellikle donatılacak ve küçültülmüş olarak kullanıyorsanız kontrol edin. Küçük onayınız için kullandığınız her şeyin doğru yapıldığından emin olun, çünkü yapmazsanız, bootstrap.js içeren birçok kütüphaneniz karışabilir ve işlevlerini kaybedebilirsiniz

(3) Yazdığınız diğer JavaScript dosyalarındaki hatalar da kontrol edilmelidir.

Lütfen JavaScript hataları için projekte hata ayıklayın. Öğle yemeği krom tarayıcısı ve F12 tuşuna basın, F12 komutunuz tarafından açılan geliştirici görünümündeki konsol sekmesini tıklayın, ardından sitenizi o sekmede açın ve javascripts dosyalarınızla ilgili sorun olup olmadığını görün.

Yalnız gördüğünüz gibi bootstrap carousel'ınız iyi çalışıyor ancak sitenizde diğer kütüphaneleri ve muhtemelen kendi JavaScript dosyalarınızı içeren sitenizde çalışmıyor.

Eğer bootstrap carousel'ınızla ilgili sorunlar hakkında daha fazla bilgiye sahipseniz, burada yayınlayın ve insanların onlardan destek almasını ve öğrenmelerini sağlayın.

1
katma

BU BİR ÇALIŞIYOR!

1. Görünüşe göre JS <script> codes </script> sonunu eklemediniz.    ||   2. Bağlantılar

  <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Working! bootstrap-carousel</title>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    </head>

    <body>
    <div class="row">

                    <div id="carousel-content" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      
                      <!-- Wrapper for slides -->
                      <div class="carousel-inner">
                        <div class="item active">
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> </div> <div class="item"> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> </div> <div class="item"> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> </div> </div> <!-- Controls --> </div> </div> <script> //sandbox disable popups if (window.self !== window.top && window.name!="view1") {; window.alert = function(){/*disable alert*/}; window.confirm = function(){/*disable confirm*/}; window.prompt = function(){/*disable prompt*/}; window.open = function(){/*disable open*/}; } //prevent href=# click jump document.addEventListener("DOMContentLoaded", function() { var links = document.getElementsByTagName("A"); for(var i=0; i < links.length; i++) { if(links[i].href.indexOf('#')!=-1) { links[i].addEventListener("click", function(e) { console.debug("prevent href=# click"); if (this.hash) { if (this.hash=="#") { e.preventDefault(); return false; } else { var el = document.getElementById(this.hash.replace(/#/, "")); if (el) { el.scrollIntoView(true); } } } return false; }) } } }, false); </script> <!--scripts loaded here--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
1
katma

BU BİR ÇALIŞIYOR!

1. Görünüşe göre JS <script> codes </script> sonunu eklemediniz.    ||   2. Bağlantılar

  <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Working! bootstrap-carousel</title>
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    </head>

    <body>
    <div class="row">

                    <div id="carousel-content" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      
                      <!-- Wrapper for slides -->
                      <div class="carousel-inner">
                        <div class="item active">
                                        <!-- SINGLE SERVICE -->
                                        <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;">
                                            <!-- SERVICE HEADING -->
                                            

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> </div> <div class="item"> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> </div> <div class="item"> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> <!-- SINGLE SERVICE --> <div class="col-md-4 single-service wow fadeIn animated animated animated" data-wow-offset="10" data-wow-duration="1.5s" style="visibility: visible; -webkit-animation-duration: 1.5s;"> <!-- SERVICE HEADING -->

text

                                            <!-- SERVICE DESCRIPTION -->
                                            
description </div> <!-- /END SINGLE SERVICE --> </div> </div> <!-- Controls --> </div> </div> <script> //sandbox disable popups if (window.self !== window.top && window.name!="view1") {; window.alert = function(){/*disable alert*/}; window.confirm = function(){/*disable confirm*/}; window.prompt = function(){/*disable prompt*/}; window.open = function(){/*disable open*/}; } //prevent href=# click jump document.addEventListener("DOMContentLoaded", function() { var links = document.getElementsByTagName("A"); for(var i=0; i < links.length; i++) { if(links[i].href.indexOf('#')!=-1) { links[i].addEventListener("click", function(e) { console.debug("prevent href=# click"); if (this.hash) { if (this.hash=="#") { e.preventDefault(); return false; } else { var el = document.getElementById(this.hash.replace(/#/, "")); if (el) { el.scrollIntoView(true); } } } return false; }) } } }, false); </script> <!--scripts loaded here--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
1
katma

You just missed some JS files to link with your page, This example will explane you well, W3school

0
katma

You just missed some JS files to link with your page, This example will explane you well, W3school

0
katma