Soru carouFredSel duyarlı yükseklik


carouFredSel kullanarak benim yanıtlı carousel yükseklik sorunları yaşıyorum.

görüntüler duyarlı olduğundan ve karuseli de duyarlılığa ayarlandığı için.

Yine de resmin maksimum yüksekliğini div'a ekler.

Resimlerim 740 genişliğinde ve yüksekliği 960 olduğunda, görüntüyü ekrana sığacak kadar genişlikle yeniden boyutlandırır, görüntü aynı zamanda genişliğe sığacak şekilde yeniden boyutlandırılır, ancak div hala 960 yüksekliğindeki bir görüntüyü düşünür.

Bu sorunu nasıl çözebilirim?


16
2017-11-01 15:36


Menşei


jsfiddle.net/nytrm/nZxy4/1 Örneğin - nytrm
Belki bu size yardımcı olacaktır: stackoverflow.com/questions/22461244/... - Drew Baker


Cevaplar:


Bir süre önce bu meseleye tökezledim; bulduğum tek çözüm, tarayıcı yeniden boyutlandırıldığında kabın yeniden boyutlandırılmasıdır. Bu hile yapar ama benim içinde pedant çok fazla sevmez.

Sadece atlı karıncaya bir referans yaptım ve onCreate fonksiyon:

var $carousel = $("#swiper");

$carousel.carouFredSel({
  width: "100%",
  height: "auto",
  responsive: true,
  auto: true,
  scroll: { items: 1, fx: 'scroll' },
  duration: 1000,
  swipe: { onTouch: true, onMouse: true },
  items: { visible: { min: 4, max: 4 } },
  onCreate: onCreate
});​

function onCreate() {
  $(window).on('resize', onResize).trigger('resize');
}

function onResize() {
  // Get all the possible height values from the slides
  var heights = $carousel.children().map(function() { return $(this).height(); });
  // Find the max height and set it
  $carousel.parent().add($carousel).height(Math.max.apply(null, heights));
}

Bu eklentiyi hala 2015 yılında kullanıyorsanız, devam etme zamanı.
Ücretsiz sürüm artık desteklenmiyor ve ticari sürüm artık bir Wordpress eklentisi. Artı günümüzde yanıt vermek için kim bir kaydırıcıyı kesmek gerekiyor?


32
2017-11-01 16:01



Geçici düzeltme için teşekkürler :) - nytrm
@nytm hoşgeldin! Sorununuzu çözdüyse kabul edileni işaretlemeyi unutmayın :) - Pierre
Teşekkürler, başka bir düzeltme bulamadım bu yüzden kullanıyorum. - nytrm
Seni seviyorum! Birçok saat acı çözüldü. - Yo-L
İyi bir çözüm, bir yıl sonra (neredeyse en azından) ilgili. Değiştirdiğim tek şey, kullanmak yerine biraz kısaltmak. .css() (gerektirmez 'px' btw) kullandım carousel.parent().add(carousel).height(thisHeight);. Çok teşekkürler! - Chris Rockwell


Benim için ne çalıştı (şablonumdan 6.0.3 sürümüne kadar bile olsa):

Yükseklik ayarlanıyordu: her iki öğede de 'değişken' ve aşağıdaki gibi ana seçenekler:

    $('#foo').carouFredSel({
    responsive: true,
    width: '100%',
    height: 'variable',
    items: {
        height: 'variable'
    }
});

Herhangi bir noktada yeniden boyutlandırabilirim ve artık metin DIV'lerdeki vb.


22
2017-07-25 04:01



Gördüğünüz gibi öğeye yükseklik ekleyerek hile yaptı. Ayrıca eklenti kodunu değiştirmeyi denedim, ama bu iyi bir şey değil - Johansrk
Bu benim için çalışıyor! - Drew Baker
Bu, taban yüksekliği ayarlanmamış olsa bile benim için çalıştı. - JohnnyQ
Bu cevap için teşekkürler. Güzel ve kolay. - Jarco
Teşekkürler dostum !! yükseklik özelliğini eklemek, cihaz manzarasının dikey görünüm yüksekliğine ayarlanmaması sorununu çözmedi. İPhone ve android cihazlarda test ettim. - Jimit Shah


$('#foo2').carouFredSel({
      responsive: true,
      auto: true,
      width: "100%",
      height: "100%",
      scroll: 3,
      prev: '#prev4',
      next: '#next4',
      items: {
        width: '100%',
        height: '100%'
      }
    }).trigger('resize');

2
2017-09-23 15:41





CarouFredsel 6.2.0'da bir sorun vardı. Oluşturulan sargının güncellendiği yükseklik, yükseklik verildiğinde yükseklik: Tamam, 'değişkeni', ama öğelerin asıl listesi ilk öğenin yüksekliğiyle sıkıştı. Bu daha sonra, ilkinden daha uzun olan sonraki öğeleri kırpmıştır. UpdateSizes tetikleyicisi herhangi bir şey yapmıyor gibi görünüyor, bu yüzden onAfter olayını kullanarak çözdüm;

scroll : {
  onAfter : function( data ) {          
    var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
    $(this).css('height', carousel_height);
  }
 }

1
2018-06-20 08:58





Caroufredsel_wrapper öğesinin boyutlarını ayarlamak için CSS medya sorgularını kullanmamda bazı başarılar elde ettik.

.caroufredsel_wrapper {
    width: 700px !important;
    height: 393px !important;
}
@media screen and (max-width: 768px){
    .caroufredsel_wrapper {
        width: 460px !important;
        height: 258px !important;
    }
}

Sonradan kurtulmak mümkün oldu onCreate Yukarıdaki cevaptan şeyler. Window.resize olayına bağlanma, bir tek yeniden boyutlandırma sırasında pencere çerçevesini sürüklerken birçok kez işlevi tetikleyebileceğinden, çok daha fazla performans.


0
2017-12-13 11:59





Aynı sorunu yaşadım ve şunları yaptım:

3648'den 3652'ye kadar olan satırlar kaldırıldı, bu çizgiler şöyle görünüyor:

if (is_number(o.items[o.d[dim]]))
{
    console.log(o.d[dim]);
    return o.items[o.d[dim]];
}

Ve bu kod ms_getLargestSize işlevinin içinde.

Bu Liste yüksekliği sorununu çözdü. Doğrudan değiştirdiğim sarmalayıcı yüksekliğini çözmek için ~ 3609 satırındaki param yanlış, çizgi şöyle görünür:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false);

Değişmek:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false);

Bundan sonra, kaydırıcı yeniden boyutlandırıldığında iyi çalışıyor ve artık div'ler gibi öğeleri kırpmıyor!

Umut ediyorum bu yardım eder, Rafael Angeline


0
2018-02-10 23:16





height: "auto", karuselin yüksekliğinin, görünür olmayan öğeler de dahil olmak üzere içindeki en yüksek öğe kadar yüksek olduğu anlamına gelir! Duyarlı modda sadece görünür öğelerin yüksekliği değiştirilecek, böylece karuselin yüksekliği hala aynı olacaktır. (Hiçbiri görünür öğeler değiştirilmeyecek.)

Yükseklik kullanmalısınız: "değişken" yerine, yalnızca görünür öğelerin yüksekliğine bağlı olarak döner kareyi otomatik olarak yeniden boyutlandıran "değişken".

Spesifikasyonlarda bulmak için daha fazla: http://caroufredsel.dev7studios.com/configuration.php

Bu yardımcı olur umarım. Saygılarımızla Dirch


0
2018-03-01 14:56



"Değişken" yüksekliğini ayarlama, tarayıcı penceresi boyutunu değiştirirken dikey yeniden boyutlandırma sorununu çözmez. - Drew Baker
@DrewBaker - Lütfen bir kod örneği gönderin. Aynı sorunla karşılaştım, çözdüm ve başkalarının karşılaştırma yaparak yanlış yaptıklarını görmek isterim. - Zachary Schuessler
Bu bana yardımcı oldu: Bu yardımcı oldu: support.dev7studios.com/discussions/caroufredsel/VR-675224 - Drew Baker