transition and effect on images with display: block a slideshow

Question

I have a slideshow that I’m developing.

As images, are in display:none and when click in the arrows, I make display: block in the image that will appear and display: none in the other.

I’d like to do two things:

1) A transition, type appears to image at a time, click in arrows and rolling to the left or direct, and the images (next/previous) roll together.

2) A effect type one clarão when the image reaches its position.

These faithiare possible in display:block? Like?

Here’s what I got so far:

// JavaScript Document
$(document).ready(function(e) {

  quantasImagens = $("div.slideShow div.boxSlide div.imagens img").length-1;
  contador = 0;
	
  $("div.slideShow div.boxSlide div.anterior").click(function() {
	  contador = contador==quantasImagens ?  -1 : contador;
	  contador++;
	  $("div.slideShow div.boxSlide div.imagens img").css("display","none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display","block");
  });
  
  $("div.slideShow div.boxSlide div.proximo").click(function() {
	  contador = contador==0 ? quantasImagens+1 :  contador;
	  contador--;
	  $("div.slideShow div.boxSlide div.imagens img").css("display","none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display","block");
  });
  
  $("div.slideShow div.contador span.contaSlide").click(function() {
	  index = $(this).index();
	  $("div.slideShow div.boxSlide div.imagens img").css("display","none");
	  $("div.slideShow div.boxSlide div.imagens img").eq(index).css("display","block");
  });
  
});

@charset "utf-8";
/* CSS Document */

div.slideShow {
	position: relative;
	width: 100%;
}
div.slideShow div.boxSlide,
div.slideShow div.contador {
	position: relative;
	display: block;
	width: 100%;
}
div.slideShow div.boxSlide{
	height:auto;
}
div.slideShow div.boxSlide div.imagens img {
    width: 100%;
    height: auto;
    display: none;
}
div.slideShow div.boxSlide div.imagens img:first-child {
	display:block;
}
div.slideShow div.boxSlide div.anterior,  
div.slideShow div.boxSlide div.proximo {
	position: absolute;
	display: block;
	top: 50%;
}
div.slideShow div.boxSlide div.anterior {
	left: 10%;
}
div.slideShow div.boxSlide div.proximo {
	right: 10%;
}
div.slideShow div.boxSlide div.anterior span, 
div.slideShow div.boxSlide div.proximo span {
	position: absolute;
	display: block;
	width: 30px;
	height: 30px;
}
div.slideShow div.boxSlide div.anterior span.boxSpan, 
div.slideShow div.boxSlide div.proximo span.boxSpan {
	background-color: rgb(200,200,200);
	opacity: .5;
	z-index: 1;
}
div.slideShow div.boxSlide div.anterior span.setaSpan, 
div.slideShow div.boxSlide div.proximo span.setaSpan {
	line-height: 30px;
	text-align: center;
	font-weight: bolder;
	cursor: pointer;
	z-index: 2;
}
div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan {
	opacity: 1;
}
div.slideShow div.contador {
	background-color:rgba(240,240,240,.5);
}
div.slideShow div.contador span.contaSlide {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgb(200,200,200);
	cursor: pointer;
	opacity: .5;
}
div.slideShow div.contador span.contaSlide:hover {
	opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slideShow">
    <div class="boxSlide">
       <div class="imagens">
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" />
       <img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png" />
       </div>
       <div class="anterior">
          <span class="setaSpan"><</span>
          <span class="boxSpan"></span>
       </div>
       <div class="proximo">
          <span class="setaSpan">></span>
          <span class="boxSpan"></span>
        </div>
    </div>
    <div class="contador">
       <span class="contaSlide">1</span>
       <span class="contaSlide">2</span>
       <span class="contaSlide">3</span>
    </div>
  </div>