How to iterate through and match objects of the same class with Jquery?

I am working on (what should have been) and easy jQuery carousel. Most of the project I have working, the last bit has me scratching my head. StackOverflow has easily 1000+ similar topics, and I have at this point excused many of the unique solutions from those I have read.

The basic skeleton of the carousel is working. Instead of small gray dots for navigation and location, I would like to place the actual image that will show at full scale. My problem is that when I click on this image I do not know how to match, in my case, the classes such that the image will show in the actual carousel itself. I would like to know please, in theory, what steps ought one take to accomplish this.

Here is the relevant code:

<section class="main-content">
    <div id="main-car flr">

    <div class="flr btn-right">
        //class needs to be left - objects floated right
        <a href="#" class="left">Right</a>
    </div>

    <div class="car flr">
        <img class="container-car img1 show" 
             src="photo/img1.png">
        <img class="container-car img2" 
             src="photo/img2.png">
        <img class="container-car img3" 
             src="photo/img3.png">
   </div>



       <div class="flr btn-left">
        <a href="#" class="right">Left</a>
      </div>

    <div id="clickme">
        <img id="small-1" class="img1 show" 
             src="photo/img1.png">
        <img id="small-2" class="img2" 
             src="photo/img2.png">
        <img id="small-3" class="img3" 
             src="photo/img3.png">

    </div>
</div>

And the jQuery:

$(document).ready(function(){

$(".flr").find("a").click(function() {

    if ($(this).attr("class") == "left") {
      csail("left");
    } else {
      csail("right");
    }
  });

  function csail(direction) {
    //find the img with the class "show"
    var car = $(".car").find(".show");
    var smallImg = $("#clickme").find(".show");

    if (direction == "left") {
      if (car.prev().length) {
        //move the selected class to the previous img in .car
        car.removeClass("show").prev().addClass("show");
        smallImg.removeClass("show").prev().addClass("show");
      } else {
        //there isn't a previous (you're on the first)
        //show the last element in the list.
        car.removeClass("show");
        smallImg.removeClass("show");
        $(".car").find(".container-car:last").addClass("show");
        $("#clickme").find("img:last").addClass("show");
      }
      //endif


    } else { //clicked right
      //move the selected class to the next img in .car
      if (car.next().length) {
        car.removeClass("show").next().addClass("show");
        smallImg.removeClass("show").next().addClass("show");
      } else {
        //there isn't a next div (you're on the last)
        //show the first
        car.removeClass("show");
        smallImg.removeClass("show");
        $(".car").find(".container-car:first").addClass("show");
        $("#clickme").find("img:first").addClass("show");
        //endif
      }
    }
  }


$("#clickme img").click(function(){
    //get src of the img clicked (works)
    var imgClass = $(this).attr("class");
    console.log(imgClass);
    //test
    //get the src of the current img in .car (works)
    var carClass = $(".car img").attr("class");
    console.log(carClass);
    //Remove class show from .car(works)
    $(".car img.show").removeClass("show");
    //add class show to .car img of same class as imgClass

    ???

    });

});

Initially I was using the image src with $("img[src=$'many/different/ways']"). In my attempts
photo/img1.png, img1, img1.png, src=$[' " + var_with_src_ + " ']); (console showed that was == photo/img1.png) did not work.

I decided then to mess with classes. I tried .each() and could get the console to list all the img classes in div.car, but when I said somethings like .each(function(){ if( this == imgClass) { this.addClass("show"); } }); and the console error was "this.addClass is not a function." Perhaps "this" is an array or list of values?

In either case, what theoretically should I be looking to do here, such that when a small image is clicked, the carousel shows the large image of the identical class? (OR perhaps better stated: how do I loop through the available classed in the div, match one of them to the variable, and add the class show to it)