JavaScript switch statement that changes image captions in carousel

Question

What I am trying to accomplish here is a carousel that has a centered image and underneath the image, in a separate div outside the carousel, a quote is displayed pertaining to the image that is centered. I'm using 'slick' carousel and the carousel is working fine. The switch statement goes straight through to the default case.

js file

    (function ($) {
        'use strict';
        $(document).ready(function () {
            var $idOne = document.getElementById('1'),
                $idTwo = document.getElementById('2'),
                $idThree = document.getElementById('3'),
                $idFour = document.getElementById('4'),
                $idFive = document.getElementById('5'),
                $idSix = document.getElementById('6'),
                $idSeven = document.getElementById('7'),
                $idEight = document.getElementById('8'),
                $idNine = document.getElementById('9'),
                idArray = [
                    $idOne, $idTwo, $idThree, $idFour, $idFive, $idSix, $idSeven, $idEight, $idNine
                ];

            switch (idArray) {
            case $idOne:
                $('#imageCaptions').html("this is image one's caption");
                break;
            case $idTwo:
                $('#imageCaptions').html("this is image two's caption");
                break;
            case $idThree:
                $('#imageCaptions').html("this is image three's caption");
                break;
            case $idFour:
                $('#imageCaptions').html("this is image four's caption");
                break;
            case $idFive:
                $('#imageCaptions').html("this is image five's caption");
                break;
            case $idSix:
                $('#imageCaptions').html("this is image six's caption");
                break;
            case $idSeven:
                $('#imageCaptions').html("this is image seven's caption");
                break;
            case $idEight:
                $('#imageCaptions').html("this is image eight's caption");
                break;
            case $idNine:
                $('#imageCaptions').html("this is image nine's caption");
                break;
            default:
                $('#imageCaptions').html("sorry");
                break;         
            }   
        });

    })(jQuery);

html file

    <div id="new">
      <div class="center">

        <div id="1">
          <img src="http://placehold.it/350x300?text=1" class="img-responsive">
        </div>

        <div id="2">
          <img src="http://placehold.it/350x300?text=2" class="img-responsive">
        </div>

        <div id="3">
          <img src="http://placehold.it/350x300?text=3" class="img-responsive">
        </div>

        <div id="4">
          <img src="http://placehold.it/350x300?text=4" class="img-responsive">
        </div>

        <div id="5">
          <img src="http://placehold.it/350x300?text=5" class="img-responsive">
        </div>

        <div id="6">
          <img src="http://placehold.it/350x300?text=6" class="img-responsive">
        </div>

        <div id="7">
          <img src="http://placehold.it/350x300?text=7" class="img-responsive">
        </div>

        <div id="8">
          <img src="http://placehold.it/350x300?text=8" class="img-responsive">
        </div>

        <div id="9">
          <img src="http://placehold.it/350x300?text=9" class="img-responsive">
        </div>
      </div>

      <div id="imageCaptions">

      </div>

    </div>

Answer 1

the switch statement is like an if function. If you want to have captions on all your images, just do the <figure> in html and use <figcaption> for each image.

To your code, you're basically saying if idArray is equal to this and that but you aren't going through the array like you would using a for loop. idArray can never be equal to just idOne or idTwo . idArray[0] is idOne , idArray[1] is idTwo , etc.

I get you're trying to change the div's content depending on the displayed image.

What you should do is create an array with all the captions like const captionArr = ['caption 1', 'caption 2',...];

Then, find a way to detect which image is active. Take their id, and go,

if(thisID) is active, then take the corresponding index in captionArr . For example,

let activeID = activeElement.id; //take active element's id
for(let i = 0; i < captionArr.length; i++) {  //go through array
  if(activeID = i + 1) { //since your ids start with 1 and arrays with 0.
    $('#imageCaptions').html = captionArr[i];  //change div content
  }
}

Answer 2

I think you should you the Slick events to change the caption.

Your switch was not a bad idea, even if the same thing could be achieved using an array...
The switch has the advantage of a default caption.

So, using your switch within a function called on afterChange , it works.

 $(document).ready(function () { // Slick init $('.center').slick({ infinite: true, autoplay:true }); // Function to be executed on Slick "afterChange" event $('.center').on("afterChange",function(event, slick, direction){ // get the "slick-active" id var imageId = parseInt($(".slick-active").attr("id")); //console.log( imageId ); switch ( imageId ) { case 1: $('#imageCaptions').html("this is image one's caption"); break; case 2: $('#imageCaptions').html("this is image two's caption"); break; case 3: $('#imageCaptions').html("this is image three's caption"); break; case 4: $('#imageCaptions').html("this is image four's caption"); break; case 5: $('#imageCaptions').html("this is image five's caption"); break; case 6: $('#imageCaptions').html("this is image six's caption"); break; case 7: $('#imageCaptions').html("this is image seven's caption"); break; case 8: $('#imageCaptions').html("this is image eight's caption"); break; case 9: $('#imageCaptions').html("this is image nine's caption"); break; default: $('#imageCaptions').html("sorry"); break; } }); // For the first caption to be displayed on load $(".center").trigger("afterChange"); }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script> <div id="new"> <div class="center"> <div id="1"> <img src="http://placehold.it/350x300?text=1" class="img-responsive"> </div> <div id="2"> <img src="http://placehold.it/350x300?text=2" class="img-responsive"> </div> <div id="3"> <img src="http://placehold.it/350x300?text=3" class="img-responsive"> </div> <div id="4"> <img src="http://placehold.it/350x300?text=4" class="img-responsive"> </div> <div id="5"> <img src="http://placehold.it/350x300?text=5" class="img-responsive"> </div> <div id="6"> <img src="http://placehold.it/350x300?text=6" class="img-responsive"> </div> <div id="7"> <img src="http://placehold.it/350x300?text=7" class="img-responsive"> </div> <div id="8"> <img src="http://placehold.it/350x300?text=8" class="img-responsive"> </div> <div id="9"> <img src="http://placehold.it/350x300?text=9" class="img-responsive"> </div> </div> <div id="imageCaptions"> </div> </div>