Menu icon Foundation
Help with vanilla carousel problem

Very vanilla code. Problem is carousel will not behave responsively. Doesn't matter whether I have arrows/no arrows, dots/no dots. I am only displaying one slide at a time. On small and medium devices the columns are not wrapping. I've removed the carousel and added other elements in the middle column and they wrap/stack just fine so something about the carousel itself is stopping the responsive nature of the grid. Any advice? I don't expect coding help - just please point me in the right direction to dig further. Thank you!

 

 

 

     
     
     <div class="row">

     <div class="small-12 large-4 columns">

     <header>Updates</header>

     <p>Some Content Here</p>

     </div>

     <div class="small-12 large-5 column">

     <header>Carousel</header>

     <div class="videoSlick">

     <div><img src="https://placehold.it/650x350"></div>

     <div><img src="https://placehold.it/650x350"></div>

     <div><img src="https://placehold.it/650x350"></div>

     </div>

     </div>

     <div class="small-12 large-3 column">

     <header>Ask Us</header>

     <p>Send questions to:</p>

    </div>

    </div>

     </div>

    <script src="../../../styles/js/vendor/jquery.js" type="text/javascript"></script>

     <script src="../../../styles/js/foundation.min.js" type="text/javascript"></script>

     <script type="text/javascript" src="../../../styles/slick/slick.min.js"></script>

     <script>

      $(document).foundation();

      </script>

      <script type="text/javascript">

      $(document).ready(function(){

      $('.videoSlick').slick({

        dots: true,

	arrows: true

      });

      });

      </script>

     <script src="../../../styles/js/rem.min.js" type="text/javascript"></script>

     

carousel

Very vanilla code. Problem is carousel will not behave responsively. Doesn't matter whether I have arrows/no arrows, dots/no dots. I am only displaying one slide at a time. On small and medium devices the columns are not wrapping. I've removed the carousel and added other elements in the middle column and they wrap/stack just fine so something about the carousel itself is stopping the responsive nature of the grid. Any advice? I don't expect coding help - just please point me in the right direction to dig further. Thank you!

 

 

 

     
     
     <div class="row">

     <div class="small-12 large-4 columns">

     <header>Updates</header>

     <p>Some Content Here</p>

     </div>

     <div class="small-12 large-5 column">

     <header>Carousel</header>

     <div class="videoSlick">

     <div><img src="https://placehold.it/650x350"></div>

     <div><img src="https://placehold.it/650x350"></div>

     <div><img src="https://placehold.it/650x350"></div>

     </div>

     </div>

     <div class="small-12 large-3 column">

     <header>Ask Us</header>

     <p>Send questions to:</p>

    </div>

    </div>

     </div>

    <script src="../../../styles/js/vendor/jquery.js" type="text/javascript"></script>

     <script src="../../../styles/js/foundation.min.js" type="text/javascript"></script>

     <script type="text/javascript" src="../../../styles/slick/slick.min.js"></script>

     <script>

      $(document).foundation();

      </script>

      <script type="text/javascript">

      $(document).ready(function(){

      $('.videoSlick').slick({

        dots: true,

	arrows: true

      });

      });

      </script>

     <script src="../../../styles/js/rem.min.js" type="text/javascript"></script>