Problem with slide show img’s

Question

Code:

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlsContainer: $(".custom-controls-container"),
    customDirectionNav: $(".custom-navigation a")
  });
});

    html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
	background-color: aqua;
}

.page {
    position: relative; /* faz o footer fica com o absolute relativo ao .page - a mágica é esta */
    min-height: 100%; 
}

/* criei esta classe para facilitar */
.mainfooter::before, .footer-inner {
    height: 150px; /* ajuste a altura aqui */
}

.mainfooter::before {
    content: " ";
    display: block;
}

.footer-inner {
   background: #0c0c0c;
   color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}
.footer-inner p {
	font-family: 'Cuprum', sans-serif;
	color: #D0D0D0;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	margin-left: 170px;
}
    
    
    .flexslider {
      margin-bottom: 10px;
    }

    .flex-control-nav {
      position: relative;
      bottom: auto;
    }

    .custom-navigation {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    .custom-navigation > * {
      display: table-cell;
    }

    .custom-navigation > a {
      width: 50px;
    }

    .custom-navigation .flex-next {
      text-align: right;
    }

<section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
             <img src="https://www.codigofonte.com.br/wp-content/uploads/2016/02/tech.jpg"/>
            </li>
            <li>
             <img src="https://cdn.dribbble.com/users/182238/screenshots/2647187/horse_1x.jpg" />
            </li>
            <li>
               <img src="https://cdn.dribbble.com/users/182238/screenshots/2647187/horse_1x.jpg" />
            </li>
            <li>
             <img src="https://cdn.dribbble.com/users/182238/screenshots/2647187/horse_1x.jpg" />
            </li>
          </ul>
        </div>
        <div class="custom-navigation">
          <a href="#" class="flex-prev">Prev</a>
          <div class="custom-controls-container"></div>
          <a href="#" class="flex-next">Next</a>
        </div>
      </section>

I am using the flexSlider and the same error that appears in the snippet is displayed on my site:

Uncaught Referenceerror: $ is not defined

Answer 1

Maybe you’re forgetting to add references to the flexslider library and its css. I added both in the example below and the behavior is as expected.

// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlsContainer: $(".custom-controls-container"),
    customDirectionNav: $(".custom-navigation a")
  });
});

@import 'https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css';
html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
	background-color: aqua;
}

.page {
    position: relative; /* faz o footer fica com o absolute relativo ao .page - a mágica é esta */
    min-height: 100%; 
}

/* criei esta classe para facilitar */
.mainfooter::before, .footer-inner {
    height: 150px; /* ajuste a altura aqui */
}

.mainfooter::before {
    content: " ";
    display: block;
}

.footer-inner {
   background: #0c0c0c;
   color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}
.footer-inner p {
	font-family: 'Cuprum', sans-serif;
	color: #D0D0D0;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	margin-left: 170px;
}
    
    
    .flexslider {
      margin-bottom: 10px;
    }

    .flex-control-nav {
      position: relative;
      bottom: auto;
    }

    .custom-navigation {
      display: table;
      width: 100%;
      table-layout: fixed;
    }

    .custom-navigation > * {
      display: table-cell;
    }

    .custom-navigation > a {
      width: 50px;
    }

    .custom-navigation .flex-next {
      text-align: right;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider-min.js"></script>
<section class="slider">
  <div class="flexslider">
    <ul class="slides">
      <li>
       <img src="https://www.codigofonte.com.br/wp-content/uploads/2016/02/tech.jpg"/>
      </li>
      <li>
       <img src="https://cdn.dribbble.com/users/182238/screenshots/2647187/horse_1x.jpg" />
      </li>
      <li>
         <img src="https://cdn.dribbble.com/users/182238/screenshots/2647187/horse_1x.jpg" />
      </li>
      <li>
       <img src="https://cdn.dribbble.com/users/182238/screenshots/2647187/horse_1x.jpg" />
      </li>
    </ul>
  </div>
  <div class="custom-navigation">
    <a href="#" class="flex-prev">Prev</a>
    <div class="custom-controls-container"></div>
    <a href="#" class="flex-next">Next</a>
  </div>
</section>