Teste de publicação 10022026

By admin | Sem categoria | 0 comment | 10 fevereiro, 2026 | 0

Imprimir

asdfa

Mais detalhes

Número de visualizações

0
Visualizações

.slick-carousel-container {
max-width: 800px;
margin: 20px auto;
padding: 0 20px;
font-family: Arial, sans-serif;
}

.gallery-header {
padding: 15px 0 10px 0;
}

.gallery-header h3 {
color: #333;
font-size: 14px;
margin: 0;
}

/* === CARROSSEL PRINCIPAL (SLIDER-FOR) – COM SETAS === */
.slick-carousel-container [class*=”slider-for-“] {
margin-bottom: 20px;
text-align: center;
position: relative;
}

.slide-item {
position: relative;
text-align: center;
padding: 0;
}

.slide-image {
width: 600px;
height: 400px;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transition: all 0.3s ease;
margin: 0 auto;
display: block;
}

.slide-caption {
margin-top: 15px;
padding: 10px;
background: white;
color: black;
border-radius: 5px;
font-size: 14px;
line-height: 1.4;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}

/* === CARROSSEL DE NAVEGAÇÃO (SLIDER-NAV) – COM SETAS === */
.slick-carousel-container [class*=”slider-nav-“] {
position: relative;
padding: 0 30px;
}

/* === CORREÇÕES PARA CARROSSEIS COM POUCAS IMAGENS === */
.slick-carousel-container [class*=”slider-nav-“] .slick-track {
display: flex !important;
align-items: center;
justify-content: center; /* Centraliza quando há poucas imagens */
}

.slick-carousel-container [class*=”slider-nav-“] .slick-slide {
height: auto !important;
width: auto !important;
margin: 0 !important;
}

.nav-item {
padding: 0 5px;
cursor: pointer;
transition: all 0.3s ease;
}

.nav-thumbnail {
width: 100%;
height: 80px;
object-fit: cover;
border-radius: 6px;
opacity: 0.6;
transition: all 0.3s ease;
border: 2px solid transparent;
}

.nav-item:hover .nav-thumbnail {
opacity: 0.8;
}

/* === SLICK ESPECÍFICO PARA NAVEGAÇÃO – SLIDE ATIVO === */
.slick-carousel-container [class*=”slider-nav-“] .slick-current .nav-thumbnail {
opacity: 1;
border-color: #007bff;
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

/* === SETAS CUSTOMIZADAS PARA AS THUMBNAILS === */
.slick-carousel-container [class*=”slider-nav-“] .slick-prev,
.slick-carousel-container [class*=”slider-nav-“] .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 30px;
height: 30px;
padding: 0;
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: rgba(255,255,255,0.9);
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
z-index: 10;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-prev:before,
.slick-carousel-container [class*=”slider-nav-“] .slick-next:before {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1;
color: #333;
opacity: 1;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-prev {
left: -15px;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-next {
right: -15px;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-prev:before {
content: ‘‹’;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-next:before {
content: ‘›’;
}

/* === DOTS CUSTOMIZADOS === */
.slick-carousel-container [class*=”slider-nav-“] .slick-dots {
bottom: -30px;
text-align: center;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-dots li button:before {
color: #007bff;
font-size: 12px;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-dots li.slick-active button:before {
color: #0056b3;
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
.slick-carousel-container {
margin: 10px;
padding: 0 15px;
}

.slide-item {
padding: 0;
}

.slide-image {
width: 100%;
max-width: 600px;
height: auto;
aspect-ratio: 3/2;
}

.slide-caption {
font-size: 13px;
padding: 8px;
margin-top: 10px;
}

.nav-thumbnail {
height: 60px;
}

.gallery-header {
padding: 10px 0;
}

.gallery-header h3 {
font-size: 13px;
}

/* Ajustar setas principais para mobile */
.slick-carousel-container [class*=”slider-for-“] .slick-prev,
.slick-carousel-container [class*=”slider-for-“] .slick-next {
width: 35px;
height: 35px;
}

.slick-carousel-container [class*=”slider-for-“] .slick-prev {
left: 10px;
}

.slick-carousel-container [class*=”slider-for-“] .slick-next {
right: 10px;
}
}

@media (max-width: 640px) {
.slide-image {
width: 100%;
height: 250px;
aspect-ratio: unset;
}

.nav-thumbnail {
height: 50px;
}

.slide-caption {
font-size: 12px;
padding: 6px;
}

/* Ajustar setas para mobile pequeno */
.slick-carousel-container [class*=”slider-nav-“] .slick-prev {
left: -10px;
}

.slick-carousel-container [class*=”slider-nav-“] .slick-next {
right: -10px;
}
}

@media (max-width: 480px) {
.slick-carousel-container {
padding: 0 10px;
}

.slide-image {
height: 200px;
}

.nav-thumbnail {
height: 40px;
}

/* Setas menores para mobile muito pequeno */
.slick-carousel-container [class*=”slider-for-“] .slick-prev,
.slick-carousel-container [class*=”slider-for-“] .slick-next {
width: 30px;
height: 30px;
}

.slick-carousel-container [class*=”slider-for-“] .slick-prev:before,
.slick-carousel-container [class*=”slider-for-“] .slick-next:before {
font-size: 16px;
}

.slick-carousel-container [class*=”slider-for-“] .slick-prev {
left: 5px;
}

.slick-carousel-container [class*=”slider-for-“] .slick-next {
right: 5px;
}
}

/* === ANIMAÇÕES SUAVES === */
.slick-carousel-container [class*=”slider-for-“] .slick-slide {
opacity: 0;
transition: opacity 0.3s ease;
}

.slick-carousel-container [class*=”slider-for-“] .slick-active {
opacity: 1;
}

/* === BANNER FINAL === */
.banner-final-noticia {
margin: 25px auto 20px auto;
padding: 15px 0;
text-align: center;
width: 100%;
max-width: 800px;
border-top: 1px solid #e6e6e6;
border-bottom: 1px solid #f0f0f0;
}

.banner-final-noticia a {
display: inline-block;
width: 100%;
text-decoration: none;
transition: all 0.3s ease;
}

.banner-final-noticia a:hover {
transform: translateY(-1px);
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.banner-final-noticia .banner-image {
width: 100%;
height: auto;
min-height: 80px;
max-height: 150px;
object-fit: cover;
object-position: center;
border-radius: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
}

.banner-final-noticia .banner-image:hover {
opacity: 0.9;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* === RESPONSIVE BANNER === */
@media (max-width: 1024px) {
.banner-final-noticia {
margin: 20px auto 15px auto;
padding: 12px 10px;
max-width: 90%;
}

.banner-final-noticia .banner-image {
min-height: 70px;
max-height: 120px;
border-radius: 5px;
}
}

@media (max-width: 768px) {
.banner-final-noticia {
margin: 15px auto 12px auto;
padding: 10px 5px;
max-width: 95%;
}

.banner-final-noticia .banner-image {
min-height: 60px;
max-height: 100px;
border-radius: 4px;
}

.banner-final-noticia a:hover {
transform: none;
}
}

@media (max-width: 480px) {
.banner-final-noticia {
margin: 12px auto 10px auto;
padding: 8px 0;
}

.banner-final-noticia .banner-image {
min-height: 50px;
max-height: 80px;
}
}

// ===============================================
// SCRIPT GLOBAL MELHORADO PARA CARROSSEIS SLICK
// ===============================================

// Variáveis globais para controle
window.carouselInitialized = window.carouselInitialized || {};
window.carouselRetries = window.carouselRetries || {};

// Função para verificar se elementos estão prontos
function waitForElements(selector, callback, maxWait = 5000) {
const startTime = Date.now();

function check() {
const elements = $(selector);
if (elements.length > 0 && elements.find(‘img’).length > 0) {
callback(elements);
} else if (Date.now() – startTime 1,
autoplay: false,
speed: 300,
cssEase: ‘ease-in-out’
});

// Aguardar antes de inicializar navegação
setTimeout(function() {
$navSlider.slick({
slidesToShow: Math.min(5, navCount),
slidesToScroll: 1,
asNavFor: forSelector,
dots: navCount > 5,
centerMode: navCount > 3,
focusOnSelect: true,
variableWidth: false,
infinite: navCount > 3,
arrows: navCount > 5,
autoplay: false,
speed: 300,
cssEase: ‘ease-in-out’,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: Math.min(3, navCount),
centerMode: navCount > 3,
arrows: navCount > 3
}
},
{
breakpoint: 480,
settings: {
slidesToShow: Math.min(2, navCount),
centerMode: false,
arrows: navCount > 2
}
}
]
});

// Marcar como inicializado
window.carouselInitialized[groupId] = true;
console.log(`Carrossel 10157 inicializado com sucesso!`);

// Forçar refresh da posição
setTimeout(function() {
$forSlider.slick(‘setPosition’);
$navSlider.slick(‘setPosition’);
}, 100);

}, 150);

} catch (error) {
console.error(`Erro ao inicializar carrossel 10157:`, error);

// Tentar novamente uma vez
const retryCount = window.carouselRetries[groupId] || 0;
if (retryCount 0) {
console.log(`Corrigindo carrossel 10157`);
$forSlider.slick(‘setPosition’);
$navSlider.slick(‘setPosition’);
setTimeout(() => $forSlider.slick(‘slickGoTo’, 0), 100);
}
}
});
}

// Inicialização quando documento estiver pronto
$(document).ready(function() {
console.log(‘=== Documento Pronto – Inicializando Carrosseis ===’);

// Inicializar após um delay para garantir que tudo está carregado
setTimeout(initializeGlobalCarousels, 800);

// Verificação periódica
setInterval(checkCarousels, 5000);
});

// Event listener para Liferay
Liferay.on(“allPortletsReady”, function() {
console.log(‘=== Portlets Prontos – Verificando Carrosseis ===’);

// Configurar botão de impressão
$(‘#header_custom_print’).attr(‘href’, $(“[title*=’Imprimir’]”).children().attr(‘href’));

// Verificar carrosseis após portlets prontos
setTimeout(function() {
let needsInit = false;

$(‘.slick-carousel-container’).each(function() {
const groupId = $(this).attr(‘data-gallery-group’);
if (!window.carouselInitialized[groupId]) {
needsInit = true;
}
});

if (needsInit) {
console.log(‘Alguns carrosseis não foram inicializados, inicializando agora…’);
initializeGlobalCarousels();
}
}, 1000);
});

// Handler para redimensionamento
let resizeTimeout;
$(window).on(‘resize’, function() {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
console.log(‘Redimensionamento – Atualizando carrosseis’);

$(‘[class*=”slider-for-“], [class*=”slider-nav-“]’).each(function() {
if ($(this).hasClass(‘slick-initialized’)) {
try {
$(this).slick(‘setPosition’);
} catch (e) {
console.warn(‘Erro ao reposicionar:’, e);
}
}
});
}, 250);
});

// Funções de debug globais
window.debugAllCarousels = function() {
console.log(‘=== DEBUG GLOBAL DE CARROSSEIS ===’);
console.log(‘Carrosseis inicializados:’, window.carouselInitialized);

$(‘.slick-carousel-container’).each(function() {
const groupId = $(this).attr(‘data-gallery-group’);
const $forSlider = $(`.slider-for-10157`);
const $navSlider = $(`.slider-nav-10157`);

console.log(`Carrossel 10157:`, {
initialized: window.carouselInitialized[groupId] || false,
forExists: $forSlider.length > 0,
navExists: $navSlider.length > 0,
forSlickInit: $forSlider.hasClass(‘slick-initialized’),
navSlickInit: $navSlider.hasClass(‘slick-initialized’),
slides: $forSlider.find(‘.slide-item’).length
});
});
};

window.reinitAllCarousels = function() {
console.log(‘=== REINICIALIZAÇÃO MANUAL ===’);
window.carouselInitialized = {};
window.carouselRetries = {};

// Destruir todos os carrosseis
$(‘[class*=”slider-for-“], [class*=”slider-nav-“]’).each(function() {
if ($(this).hasClass(‘slick-initialized’)) {
try {
$(this).slick(‘unslick’);
} catch (e) {
console.warn(‘Erro ao destruir:’, e);
}
}
});

// Reinicializar após delay
setTimeout(initializeGlobalCarousels, 500);
};

Source: TST

Teste de publicação 10022026

Teste de publicação 10022026

Leave a Comment

Cancelar resposta