В моей некоммерческой организации был разработан веб-сайт, и ползунок домашней страницы масштабировался до 100% размера экрана. Однако, это внезапно перестало делать это, поэтому изображение обрезается. Я попытался добавить ширину в пару мест в коде, но, похоже, ничего не работает. Я предоставил фрагменты кода, которые я нашел о слайдере. Пожалуйста, помогите!
Раздел кода: APP. JS - jQuery (документ) .foundation ();
// Wrap your jQuery so you can use dat $ sign
jQuery(document).ready( function($) {
$('.homepage-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
pauseOnFocus: true,
pauseOnHover: true,
draggable: true
} );
} );
Раздел кода - APP. CSS -
APP. JS
APP. CSS
/* SLIDER */
.slick-prev:before, .slick-next:before {
font-size: 40px;
color: rgba(255,255,255,0.8);
}
.slick-prev::before {
font-family: "FontAwesome";
content: '\f053';
}
.slick-next::before {
font-family: "FontAwesome";
content: '\f054';
}
.slick-prev, .slick-next {
width: 40px;
height: 40px;
}
.slick-prev {
left: 50px;
z-index: 1;
}
.slick-next {
right: 50px;
}
/* HOMEPAGE */
/* HOMEPAGE HEADER */
.home #main #homepage-header {
background-size: 80%;
}
.home #main #homepage-header .homepage-slide {
height: 540px;
}
.home #main #homepage-header h2 {
font-size: 1.5em;
}
.home #main #homepage-header {
position: relative;
}
.home #main #homepage-header .play-button img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,7);
}
.home #main .home-header {
margin-bottom: 40px;
}
Раздел кода: ПЕРЕДНЯЯ СТРАНИЦА. PHP -
<?php get_header(); ?>
<?php if (have_posts() ) : while(have_posts() ) : the_post(); ?>
<section id="homepage-header" class="homepage-slider">
<?php if( have_rows('header_slides') ): ?>
<?php while ( have_rows('header_slides') ) : the_row(); ?>
<div class="homepage-slide" style="background-image: url('<?php
the_sub_field("header_image"); ?>');">
<div class="grid-container home-header">
<div class="grid-x">
<div class="small-9 medium-6 cell">
<h2><?php the_sub_field('header_text') ?></h2>
<div class="line yellow-line"></div>
<p class="raleway subtext quote"><?php the_sub_field('quote_author'); ?>
</p>
<p class="eczar subtext"><a class="blue bold" href="<?php
the_sub_field('subtext_link'); ?>"><?php the_sub_field('header_subtext'); ?></a></p>
</div>
</div>
</div><!--grid-container .home-header-->
</div><!--homepage-slide-->
<?php endwhile; ?>
<?php else :
// no rows found
endif; ?>
</section><!--homepage-header-->
<section class="textured-bg text-center" id="program-types">
<div class="social-container">
<?php wp_nav_menu( array('theme_location' => 'social-navigation', 'container' => '', 'menu_class' => 'social-nav') ); ?>
</div><!--social-container-->
<div class="grid-container">
<div class="grid-x">
<div class="small-12 medium-8 medium-offset-2 cell">
<h3><?php the_field('program_section_title'); ?></h3>
<p><?php the_field('program_section_description'); ?></p>
<p class="eczar uppercase link"><a class="blue bold" href="<?php
the_field('programs_link'); ?>"><?php the_field('programs_link_text'); ?></a></p>
<div class="line yellow-line"></div>
</div>
</div>
</div><!--grid-container-->
<?php
if( have_rows('program_previews') ): ?>
<div class="grid-x" id="program-previews">
<?php while ( have_rows('program_previews') ) : the_row(); ?>
<div class="small-12 medium-6 large-4 cell">
<a href="<?php the_sub_field('program_title_link'); ?>">
<div class="program-image-container" style="background-image: url('<?php
the_sub_field("program_image"); ?>');">
<p><?php the_sub_field('program_title'); ?></p>
</div><!--program-image-container-->
<div class="program-text-container">
<p><?php the_sub_field('program_description'); ?></p>
<a class="eczar blue bold" href="<?php the_sub_field('program_link'); ?
>">
<?php the_sub_field('program_link_text'); ?> >>
</a>
<div class="line yellow-line"></div>
</div><!--program-text-container-->
</a>
</div><!--cell-->
<?php endwhile; ?>
</div><!--grid-x-->
<?php else : ?>
<?php endif;?>
</section><!--.textured-bg #program-types-->
<?php
$args = array(
'post_type' => 'post',
'category_name' => 'featured-video',
'posts_per_page' => '1'
);
$query = new WP_Query( $args );
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$youtubeID = get_field("youtube_id"); ?>
<section id="featured-video" class="video-section" style="background: linear-
gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://img.youtube.com/vi/<?php echo
$youtubeID;
?>/maxresdefault.jpg');">
<div class="grid-container">
<div class="section-label">
<p class="uppercase">Featured Video</p>
<div class="line yellow-line"></div>
</div><!--section-label-->
<div class="grid-x video-description-container">
<div class="small-12 medium-10 medium-offset-1 cell">
<div class="icon-container">
<a href="https://www.youtube.com/watch?v=<?php echo $youtubeID; ?>"
data-lity>
<i class="material-icons play-button">play_arrow</i>
</a>
</div><!--icon-container-->
<?php echo '<div class="video-description-text">';
echo '<h3>' . get_the_title() . '</h3>';
echo '<p>' . get_the_content() . '</p>';
}
echo '</div><!--video-description-text-->';
/* Restore original Post Data */
wp_reset_postdata(); ?>
</div><!--cell-->
</div><!--grid-x-->
</div><!--grid-container-->
</section>
<?php } else {
// no posts found
} ?>
<section class="textured-bg text-center" id="email-list">
<div class="grid-container">
<div class="grid-x">
<div class="small-12 medium-8 medium-offset-2 cell">
<h1>Never Miss a Beat</h1>
<h3>Sign Up For Our Email List</h3>
<?php echo do_shortcode( '[emma_form]' ); ?>
</div>
</div>
</div><!--grid-container-->
</section><!--.textured-bg #email-list-->
<?php endwhile; endif; ?>
<?php get_footer(); ?>