How to change Picture element srcset/src values using Javascript

Question

I am trying to create a slider with an arrow to slide forwards or backwards depending on the arrow clicked and I want it to change the images accordingly. After many permutations, I arrived at the following codes:

HTML:

    <picture class="slider_img">
                <source id="source1" media="(max-width: 767px)" sizes="(max-width: 440px) 100vw, 440px"
                    srcset="
                resources/slider-imgs/slider1_set/digital_solution_d6clej_ar_1_1,c_fill,g_auto__c_scale,w_300.jpg 300w,
                resources/slider-imgs/slider1_set/digital_solution_d6clej_ar_1_1,c_fill,g_auto__c_scale,w_440.jpg 440w">
                <source id="source2" media="(min-width: 768px) and (max-width: 991px)" sizes="(max-width: 586px) 100vw, 586px"
                    srcset="
                resources/slider-imgs/slider1_set/digital_solution_d6clej_ar_4_3,c_fill,g_auto__c_scale,w_586.jpg 586w">
                <source id="source3" media="(min-width: 992px) and (max-width: 1199px)" sizes="(max-width: 781px) 100vw, 781px"
                    srcset="
                resources/slider-imgs/slider1_set/digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w">
                <img id="img_source" sizes="(max-width: 781px) 100vw, 781px"
                    srcset="
                resources/slider-imgs/slider1_set/digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"
                    src="resources/slider-imgs/slider1_set/digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg"
                    alt="">
     </picture>

JAVASCRIPT

const rightArrow = document.querySelector('#right_arrow');
const leftArrow = document.querySelector('#left_arrow');
const sliderPictureSource1 = document.querySelector('#source1');
const sliderPictureSource2 = document.querySelector('#source2');
const sliderPictureSource3 = document.querySelector('#source3');
const sliderPictureImgSource = document.querySelector('#img_source');




//Slider1 files path
const slider1 = {
    folder: "slider1_set",
    source1: ["digital_solution_d6clej_ar_1_1,c_fill,g_auto__c_scale,w_300.jpg 300w,digital_solution_d6clej_ar_1_1,c_fill,g_auto__c_scale,w_440.jpg 440w"],
    source2: ["digital_solution_d6clej_ar_4_3,c_fill,g_auto__c_scale,w_586.jpg 586w"],
    source3: ["digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_srcset: ["digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_src: ["digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg"]
}

//Slider2 files path
const slider2 = {
    folder: "slider2_set",
    source1: ["Scan2BIM_chywhr_ar_1_1,c_fill,g_auto__c_scale,w_300.jpg 300w,Scan2BIM_chywhr_ar_1_1,c_fill,g_auto__c_scale,w_407.jpg 407w,Scan2BIM_chywhr_ar_1_1,c_fill,g_auto__c_scale,w_440.jpg 440w"],
    source2: ["Scan2BIM_chywhr_ar_4_3,c_fill,g_auto__c_scale,w_586.jpg 586w"],
    source3: ["Scan2BIM_chywhr_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_srcset: ["Scan2BIM_chywhr_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_src: ["Scan2BIM_chywhr_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg"]
}

//Slider3 files path
const slider3 = {
    folder: "slider3_set",
    source1: ["training-coaching_xcjcan_ar_1_1,c_fill,g_auto__c_scale,w_300.jpg 300w,training-coaching_xcjcan_ar_1_1,c_fill,g_auto__c_scale,w_440.jpg 440w"],
    source2: ["training-coaching_xcjcan_ar_4_3,c_fill,g_auto__c_scale,w_586.jpg 586w"],
    source3: ["training-coaching_xcjcan_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_srcset: ["training-coaching_xcjcan_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_src: ["training-coaching_xcjcan_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg"]
}

//Creating a filepatth function
const sliderSourcePath = {
    path: "resources/slider-imgs/",
    slider_sources: function (source, folderName) {
        let sourcePath = "";
        for (let i = 0; i < source.length; i++) {
            sourcePath += "\n                " + this.path + folderName + "/" + source[i];
        }
        return sourcePath;
    }
}


//add event listener for slider arrows
let count = 1;
//right arrow
rightArrow.addEventListener('click', function () {
    count++;
    if (count === 1) {
        count = 1;
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider1.source1, slider1.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider1.source2, slider1.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider1.source3, slider1.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider1.img_srcset, slider1.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider1.img_src, slider1.folder);
        console.log("picture changed");
    } else if (count === 2) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider2.source1, slider2.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider2.source2, slider2.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider2.source3, slider2.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider2.img_srcset, slider2.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider2.img_src, slider2.folder);
        console.log("picture changed");
    } else if (count === 3) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider3.source1, slider3.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider3.source2, slider3.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider3.source3, slider3.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider3.img_srcset, slider3.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider3.img_src, slider3.folder);
        console.log("picture changed");
    } else {
        count = 1;
        console.log(count);
        console.log("count reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider1.source1, slider1.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider1.source2, slider1.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider1.source3, slider1.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider1.img_srcset, slider1.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider1.img_src, slider1.folder);
        console.log("picture changed");

    }
});

//left arrow
leftArrow.addEventListener('click', function () {
    count--;
    if (count === 1) {
        count = 1;
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider1.source1, slider1.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider1.source2, slider1.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider1.source3, slider1.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider1.img_srcset, slider1.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider1.img_src, slider1.folder);
        console.log("picture changed");
    } else if (count === 2) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider2.source1, slider2.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider2.source2, slider2.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider2.source3, slider2.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider2.img_srcset, slider2.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider2.img_src, slider2.folder);
        console.log("picture changed");
    } else if (count === 3) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider3.source1, slider3.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider3.source2, slider3.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider3.source3, slider3.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider3.img_srcset, slider3.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider3.img_src, slider3.folder);
        console.log("picture changed");
    } else {
        count = 3;
        console.log(count);
        console.log("count reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider3.source1, slider3.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider3.source2, slider3.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider3.source3, slider3.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider3.img_srcset, slider3.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider3.img_src, slider3.folder);
        console.log("picture changed");

    }
});
const rightArrow = document.querySelector('#right_arrow');
const leftArrow = document.querySelector('#left_arrow');
const sliderPictureSource1 = document.querySelector('#source1');
const sliderPictureSource2 = document.querySelector('#source2');
const sliderPictureSource3 = document.querySelector('#source3');
const sliderPictureImgSource = document.querySelector('#img_source');




//Slider1 files path
const slider1 = {
    folder: "slider1_set",
    source1: ["digital_solution_d6clej_ar_1_1,c_fill,g_auto__c_scale,w_300.jpg 300w,digital_solution_d6clej_ar_1_1,c_fill,g_auto__c_scale,w_440.jpg 440w"],
    source2: ["digital_solution_d6clej_ar_4_3,c_fill,g_auto__c_scale,w_586.jpg 586w"],
    source3: ["digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_srcset: ["digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_src: ["digital_solution_d6clej_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg"]
}

//Slider2 files path
const slider2 = {
    folder: "slider2_set",
    source1: ["Scan2BIM_chywhr_ar_1_1,c_fill,g_auto__c_scale,w_300.jpg 300w,Scan2BIM_chywhr_ar_1_1,c_fill,g_auto__c_scale,w_407.jpg 407w,Scan2BIM_chywhr_ar_1_1,c_fill,g_auto__c_scale,w_440.jpg 440w"],
    source2: ["Scan2BIM_chywhr_ar_4_3,c_fill,g_auto__c_scale,w_586.jpg 586w"],
    source3: ["Scan2BIM_chywhr_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_srcset: ["Scan2BIM_chywhr_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_src: ["Scan2BIM_chywhr_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg"]
}

//Slider3 files path
const slider3 = {
    folder: "slider3_set",
    source1: ["training-coaching_xcjcan_ar_1_1,c_fill,g_auto__c_scale,w_300.jpg 300w,training-coaching_xcjcan_ar_1_1,c_fill,g_auto__c_scale,w_440.jpg 440w"],
    source2: ["training-coaching_xcjcan_ar_4_3,c_fill,g_auto__c_scale,w_586.jpg 586w"],
    source3: ["training-coaching_xcjcan_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_srcset: ["training-coaching_xcjcan_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg 781w"],
    img_src: ["training-coaching_xcjcan_ar_16_9,c_fill,g_auto__c_scale,w_781.jpg"]
}

//Creating a filepatth function
const sliderSourcePath = {
    path: "resources/slider-imgs/",
    slider_sources: function (source, folderName) {
        let sourcePath = "";
        for (let i = 0; i < source.length; i++) {
            sourcePath += "\n                " + this.path + folderName + "/" + source[i];
        }
        return sourcePath;
    }
}


//add event listener for slider arrows
let count = 1;
//right arrow
rightArrow.addEventListener('click', function () {
    count++;
    if (count === 1) {
        count = 1;
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider1.source1, slider1.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider1.source2, slider1.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider1.source3, slider1.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider1.img_srcset, slider1.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider1.img_src, slider1.folder);
        console.log("picture changed");
    } else if (count === 2) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider2.source1, slider2.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider2.source2, slider2.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider2.source3, slider2.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider2.img_srcset, slider2.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider2.img_src, slider2.folder);
        console.log("picture changed");
    } else if (count === 3) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider3.source1, slider3.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider3.source2, slider3.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider3.source3, slider3.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider3.img_srcset, slider3.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider3.img_src, slider3.folder);
        console.log("picture changed");
    } else {
        count = 1;
        console.log(count);
        console.log("count reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider1.source1, slider1.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider1.source2, slider1.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider1.source3, slider1.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider1.img_srcset, slider1.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider1.img_src, slider1.folder);
        console.log("picture changed");

    }
});

//left arrow
leftArrow.addEventListener('click', function () {
    count--;
    if (count === 1) {
        count = 1;
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider1.source1, slider1.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider1.source2, slider1.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider1.source3, slider1.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider1.img_srcset, slider1.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider1.img_src, slider1.folder);
        console.log("picture changed");
    } else if (count === 2) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider2.source1, slider2.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider2.source2, slider2.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider2.source3, slider2.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider2.img_srcset, slider2.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider2.img_src, slider2.folder);
        console.log("picture changed");
    } else if (count === 3) {
        console.log(count);
        console.log("count not reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider3.source1, slider3.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider3.source2, slider3.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider3.source3, slider3.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider3.img_srcset, slider3.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider3.img_src, slider3.folder);
        console.log("picture changed");
    } else {
        count = 3;
        console.log(count);
        console.log("count reset");
        sliderPictureSource1.srcset = sliderSourcePath.slider_sources(slider3.source1, slider3.folder);
        sliderPictureSource2.srcset = sliderSourcePath.slider_sources(slider3.source2, slider3.folder);
        sliderPictureSource3.srcset = sliderSourcePath.slider_sources(slider3.source3, slider3.folder);
        sliderPictureImgSource.srcset = sliderSourcePath.slider_sources(slider3.img_srcset, slider3.folder);
        sliderPictureImgSource.src = sliderSourcePath.slider_sources(slider3.img_src, slider3.folder);
        console.log("picture changed");

    }
});

While the logic seems to work for full screen, it fails to load on a smaller screen when the arrow button gets clicked. LIVE DEMO: https://in2itng.netlify.app/

Also, I notice a lag in the response time of the arrow in changing the image when loaded.

Update I noticed it works perfectly on other browsers except chrome provided the viewport size is not less than 768px.

Engr. Animashaun Fisayo Michae · Accepted Answer · 2022-07-14 07:00:07Z

I finally found the issue and fixed it. the srcset path with multiple sources has commas separating different source paths which I didn't account for in my sliderSourcePath object Method. An updated code is provided below for reference. Also, I remove the "\n" new line component of my source string.

NB

While everything is working in all browsers except Chrome (it is throwing the error msg below:

 net::ERR_INTERNET_DISCONNECTED

I still have some lags in the in the response per click whenever I load the page freshly but it goes back to normal once all content has been cached in the browser.

const sliderSourcePath = {
    path: "resources/slider-imgs/",
    slider_sources: function (source, folderName) {
        let sourcePath = "";
        for (let i = 0; i < source.length; i++) {
            if(i === 0) {
                sourcePath += this.path + folderName + "/" + source[i];
            } else {
                sourcePath += ", " + this.path + folderName + "/" + source[i];
            }
            
        }
        return sourcePath;
    }
}

Collectives™ on Stack Overflow

How to change Picture element srcset/src values using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related