12 ответов
Попробуйте этим кодом jQuery, которые нормализуют высоты слайда кольцевой галереи Начальной загрузки
function carouselNormalization() {
var items = $('#carousel-example-generic .item'), //grab all slides
heights = [], //create empty array to store height values
tallest; //create variable to make note of the tallest slide
if (items.length) {
function normalizeHeights() {
items.each(function() { //add heights to array
heights.push($(this).height());
});
tallest = Math.max.apply(null, heights); //cache largest value
items.each(function() {
$(this).css('min-height', tallest + 'px');
});
};
normalizeHeights();
$(window).on('resize orientationchange', function() {
tallest = 0, heights.length = 0; //reset vars
items.each(function() {
$(this).css('min-height', '0'); //reset min-height
});
normalizeHeights(); //run it again
});
}
}Вот решение, которое работало на меня; я сделал это этот путь, поскольку содержание в кольцевой галерее было динамично сгенерировано от отправленного пользователями содержания (таким образом, мы не могли использовать статическую высоту в таблице стилей) - Это решение должно также работать с разного размера экранами:
function updateCarouselSizes(){
jQuery(".carousel").each(function(){
// I wanted an absolute minimum of 10 pixels
var maxheight=10;
if(jQuery(this).find('.item,.carousel-item').length) {
// We've found one or more item within the Carousel...
jQuery(this).carousel(); // Initialise the carousel (include options as appropriate)
// Now we iterate through each item within the carousel...
jQuery(this).find('.item,.carousel-item').each(function(k,v){
if(jQuery(this).outerHeight()>maxheight) {
// This item is the tallest we've found so far, so store the result...
maxheight=jQuery(this).outerHeight();
}
});
// Finally we set the carousel's min-height to the value we've found to be the tallest...
jQuery(this).css("min-height",maxheight+"px");
}
});
}
jQuery(function(){
jQuery(window).on("resize",updateCarouselSizes);
updateCarouselSizes();
}
Технически это не является быстро реагирующим, но в моих целях эти on window resize заставляет это вести себя в ответ.
В случае, если кто-то лихорадочно гуглит для решения возвращаемой вещи кольцевой галереи изображений, это помогло мне:
.fusion-carousel .fusion-carousel-item img {
width: auto;
height: 146px;
max-height: 146px;
object-fit: contain;
}
Включайте этот JavaScript в свой нижний колонтитул (после загрузки jQuery):
$('.item').css('min-height',$('.item').height());
Можно также использовать этот код для корректировки ко всем изображениям кольцевой галереи.
.carousel-item{
width: 100%; /*width you want*/
height: 500px; /*height you want*/
overflow: hidden;
}
.carousel-item img{
width: 100%;
height: 100%;
object-fit: cover;
}
Можно использовать это строки в файле CSS:
ul[rn-carousel] {
> li {
position: relative;
margin-left: -100%;
&:first-child {
margin-left: 0;
}
}
}
.className{
width: auto;
height: 200px;
max-height: 200px;
max-width:200px
object-fit: contain;
}
Эта функция jQuery работала лучше всего на меня. Я использую начальную загрузку 4 в теме WordPress, и я использовал полный jQuery вместо тонкого jQuery.
// Set all carousel items to the same height
function carouselNormalization() {
window.heights = [], //create empty array to store height values
window.tallest; //create variable to make note of the tallest slide
function normalizeHeights() {
jQuery('#latest-blog-posts .carousel-item').each(function() { //add heights to array
window.heights.push(jQuery(this).outerHeight());
});
window.tallest = Math.max.apply(null, window.heights); //cache largest value
jQuery('#latest-blog-posts .carousel-item').each(function() {
jQuery(this).css('min-height',tallest + 'px');
});
}
normalizeHeights();
jQuery(window).on('resize orientationchange', function () {
window.tallest = 0, window.heights.length = 0; //reset vars
jQuery('.sc_slides .item').each(function() {
jQuery(this).css('min-height','0'); //reset min-height
});
normalizeHeights(); //run it again
});
}
jQuery( document ).ready(function() {
carouselNormalization();
});
Источник:
Позже я тестирую этот источник CSS на кольцевую галерею Начальной загрузки
, набор высоты к 380 должен быть установлен равный самому большому/самому высокому отображаемому изображению...
Признайте/вниз этот ответ на основе тестирования удобства пользования со следующим CSS спасибо.
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
max-height: 100%;
max-height: 380px;
margin-bottom: 60px;
height:auto;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
background: rgba(0, 0, 0, 0.45);
}
/* Declare heights because of positioning of img element */
.carousel .item {
max-height: 100%;
max-height: 380px;
background-color: #777;
}
.carousel-inner > .item > img {
/* position: absolute;*/
top: 0;
left: 0;
min-width: 40%;
max-width: 100%;
max-height: 380px;
width: auto;
margin-right:auto;
margin-left:auto;
height:auto;
}
Попробуйте это (я использую ДЕРЗОСТЬ ):
.carousel {
max-height: 700px;
overflow: hidden;
.item img {
width: 100%;
height: auto;
}
}
можно перенестись .carousel в .container, если Вы желаете.
Решение, данное ранее, приводит к ситуации, где изображения могут быть слишком маленькими для поля кольцевой галереи. Надлежащее решение проблемы столкновения средств управления состоит в том, чтобы переопределить Начальные загрузки CSS.
Исходный код:
.carousel-control {
top: 40%;
}
Переопределение переменная с фиксированным значением в Вашей собственной таблице стилей (300 пкс работали в моем дизайне):
.carousel-control {
top: 300px;
}
, Надо надеяться, это решит Вашу проблему.
Если Вы хотите иметь эту работу с изображениями высоты и не фиксируя высоту, просто сделайте это:
$('#myCarousel').on("slide.bs.carousel", function(){
$(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
$(this).off("slide.bs.carousel");
});