Вашу задачу нужно разделить на 3:
1) отображение картинок в одной секции
2) переключение между ними по какому-то событию
3) анимация переключения
1. Отображение картинок в одной секции
Запихнуть несколько картинок в один блок можно разными способами. Я предпочитаю следующий:
- создается контейнер нужного размера
- внутри размещаются контейнеры для изображений, которые позиционируются абсолютно относительно основного. Таким образом, они получаются такого же размера, как и основной, и размещаются друг под другом.
- С помощью свойства
background-size: cover устанавливаются необходимые изображения в качестве фона во внутренних контейнерах. Это даст нам автоматически масштабированные и подрезанные изображения по размеру контейнеров.
Таким образом, мы имеем несколько слоев с фоновыми картинками.
2. Переключение между картинками
Тут все достаточно просто. Скрываем по умолчанию все, отображаем одну с помощью дополнительного класса.
А дальше используем наш любимый js, чтобы управлять дополнительным классом.
Имеем галерею такой структуры:
<div class="gallery">
<div class="slide active"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
По клику на галерею будем (с помощью jQuery):
- получать активный элемент
- получать следующий за ним. Если следующего нет - переходить к первому
- у активного класс убирать, следующему добавлять
$('.gallery').click(function() {
var $this = $(this);
var $active = $this.find('.slide.active');
var $next = $active.next();
if (!$next.length) {
$next = $this.find('.slide:first');
}
$active.removeClass('active');
$next.addClass('active');
});
3. Анимация
Анимацию можно сделать как с помощью JS, так и с помощью CSS.
CSS:
- устанавливаем для активного контейнера прозрачность 1 (непрозрачный)
- устанавливаем для остальных прозрачность 0 (абсолютно прозрачный)
- задаем анимацию для переключения между этими режимами с помощью
transition
.gallery .slide {
opacity: 0;
transition: opacity 1s;
}
.gallery .slide.active {
opacity: 1;
}
В итоге получаем
Fiddle
Ну и одна из самых популярных jQuery-библиотек для галерей с кучей разных эффектов:
www.jssor.com 
