I have a standard HTML carousel with two images. I am wanting to change the image src based on the following logic:
IF the first image src url contains the word "Blank", I want the 2nd image to show first.
IF the first image src url DOES NOT contain the word "Blank", I want to show that image first.
IF both image url's contain the word "Blank", show both images.
IF neither image contains the word "Blank", show both images (different images than above - controlled from variable data). Image 1 first. Image 2 second.
Here is my HTML:
<div class="slider-one">
<ul class="bxslider1">
<li><img class="bximg1" src=""></img></li>
<li><img class="bximg2" src=""></img></li>
</ul>
</div>
I have attempted to start a script, but I don't know if it's the right direction:
<script>
carouselImg = () => {
const currentImg = document.getElementsByClassName('bximg1');
const previousImg = document.getElementsByClassName('bximg2');
if (!currentImg.src.includes('Blank')) {
console.log(currentImg);
return currentImg.src = "https://www.fillmurray.com/640/360";
}
}
</script>
I suppose this is a classic case of being more familiar with frameworks, than with the old school. :)
Any help is greatly appreciated!