dynamic filepath serach for image slider

Question

I am new to js and tried to build an image slider for the web. I tried to stich together two bits of cod which work fine seperately but not togehther and I' am wondering why?

The slider function works fine as long as I input the value for the var slideNum directly as a number so: "var slideNum = 4"

But I Would like js to count the numbers of img. files in the src folder and adjust the slidNum dynamically. Any idea what I am doing wrong?

thx

const fs = require('fs');
var length = fs.readdirSync('../recursion/img').length;

function slide(n){

    var slideNum = length
    var imgNames = [
      "null", 
      "img_1.jpeg", 
      "img_2.jpeg", 
      "img_3.jpeg", 
      "img_4.jpeg", 
      "img_5.jpeg", 
      "img_6.jpeg",
      "img_7.jpeg", 
      "img_8.jpeg", 
      "img_9.jpeg", 
      "img_10.jpeg", 
      "img_11.jpeg", 
      "img_12.jpeg",
      "img_13.jpeg", 
      "img_14.jpeg", 
      "img_15.jpeg", 
      "img_16.jpeg",
      "img_17.jpeg", 
      "img_18.jpeg", 
      "img_19.jpeg", 
      "img_20.jpeg", 
    ];
  
    var selector = 'div#slider.slider img.slider-img';
    var imgName = $(selector)[0].outerHTML.split('img_');
    var imgNum = parseInt(imgName[1].split('.')[0]);
    if (n == 0) {
      var newName = (imgNum != 1) ? imgNames[imgNum - 1] : imgNames[imgNum + ((slideNum)-1)];
      $(selector)[0].outerHTML = getPath(imgName[0], newName);
    }
    else if (n == 1 ){
      var newName = (imgNum != slideNum) ? imgNames[imgNum + 1] : imgNames[imgNum - (slideNum-1)];
      $(selector)[0].outerHTML = getPath(imgName[0], newName);
    }
  }
  function getPath(path, imgName){
    return (path + imgName + "\">");
  }

I tried to rearrange the bits of code in all possible manners but nothing worked.

dynamic filepath serach for image slider

0 Answers0