Code doesn't run when it's inside a function

Question

The code runs my "if" "else if" and "else" if I leave it as is, outside a function, the problem with that is that it's supposed to update as I change the width of my browser so that my site is fully responsive but it only updates when I refresh the page.

When I put it inside a function and basically use the same logic that the other ones that are affected by the browser's width use, it just doesn't work.

I'm a beginner, I do not know if I'm showing enough code but here it is:

function setVertical() {
  if ($(window).width() > 1024) {
    $('.multiple-items').slick({
      infinite: true,
      vertical: true,
      slidesToShow: 3,
      slidesToScroll: 3,
      verticalSwiping: true,
      prevArrow: $('.top-arrow'),
      nextArrow: $('.bottom-arrow')
    });
  } else if ($(window).width() > 800) {
    $('#top-button').removeClass('fa-arrow-up');
    $('#bottom-button').removeClass('fa-arrow-down');
    $('#top-button').addClass('fa-arrow-left');
    $('#bottom-button').addClass('fa-arrow-right');
    $('.multiple-items').slick({
      infinite: true,
      vertical: false,
      slidesToShow: 4,
      slidesToScroll: 4,
      verticalSwiping: false,
      prevArrow: $('.top-arrow'),
      nextArrow: $('.bottom-arrow')
    });
  } else {
    $('#top-button').removeClass('fa-arrow-up');
    $('#bottom-button').removeClass('fa-arrow-down');
    $('#top-button').addClass('fa-arrow-left');
    $('#bottom-button').addClass('fa-arrow-right');
    $('.multiple-items').slick({
      infinite: true,
      vertical: false,
      slidesToShow: 2,
      slidesToScroll: 2,
      verticalSwiping: false,
      prevArrow: $('.top-arrow'),
      nextArrow: $('.bottom-arrow')
    });
  }
}
$(document).ready(function() {

  // Slick carousel
  setVertical();

  $(window).resize(function() {
    setVertical();
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" />
<div class="product-width slide-center produtos-pad">
  <button id="top-button" type="button" class="top-arrow fa fa-arrow-up slide-button"></button>
  <div class="multiple-items slider-image slide-text">
    <div><img src="img/slidervertical/cmff42-pequena.jpg" alt="">
      <h2>IP1-CMFF42</h2>
    </div>
    <div><img src="img/slidervertical/combilift542-pequena.jpg" alt="">
      <h2>COMBILIFT 542</h2>
    </div>
    <div><img src="img/slidervertical/combilift543-pequena.jpg" alt="">
      <h2>COMBILIFT 543</h2>
    </div>
    <div><img src="img/slidervertical/combilift551-pequena.jpg" alt="">
      <h2>COMBILIFT 541</h2>
    </div>
    <div><img src="img/slidervertical/combparker556-pequena.jpg" alt="">
      <h2>COMBIPARKER 556</h2>
    </div>
    <div><img src="img/slidervertical/hmt-pequena.jpg" alt="">
      <h2>IP1-HMT V07</h2>
    </div>
    <div><img src="img/slidervertical/ip1ms-pequena.jpg" alt="">
      <h2>PARKLIFT IP1 MS</h2>
    </div>
    <div><img src="img/slidervertical/levelparker-pequena.jpg" alt="">
      <h2>LEVELPARKER</h2>
    </div>
    <div><img src="img/slidervertical/multiparker-pequena.jpg" alt="">
      <h2>PARKLIFT 440</h2>
    </div>
    <div><img src="img/slidervertical/parklift340-pequena.jpg" alt="">
      <h2>PARKLIFT 340</h2>
    </div>
    <div><img src="img/slidervertical/parklift401-pequena.jpg" alt="">
      <h2>PARKLIFT 401</h2>
    </div>
    <div><img src="img/slidervertical/parklift402-pequena.jpg" alt="">
      <h2>PARKLIFT 402</h2>
    </div>
    <div><img src="img/slidervertical/parklift411-pequena.jpg" alt="">
      <h2>PARKLIFT 411</h2>
    </div>
    <div><img src="img/slidervertical/parklift440-pequena.jpg" alt="">
      <h2>PARKLIFT 440</h2>
    </div>
    <div><img src="img/slidervertical/parklift461-pequena.jpg" alt="">
      <h2>PARKLIFT 461</h2>
    </div>
    <div><img src="img/slidervertical/parksafe-pequena.jpg" alt="">
      <h2>PARKSAFE</h2>
    </div>
    <div><img src="img/slidervertical/plataformarotativa-pequena.jpg" alt="">
      <h2>PLATAFORMA ROTATIVA</h2>
    </div>
    <div><img src="img/slidervertical/slimparker557-pequena.jpg" alt="">
      <h2>SLIMPARKER 557</h2>
    </div>
  </div>
  <button id="bottom-button" type="button" class="bottom-arrow fa fa-arrow-down slide-button"></button>
</div>

Edit: It's fixed, I added a few lines inside the setVertical function on top of the code inside:

if ($('.multiple-items').hasClass('slick-initialized')) {
        $('.multiple-items').slick('destroy');
    }

Also I deleted a old version of JQuery, I had scripts for two different versions.

Deepen

Are you getting errors in your browsers console? If so, what are they? – Gooseherd

@mplungjan setCarousel and setPageNav were part of the code that worked, I removed them as they are irrelevant to this post, at least I'd assume they are irrelevant. – Deepen

@Amy "TypeError: $(...).slick is not a function" and I got one saying "Error: NetworkError when attempting to fetch resource." – Deepen

I don't see any fetching in your code. The first issue is a missing dependency though. So I am guessing that dependency is failing to load. – Gooseherd

It looks like the slick plugin you're using has options for responsiveness, I'm not sure when you call .slick(...) it's making a new instance. At the top of your 'setVerticle' method try destroying the instance with : $('.multiple-items').slick('unslick'); – Wingate

you never call unslick. In your case, instead of creating slick more times, I would suggest to add/remove slidesToshow. Take a look to Add & Remove demo – Tullusus

@Amy I got 2 scripts getting different versions of JQuery, is that bad? – Deepen

Yes, you can use only one jQuery version – Tullusus

Some things seem to want to use the old jQuery and others a newer version, I'm afraid I'm getting completely overwhelmed and I couldn't fix anything with the comments I got so far. I wonder if I should share my files with someone so I can get pointed in the right direction. – Deepen

These comments are pointing you in the right direction. – Gooseherd

@Amy Alright, thank you everyone. I'll try to get rid of the older version of JQuery first and see what else is wrong with it. – Deepen

Alright, little update, I removed the older version of JQuery sucessfully, nothing broke, and for some reason a part of the code now updates according to the browser's width, but not the other part. The arrows update from pointing up and down to left and right and vice versa as I change width. But the carousel itself doesn't change the quantity of slides it shows or if it's vertical or horizontal. – Deepen

@Wingate putting that line of code on top of my "setVertice" just gives me a "TypeError: o[i].slick is undefined" error – Deepen

Fixed! I didn't think I could get it running but it is, instead of the line of code Kyle suggested I wrote "if ($('.multiple-items').hasClass('slick-initialized')) { $('.multiple-items').slick('destroy'); } " Now it updates as I change the browser's width. – Deepen

marvelous, way to stick with it. – Wingate

Thanks a lot for the guidance! – Deepen

Answer 1

You can try:

  $(document).ready(function() {

  if ($('.multiple-items').hasClass('slick-initialized')) {
     $('.multiple-items').slick('destroy');
  }

  // Slick carousel
  setVertical();

  $(window).resize(function() {
    setVertical();
   });
});

Poff