Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

113
Views
Conditionally Change HTML Carousel Image Src

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!

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!