Having issues with link href and src in my carousel

HTML-CSS
1

My source files are all within a folder carousel and each time i run the code, the links dont work. Ive tried everything i know. Please help

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>amazing webpage</title>
  <link rel="stylesheet" type="text/css" href="carousel.css">
  <link rel="stylesheet" href="owl.carousel.min.css"/>
<link rel="stylesheet" href="owl.theme.default.min.css"/>
</head>
<body>
  <div class="wrapper">
  <div class="owl-carousel owl-theme">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>
</div>


<script src="jquery-3.3.1.min.js"></script>
<script src="owl.carousel.min.js"></script>
<script src="jquer.js"></script>
</body>
</html>
<style>

.wrapper{
  width:100%; height: auto;
  overflow: hidden;
}</style>

<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
</script>
2

If I’m understanding correctly, you have a folder carousel, with each of the CSS files stored in there. If that’s the case, you need to specify that within your links:

  <link rel="stylesheet" type="text/css" href="carousel/carousel.css">
  <link rel="stylesheet" href="carousel/owl.carousel.min.css"/>
  <link rel="stylesheet" href="carousel/owl.theme.default.min.css"/>

Without specifying carousel, the browser, or what have you, is looking for your CSS files in the parent directory.

project_name (the main directory) 
index.html
carousel (directory for CSS files)
 -- carousel.css
 -- owl.carousel.min.css
 -- owl.theme.default.min.css
javascript
(you're linking here, in the main directory, where the files aren't found)

I just noticed the JavaScript links. It’s similar for the CSS. If you have your JavaScript in a folder, sort of like I mentioned above, you need to put that within the src. So if they’re in a folder scripts, you need to specify:
<script src="scripts/jquer.js"></script>

3

Still didnt work, all that came up in the browser were stacked images here is what i have now with the same style and javascript. Also my js is in the same folder as “carousel” Im also using atom text editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>amazing webpage</title>
  <link rel="stylesheet" type="text/css" href="carousel/carousel.css">
  <link rel="stylesheet" href="carousel/owl.carousel.min"/>
<link rel="stylesheet" href="carousel/owl.theme.default.min"/>
</head>
<body>
  <div class="wrapper">
  <div class="owl-carousel owl-theme">
    <div class="item"><img src="http://lorempixel.com/g/800/600/nightlife"></div>
    <div class="item"><img src="http://lorempixel.com/g/800/600/fashion"></div>
    <div class="item"><img src="http://lorempixel.com/g/800/600/nightlife"></div>
</div>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="carousel/owl.carousel.min"></script>
<script src="jquer.js"></script>
</body>
</html>
4

Try adding at the end of each file that you are importing the corresponding extension.
In the css and js.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>amazing webpage</title>
  <link rel="stylesheet" type="text/css" href="carousel/carousel.css">
  <link rel="stylesheet" href="carousel/owl.carousel.min.css"/>
<link rel="stylesheet" href="carousel/owl.theme.default.min.css"/>
</head>
<body>
  <div class="wrapper">
  <div class="owl-carousel owl-theme">
    <div class="item"><img src="http://lorempixel.com/g/800/600/nightlife"></div>
    <div class="item"><img src="http://lorempixel.com/g/800/600/fashion"></div>
    <div class="item"><img src="http://lorempixel.com/g/800/600/nightlife"></div>
</div>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="carousel/owl.carousel.min.js"></script>
<script src="jquer.js"></script>
</body>
</html>

In the same way verify that the files are called exactly as you are importing them and have their extensions correctly ending with .css the styles and the js ending with .js

5

it still isnt working, i copied the code and pasted it and what shows up is in this drop box link, i also included a screenshot of folders too https://www.dropbox.com/s/dpq7odbsz2s690b/Screenshot%20(6).png?dl=0

6

If all your source files, including the html, are in the same folder it should work with the original paths you had, however, it won’t work with the new path.

This works for me, with all files in the root folder.

Summary 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>amazing webpage</title>
    <link rel="stylesheet" href="owl.carousel.min.css" />
    <link rel="stylesheet" href="owl.theme.default.min.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="owl-carousel owl-theme">
        <div class="item">
          <img src="http://lorempixel.com/g/800/600/nightlife" />
        </div>
        <div class="item">
          <img src="http://lorempixel.com/g/800/600/fashion" />
        </div>
        <div class="item">
          <img src="http://lorempixel.com/g/800/600/nightlife" />
        </div>
      </div>
    </div>

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
    ></script>
    <script type="text/javascript" src="owl.carousel.min.js"></script>
  </body>
</html>
<style>
  .wrapper {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
</style>

<script>
  $('.owl-carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 3
      },
      1000: {
        items: 5
      }
    }
  });
</script>
7

As the files have all at the same level, you must change the routes.
It would be as follows

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>amazing webpage</title>
  <link rel="stylesheet" type="text/css" href="carousel.css">
  <link rel="stylesheet" href="owl.carousel.min.css"/>
<link rel="stylesheet" href="owl.theme.default.min.css"/>
</head>
<body>
  <div class="wrapper">
  <div class="owl-carousel owl-theme">
    <div class="item"><img src="http://lorempixel.com/g/800/600/nightlife"></div>
    <div class="item"><img src="http://lorempixel.com/g/800/600/fashion"></div>
    <div class="item"><img src="http://lorempixel.com/g/800/600/nightlife"></div>
  </div>
</div>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="owl.carousel.min.js"></script>
<script src="jquer.js"></script>
</body>
</html>

The names of the files in your folder should be as follows:

  • carousel.css
  • owl.carousel.min.css
  • owl.theme.default.min.css
  • owl.carousel.min.js
  • jquer.js

That worked for me!!

8

thank you, ill give this a shot!

9

Goodmorning, I changed all the names in my source folder and added the css and js as you described. Although, it shows up as “carousel.css.css, jquer.js.js”,regardless…I tried running the html file and it still shows the same thing. The images are stacked on top of each other instead of showing a carousel that scrolls. I added a drop box link: https://www.dropbox.com/s/xd2y2q1ltrtth4z/Screenshot%20(7).png?dl=0

11

Good afternoon, if you look closely, the files are not called as you are importing them, they are left over the final extension as they are .css.css and .js.js remove an extension so that they are as I had said with anteriority.
In this way:

carousel.css
owl.carousel.min.css
owl.theme.default.min.css
owl.carousel.min.js
jquer.js

12

I think i understand what you mean now. Ive removed the extra extensions on the files, so for the carousel to work properly, I have to arrange them as you have or in order of priority?

13

The order and priority in this case does not matter, the important thing is that they should be called exactly as you are importing them in your .html file, that’s what I mean.

14

If you wish, upload the project to GitHub to see if it still does not work for you.

15

I dont think i know how to exactly do that, Ive looked at my project folder and code and dont know what i should change. How do i call the files properly?

16

Your code is fine, at least the html.
If you already organized the names of the files and it has not worked you should check the js and css files to know if there are errors in them.
If you still do not know GitHub or you know it but you have not handled it, I invite you to do it, it is too useful.
For now, I leave my email in case you want to send me your project to review it and tell you the error.
jhoanlt19@gmail.com
Regards!

17

You’re a life saver man, I appreciate your help! I will check out github and if I cant find a solution I will shoot you an email. Have a good day!