Responsive image slider

• For variable and function names, use camelCase. For constants, or at least variables that are used as constants, use ALLCAPS_AND_UNDERSCORES. For constructor functions, use TitleCaps (I forgot how they called this). This is a convention which is common among programming languages and you should follow this to avoid misunderstandings.

• Never forget semi-colons, even when JS inserts them for you at certain cases.

• As much as possible, use strict comparison (===,!== etc.)

• Use a tool to check for code quality. Most of the bad practices will be weeded-out by using such tools. You can use JSHint to check your syntax.

As for code:

$(function () {

    //A handy tip in keeping things clean is that you can use comma-separated
    //variable declarations. It's best you use this style when declaring
    //variables without assigning anything.
    var width, time, plusPos;

    //As for variable declaration with assignments, it's best they are var'ed
    //individually. Commas tend to get messy when assignments are done.
    var slide = $(".imgSection li");
    var imgSec = $(".imgSection").hammer();
    var crntPos = 0;

    function changeImg(e) {

      crntPos = $(this).index();

      var clkWth = width * .1;
      var newPos = (crntPos * width) - clkWth;

      slide.css("transform", "translate3d(-" + newPos + "px,0,0)");

      //I notice that changeImg is called every click of `slide`. This means
      //that if currentPos === 1, a handler gets attached? You might want to
      //review this one
      if(crntPos === 1) {
        $("li:eq(0)").on("click", function () {
            slide.css("transform", "translate3d(0,0,0)");
          });
      }
    }

    //I found that your resize function does the same thing regardless of
    //the condition. We'll remove the condition instead.

    function resize() {
      slide.eq(crntPos).trigger('click');
    }

    //.on() accepts a map of events and handlers. You can use this style to
    //bind events on an object in one place neatly. You also avoid wrapping
    //the same object more than once with jQuery. In this case, it's avoiding
    //the call of $(window) more than once.
    $(window).on({
        'load resize': function () {
          width = slide.outerWidth(true);
        },
        'resize': function () {
          clearTimeout(time);
          time = setTimeout(resize, 100);
        }

      });

    imgSec.on({
        'dragleft dragright': function (ev) {
          ev.gesture.preventDefault();
        },
        'swipe': function (ev) {

          var index;

          //You can cache repeatedly accessed values
          var direction = ev.gesture.direction;

          //As you can see, the only difference the conditions do is determine the
          //value for .eq(). You can DRY the code by extracting the common calls.
          if(direction === 'left') {

            //taking advantage that the direction in this block is already left
            //we merge in the last child check
            if($(this).is(':last-child')) {
              index = 0;
            } else {
              index = crntPos + 1;
            }

          } else if(direction === 'right') {

            //Use an else to avoid further execution of the condition. That way,
            //when direction is already 'left', it won't check if it is 'right'.
            index = crntPos - 1;
          }

          //Our factored-out call
          slide.eq(index).trigger('click');

        }

      }, 'li');

    FastClick.attach(document.body);
    slide.click(changeImg);

  });