Home » Jquery » javascript – Slick Slider No Longer Scaling

javascript – Slick Slider No Longer Scaling

Posted by: admin February 22, 2020 Leave a comment

Questions:

My nonprofit organization had a website designed for us and the homepage slider would scale to 100% of the screen size. However, it’s suddenly stopped doing that so the image gets cut off. I’ve tried adding a width to a couple of places in the code but nothing seems to work. I’ve provided the pieces of code I’ve found about the slider. Please help!

Code Section: APP.JS –
jQuery(document).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
        } );
    } );

Code Section – 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;
       }

Code Section: FRONT-PAGE.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(); ?>
How to&Answer: