web-gelistirme-sc.com

Sayfa yüklenene kadar bxSlider'ın slaytları gizlemesini nasıl sağlayabilirim?

bxSlider kullanan bir web sitesi yapıyorum.

Sayfa yüklenirken, tüm slaytlar birbirinin üstüne istiflenmiş görünür. Sayfa tamamen yüklendikten sonra, ilk slayt görünmeye devam eder ve gerisi kaybolur, böylece kaydırıcı bir defada bunları canlandırıp görüntüleyebilir.

Sayfa tamamen doluncaya kadar slaytları gizlemek, ancak şanssız olmak için çeşitli CSS ve bxSlider geri aramalarını kullanmayı denedim. Bunu nasıl yapacağını bilen var mı?

Teşekkürler!

39
Nick Petrie

kaydırıcı yüklendiğinde (onSliderLoad) bxslider bir geri çağırma özelliğine sahiptir. Ben bir konteyner divinde gizlenecek şekilde görünürlük ayarlıyorum ve ardından görülebilirliği "görülebilir" olarak ayarlamak için geri aramayı kullanıyorum.

<div id="siteslides" style="visibility: hidden;"></div>

$(".site_banner_slider").bxSlider({
    auto: true,
    slideWidth: $imageWidth,
    mode: 'fade',
    onSliderLoad: function(){
        $("#siteslides").css("visibility", "visible");
      }
  });
51
bradrice

Ben de aynı problemi yaşadım ve bu şekilde çözdüm:

<div class="mySlider" style="display:none">

sonra

$(document).ready(function(){
      $('.mySlider').show().bxSlider({
        slideWidth: 160,
        minSlides: 2,
        maxSlides: 5,
        preloadImages: 'all'
      });
    });
29
Ehsan Khaveh

Tüm içeriği kaplayan bir div yerleştirin ve üzerine bir style="display:none" koyun. Sonra bxslider'i aradıktan sonra göster.

EX:

<script type="text/javascript">
$(document).ready(function(){

    $('.bxlider').bxSlider({
        displaySlideQty : 5,
        prevText : "",
        nextText : "",
        moveSlideQty : 5,
        infiniteLoop :  false
    });
    $(".bxsliderWrapper").show("fade");
});
</script>
13
Bob

Gönderilen çözümlerin hiçbiri benim için çalıştı.

Görünürlük kullanımı: Sadece gizli sayfada büyük bir boşluk ile sonuçlandı.

Ekranı kullanmak bazı nedenlerden dolayı: hiçbiri slaytların hiçbirinin yüklenmemesine, sadece kontrollerin olmasına neden oldu.

Bir çeşit makul çözüm bulabilmemin tek yolu bu:

CSS’de:

.ctaFtSlider
{
visibility: hidden;
height: 0;
}   

İşlevinde:

$(document).ready(function(){
$('.bxslider').bxSlider({
...
onSliderLoad: function(currentIndex){
$(".ctaFtSlider").css("visibility", "visible");
$(".ctaFtSlider").css("height", "auto");
}
});
});

Son olarak, HTML:

<div class="ctaFtSlider">
...
</div>
9
Brogan

Yaptığım iş ilk slayttan başka her şeyi gizlemek için CSS eklemekti.

Ek işaretleme veya davranış gerekmez ve tüm büyük tarayıcılarda çalışır!

.bxslider {
  li {
    display: none;

    &:first-child {
      display: block;
    }
  }
}
7
Jeff Miller

Diyelim ki:

HTML:

<ul class="slider">
<li>...</li>
<li>...</li>
</ul>

ve jQuery:

jQuery('.slider').bxSlider({
        ...
});

Ardından, aşağıdaki çözüm ilki hariç tüm slaytları gizleyerek hile yapardı. 

CSS:

ul.slider li:nth-child(n+2) {
    display: none;
}

Sürgü tam olarak yüklendiğinde, her etkin slayt otomatik olarak display: block stilini alır.

4

Aynı sorunu yaşadım ve bu numara bana yardımcı oldu:

     <ul id="bxSlider" style="padding:0px !important;overflow:hidden;height:385px;">

sürgüün ul elemanına yükseklik ve taşma değerleri koyun.

Saygılarımla

3
Kire Bananaman

Bu konudaki çözümlerin çoğunu denedim ve ne için çalıştıklarını yeterince cilalamadıklarını öğrendim. Sürgü tam olarak göründüğünde, sarsıntılı bir sunum yapıyorum. .Fade () kullanımı yakındı, ancak tuhaf görünen sol üstten sağa doğru hareket ediyor. OnSliderLoad'a bağlanmak harika çalışıyor, ancak görünürlüğü değiştirmek hala kaydırıcının ekranda görünmesini sağlıyor. Kancaya biraz daha şık bir giriş arıyordum, böylece CSS'yi değiştirmek yerine bir sınıf ekledim. 

jQuery:

$('.slider').bxSlider({
    auto: false,
    pager: false,
    mode: 'fade',
    onSliderLoad: function(){
        $(".slide-clip").addClass('-visible');
    }
});

SUKDÖ'nün:

.slide-clip {
    opacity:0;
    max-width: 1305px;  // Used as a clipping mask
    max-height: 360px; // Used as a clipping mask
    overflow:hidden;  // Used as a clipping mask
    margin:0 auto;
    transition(all 275ms);
    &.-visible {
        transition(all 275ms);
        opacity:1;
    }

}

Benim durumumda kaydırıcıyı maskelemek için bir sarmalayıcı kullanıyorum, çünkü benim durumumda buna ihtiyacım var, yani ilgilenenler için:

<div class="slide-clip">
    <ul class="slider">
        <li style="background-image: url('URL_HERE');"></li>
    </ul>
</div>
2
Jereme Yoho

Bunu nerede bulduğumu hatırlamıyorum, ancak sayfa slaytında görünebilen tüm slaytların bu sorununu çözmenin en temiz yolu olduğunu düşünüyorum.

İlk önce bxslider sırasız liste etrafına bir div ekleyin:

<div class="bxslider-wrap">
    <ul class="bxslider">
        <li>Image / Content </li>
        <li>Image / Content </li>
        <li>Image / Content </li>
    </ul>
</div>

Ardından, sayfa yüklendiğinde tüm kaydırıcıyı gizleyen css dosyanıza bu satırı ekleyin:

.bxslider-wrap { visibility: hidden; }

Son olarak, kaydırıcıyı görünürlük konumuna getirin: kaydırıcıyı tekrar görünür hale getirmek için kaydırıcı yüklendiğinde jQuery yoluyla görülebilir (js dosyanızda)!

jQuery(document).ready(function($) {
    $('.bxslider').bxSlider({
        onSliderLoad: function(){ 
            $(".bxslider-wrap").css("visibility", "visible");
        }
    }); 
});

Bu yardımcı olur umarım!

2
Jordan Smith

Aynı sorunu vardı. Aşağıdaki işaretlemeyi kullandım ve başlangıçta CSS <div class="bxsliderWrapper"> içeren display: none; kodunu sakladım. <div class="slide"> slaytlarının genişliğinin 1 piksel hızında işlendiğini fark ettim.

İlk kabın boyutlarını gizleyen ve her slaydın eşleşmesi için satır içi stilleri tanımlayan duyarlı özelliklerle ilgisi olduğunu düşünüyorum.

<div class="bxsliderWrapper">
  <div class="bxslider">
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
    <div class="slide">Your Content</div>
  </div>
</div>

Benim çözümüm, yerleşik geri arama işlevlerini kullanma konusunda yukarıda bahsedilen bradrice öğelerine benzer. Bunun yerine reloadSlider() işlevini show() işlevine ekledim.

<script type="text/javascript">

var $j = jQuery.noConflict();
$j(document).ready(function(){
  var homeSlider = $j('.bxslider').bxSlider();
  $j(".bxsliderWrapper").show(0, "swing", function(){homeSlider.reloadSlider();});
});

</script>

Show () tamamlandığında yeniden yüklemeyi tetikler.

.

D&UUML;ZENLENMIŞ


Yukarıdaki orijinal çözüm başlangıçta işe yaradı, ancak sert yenileme shift + REFRESH sırasında önbellek temizlenirken sorun yaşadım. .show() işlevi tarafından hedeflenen öğelerin zaman içinde bulunmadığını veya kaynakların henüz yüklenmediğini varsayıyorum. (Tahmin ediyorum) Aşağıda bu davranış için bir düzeltme var.


<div> ile display: none; içeren Bx Kaydırıcıyı gizlemek yerine, visibility CSS özelliğini kullanarak slayt görüntülerini sakladım.

.bxslider .slide {
  visibility: hidden;
}

Bu, kaydırıcıyı hazır oluncaya kadar ekrandaki görüntüleri görmeden doğru boyutta oluşturmasını sağlar. Sonra sayfa yüklendikten sonra görünürlüğü değiştirmek için .css() tarafından tetiklenen jQuery $j(window).load() yöntemini kullandım. Bu, tüm kod ve öğelerin görüntülenmeden önce var olmasını sağladı.

<script type="text/javascript">

  var $j = jQuery.noConflict();

  $j(document).ready(function(){
    var homeSlider = $j('.bxslider').bxSlider();
  });

  $j(window).load(function(){
    $j(".bxslider .slide").css("visibility", "visible");
  });

</script>

Bu yöntem aynı sayfada çoklu sürgü ile de çalıştı. Kaydırıcının tüm örneklerinin kırılmasına neden olan .show() yöntemini buldum. Bunun neden daha iyi bir çözüm olduğunu tahmin ediyorum ama belki birileri bunu daha iyi anlamak için bazı bilgiler ekleyebilir.

2
user2589301

Modern tarayıcılar için hızlı ve kolay bir CSS çözümü (IE10 +):

.bxslider {
    transform: scale(0);
}

Bu işe yarıyor, çünkü başlangıçta kaydırıcı hiçbir şeyden aşağı ölçeklenecek, ancak bxSlider yüklendiğinde dönüşümü bir satır içi stilde geçersiz kılacak.

2
Jonathan Potter

Kaydırıcıma bir başlık ve metin div'i ekledim, bu yüzden yüklenirken hepsi sayfanın üst kısmına yığılmış oldu, bu yüzden bu yazı sayesinde slayt öğelerini gizlemeyi ama bir yükleme öğesi göstermeyi başardım:

Yukarıdakilerin de belirttiği gibi, bir görünürlük: dış div'e gizli bir sınıf eklenmiş, ancak ben de bir görünürlük ekledim: bir ajax_loader göstermek için bunun dışında görünür bir sınıf, daha sonra aşağıdaki kodla slaytlar yüklendiğinde ilk önce görünür olarak ayarlandı. Şimdi, slaytlar yüklenirken çirkin bir boşluk bırakmak yerine, bir yükleyici görüyorsunuz, bu nedenle kullanıcıya daha mantıklı geliyor:

jQuery(document).ready(function($) {
$('.bxslider').bxSlider({
    onSliderLoad: function(){ 
        $(".slideouter").css("visibility", "visible");
        $(".slideloader").css("visibility", "hidden");
    },
   autoControls: true,
  auto: true,
  mode: 'fade'
}); 

Umarım bu yardımcı olur, bu yüzden kaydırıcı css'inizde gizli olan div'dir ve sürgülü yükleyici css'inizde görünür, ancak her ikisi de sürgü yüklendikten sonra değiştirilir. Umarım yardımcı olur.

Şerefe Lee

1
Lee Phillips

Bu css'i kullandım ve 1200 genişlik üzerindeki ekranlar için çalıştığım için kaydırıcım maksimum genişlikteki genişlik, tablet sürümü Henüz sabit değil, bu şekilde piksel yerine% miktarını da deneyebilirsiniz.

.banner bxslider kaydırıcım için ana div'im.

.banner{overflow: hidden !important; height: 426px;}
@media screen and (max-width: 1200px){.banner{height: auto;}}
<div class="banner">
  <div class="bx-wrapper">
     			  
  </div>		    		   
</div>

0
Bas

Tam olarak style = "display: none" yöntemini bilmiyorum, ancak "hide ()/fadeOut ()", jQuery bxSlider'ın kabı ile ve bu init bxSlider'den sonra, işaretlemedeki hatalarla işlenir. (muhtemelen ekranı kullanarak: hiçbiri hatayı önleyemez, ancak sizinkini kaydırmak istiyorsanız, yöntemim uygulanabilir olur)

bxSlider'in başlatılmasından önce kabınızı css'ta ve JS'nizde 'mutlak' olarak konumlandırın, onu sayfanın görünmez kısmına taşıyın, içine yerleştirin ve daha sonra gizleyin, önceki noktaya geri getirin ve en sonunda solmaya başlayın:

$("#bxslider-container").css({'left' : "4000px"});
$('.bxslider').bxSlider();
$("#content-wrapper").hide().css({'left' : "0px"}).fadeIn(2000);

umarım yardımcı olur

0
Roaring Stones