CODEWITHSUNDEEP
slick.js
Melissa Schmohl
Melissa Schmohl

Reputation: 1

Why am I getting "Failed to load resource" errors in my Slick Carousel?

I have been trying for days to get a slider carousel to work. I am trying to use Slick Carousel. I followed the directions Ken Wheeler has provided on https://kenwheeler.github.io/slick/. I have also tried to program the slider using vanilla JavaScript. My beginner skills in JavaScript are not enough for me to get it to work. I am getting six error messages in the console:

  1. Failed to load resource: net::ERR_FILE_NOT_FOUND slick.css:1
  2. Failed to load resource: net::ERR_FILE_NOT_FOUND slick-theme.css:1
  3. Failed to load resource: net::ERR_INVALID_URL jquery-1.11.0.min.js:1
  4. Failed to load resource: net::ERR_INVALID_URL jquery-migrate-1.2.1.min.js:1
  5. Failed to load resource: net::ERR_FILE_NOT_FOUND slick.min.js:1
  6. Uncaught SyntaxError: Unexpected token '-' slider.js:3

The slider needs to be controlled by two arrow images under the slider. Please help! I know it has to be something simple I'm missing. I just can't find it. This is my first time posting on Stack Overflow. I hope I am following the proper procedures. Please advise if I'm not posting my inquiry correctly. Thank you in advance for any help you can give!

$(document).ready(function(){
    $('.center').slick({
      setting-name: setting-value
    });
  });


  $('.center').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1
        }
      },
      navigation: {
        nextEl: '.right-arrow',
        prevEl: '.left-arrow',
      }
    ]
  });
/* // Reset CSS */
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}

:root {
  --colorDkBlue: #001D5D;
  --colorGrey: #B8BfCF;
  --colorGreen: #68C242;
  --colorLtGreen: #D9F0D0;
  --colorBlack: #000;
  --colorWhite: #FFF;
  --colorDkGrey: #525252;
  --colorLtGrey: #F6F6F6;
}

/* Global Styles */
h1 {
  font-family: Karla;
  font-weight: 700;
  font-size: 4.063rem;
  letter-spacing: 0.73;
  line-height: 4.75rem;
  color: var(--colorWhite);
}

h2 {
  font-family: Karla;
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 3.125rem;
  color: var(--colorDkBlue);
}

h3 {
  font-family: Karla;
  font-weight: 700;
  font-size: 1.875rem;
  line-height: 3.125rem;
  color: var(--colorDkBlue);
}

h4 {
  font-family: Karla;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 1;
  line-height: 3.125rem;
  text-transform: uppercase;
  color: var(--colorGreen);
}

p {
  font-family: Karla;
  font-size: 1rem;
  line-height: 1.563rem;
}

/* New Releases Section */
.new-releases-wrapper {
  background-color: var(--colorLtGrey);
  height: 42.563rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
  overflow: hidden;
}

.new-releases-title-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 4.375rem;
}

.new-releases-title-content p {
  margin-top: 1rem;
  margin-bottom: 4.375rem;
  text-align: center;
  max-width: 34.25rem;
}

.new-releases-slider-cards {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 4rem;
}

.slider-card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--colorWhite);
  border-radius: 0.25rem;
  -webkit-box-shadow: 0 0 13px rgba(152, 152, 152, 0.5);
          box-shadow: 0 0 13px rgba(152, 152, 152, 0.5);
  width: 34.188rem;
  height: 16.5rem;
  margin: 0 2.375rem 0 0;
}

.slider-card-content {
  padding: 0 1.813rem;
}

.slider-img img {
  background-color: var(--colorLtGrey);
  padding: 3.875rem 1.25rem;
  margin-bottom: -0.188rem;
}

.slider {
  margin: 0;
}

.arrow {
  margin: 4rem 1.188rem;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Synder-Recordings-Site</title>
    <link rel="stylesheet" href="Styles/style.css">
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap" rel="stylesheet">

</head>
      <section class="new-releases">
            <div class="new-releases-wrapper">
                <div class="new-releases-title-content">
                    <h2>New Releases</h2>
                    <p>New albums every single month, check out the newest & best from Snyder Recording artist, now available on Apple Music & Spotify.</p>
                </div>
                <div class="new-releases-slider-cards slider center">
                    <div class="slider-card">
                        <div class="slider-img">
                            <img src="images/image4.png" alt="trapsoul" class="slider">
                        </div>
                        <div class="slider-card-content">
                            <h3>Trapsoul</h3>
                            <h4>Bryson Tiller</h4>
                            <p>Bryson Djuan Tiller, is an American singer, songwriter and rapper. Born in Louisville, Kentucky, he started his career in 2011, releasing the debut mixtape titled Killer Instinct Vol.1.</p>
                        </div>
                    </div>
                    <div class="slider-card">
                        <div class="slider-img">
                            <img src="images/image4.png" alt="trapsoul" class="slider">
                        </div>
                        <div class="slider-card-content">
                            <h3>Trapsoul</h3>
                            <h4>Bryson Tiller</h4>
                            <p>Bryson Djuan Tiller, is an American singer, songwriter and rapper. Born in Louisville, Kentucky, he started his career in 2011, releasing the debut mixtape titled Killer Instinct Vol.1.</p>
                        </div>
                    </div>
                    <div class="slider-card">
                        <div class="slider-img">
                            <img src="images/image4.png" alt="trapsoul" class="slider">
                        </div>
                        <div class="slider-card-content">
                            <h3>Trapsoul</h3>
                            <h4>Bryson Tiller</h4>
                            <p>Bryson Djuan Tiller, is an American singer, songwriter and rapper. Born in Louisville, Kentucky, he started his career in 2011, releasing the debut mixtape titled Killer Instinct Vol.1.</p>
                        </div>
                    </div>
                </div>
                <div class="new-releases-nav-arrows">
                    <img src="Icons/PNGs/left_controller.png" alt="arrow" class="arrow left-arrow">
                    <img src="Icons/PNGs/right_controller.png" alt="arrow" class="arrow right-arrow">
                </div>
            </div>
        </section>
           <script src="https://code.jquery.com/jquery-3.6.0.min.js"
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>
    <script src="js/slider.js"></script>

</body>
</html>

Upvotes: 0

Views: 641

Answers (1)

Remirol
Remirol

Reputation: 76

It's been a month since you posted. Did you figure it out?

1., 2. and 5. look like you are not referencing the source of the css and JS files. You either have to download these slick CSS files and place them in your local server folders or use a CDN to link to files that are hosted online.

For example: https://cdnjs.com/libraries/slick-carousel

For 3 and 4, you're loading two version of jQuery which is causing a conflict. Try to remove the jquery-1.11 and jquery-migrate script tags and try.

The -min versions of JavaScript files are minified (compressed) so there's no need to use both. For development, best to use the unminified versions as it's easier to debug.

Hope this helps.

Upvotes: 0

Related Questions