0

I'm working with the slick slider. And I have two images: prev.png and next.png, but it won't work. I tried various other things, but its not working.

And I have this error message in the Web Inspector Console:

jquery.min.js:2 GET file:///C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/lightbox/img/next.png net::ERR_FILE_NOT_FOUND

This the result and the arrow is just > in .slick-next:before. I will remove it after its okay.

enter image description here

Image Arrow

enter image description here

.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev
{
    left: 30px;
    width:71px;
    height:43px;
    z-index: 100;
    background: url(common/js/lightbox/img/prev.png) no-repeat center;
    background-size:71px 45px;
}

[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}

.slick-prev:before
{
    content: '<';
}

[dir='rtl'] .slick-prev:before
{
    content: '>';
}

.slick-next
{
    right: 30px;
    width:71px;
    height:45px;
    z-index: 100;
    background: url(common/js/lightbox/img/next.png) no-repeat center;
    background-size:71px 45px;
}

[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}

.slick-next:before
{
    content: '>';
}

[dir='rtl'] .slick-next:before
{
    content: '<';
}
Ven
  • 431
  • 5
  • 12
  • Have you inspect the element with web inspector of your browser? – Sfili_81 May 17 '19 at 06:28
  • is your website live? can you give us the url if it is so we can have a look – Mindless May 17 '19 at 06:30
  • @Sfili_81 Yes, I use web inspector to check. And its working but it won't appear. In console part I got this message `jquery.min.js:2 GET file:///C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/common/js/lightbox/img/next.png net::ERR_FILE_NOT_FOUND` – Ven May 17 '19 at 06:35
  • @Mindless its not live yet. I'm using local. – Ven May 17 '19 at 06:36
  • 2
    ok its a path issue, remove ../../ from the url, have /common/js instead, i doubt you have a link containing two common js folders, C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/common/js/ – Mindless May 17 '19 at 06:37
  • @Mindless I remove the `../../` part but I still got the same error – Ven May 17 '19 at 06:44
  • 1
    What is the path of the image file, is it sitting under C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/lightbox/img/next.png? we are just guessing here, but once you get the url right, it should be fixed. – Mindless May 17 '19 at 06:50
  • @Mindless Yes. Its in that path. – Ven May 17 '19 at 06:58
  • 1
    right click the image and paste the image path here, it's just like error is saying, file not found – Mindless May 17 '19 at 06:59
  • @Mindless I got this `file:///C:/Users/DELL/Desktop/07%20CITEC%20Site/common/js/lightbox/css/common/js/lightbox/img/next.png` I also tried this `background: url(img/next.png) no-repeat center;` I got this image path `file:///C:/Users/DELL/Desktop/BASARA/07%20CITEC%20Site/common/js/lightbox/css/img/next.png` but its still the same. – Ven May 17 '19 at 07:18
  • 1
    no what i mean is manually go to the image folder on your computer, right click, properties and paste the url here so we can compare – Mindless May 17 '19 at 07:21
  • @Mindless `C:\Users\DELL\Desktop\07 CITEC Site\common\js\lightbox\img` – Ven May 17 '19 at 07:23
  • 1
    ok you have space in your file path, special characters should be quoted, background: url("/common/js/lightbox/img/next.png") no-repeat center; – Mindless May 17 '19 at 07:27
  • @Mindless Yes, It has space – Ven May 17 '19 at 07:28
  • 1
    https://stackoverflow.com/questions/2405333/css-background-image-path-issues – Mindless May 17 '19 at 07:29
  • @Mindless Thank you for helping me. I assume that the file is outside the `lightbox` but I was wrong. I'll post my answer here. – Ven May 17 '19 at 07:33

1 Answers1

0

I assume it that my file slick-theme.css is with the index.html .So I use common/js/lightbox/img/prev.png

But when I observe my folder the path is like this

enter image description here

So I tried to get the image outside the css folder and use this background: url(../img/next.png);

Ven
  • 431
  • 5
  • 12