HTML:
<section id="a" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
  <button class="prevslide">&#10094;</button><button class="nextslide">&#10095;</button>
  <div class="slides">
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://farm5.staticflickr.com/4589/25562160318_b7e30ec632_o.png" itemprop="contentUrl" data-size="0x0">
        <img src="https://farm5.staticflickr.com/4589/25562160318_b7e30ec632_o.png" itemprop="thumbnail" alt="" />
      </a>
      <figcaption itemprop="caption description">Описание к первой картинке</figcaption>
    </figure>
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://farm5.staticflickr.com/4595/25562160058_5fde5de5d7_o.png" itemprop="contentUrl" data-size="0x0">
        <img src="https://farm5.staticflickr.com/4595/25562160058_5fde5de5d7_o.png" itemprop="thumbnail" alt="" />
      </a>
      <figcaption itemprop="caption description">Описание ко второй картинке</figcaption>
    </figure>
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
      <a href="https://farm5.staticflickr.com/4595/25562159978_9a124a180e_o.png" itemprop="contentUrl" data-size="0x0">
        <img src="https://farm5.staticflickr.com/4595/25562159978_9a124a180e_o.png" itemprop="thumbnail" alt="" />
      </a>
      <figcaption itemprop="caption description">Описание к третьей картинке</figcaption>
    </figure>
  </div>
</section>
CSS (слайдер):
.gallery {
    width: 100%;
    position: relative;
    text-align: center;
    margin: 20px 0;
    clear: both;
}


.gallery a,.nolink {
    box-shadow: none;
    margin: 0;
    display: block;
}

.gallery a:hover,.nolink:hover {
    background: none;
    margin: 0;
    padding: 0;
}

.slides img {
    max-width: 75%;
    margin: 0 auto;
}

.gallery button {
    padding: 5px 15px;
    font-size: 150%;
    margin-bottom: 10px;
    background: #d9d9d9;
}

.gallery button:hover {
    background: #f2f2f2;
}

.gallery button:active {
    background: #fff;
}

.prevslide {
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}

.nextslide {
	-webkit-border-radius: 0 5px 5px 0;
	-moz-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
}

.activeslide {
    display:block;
}
CSS (PhotoSwipe): photoswipe.css (закомментирована анимация)

Jquery (слайдер):
$(window).load(function() {
    $(".slides").each(function() {
        var id = $(this).parent().attr('id');
        $('#'+id+' figure').first().addClass('activeslide');
        $('#'+id+' figure').hide();
        $('#'+id+' .activeslide').show();
    });
});

$('.nextslide').click(function() {
    var id = $(this).parent().attr('id');
    $('#'+id+' .activeslide').removeClass('activeslide').addClass('oldactive');
    if ($('#'+id+' .oldactive').is(':last-child')) {
        $('#'+id+' figure').first().addClass('activeslide');
    } else {
        $('#'+id+' .oldactive').next().addClass('activeslide');
    }
    $('#'+id+' .oldactive').removeClass('oldactive');
    $('#'+id+' figure').hide();
    $('#'+id+' .activeslide').show();
});

$('.prevslide').click(function() {
    var id = $(this).parent().attr('id');
    $('#'+id+' .activeslide').removeClass('activeslide').addClass('oldactive');
    if ($('#'+id+' .oldactive').is(':first-child')) {
        $('#'+id+' figure').last().addClass('activeslide');
    } else {
        $('#'+id+' .oldactive').prev().addClass('activeslide');
    }
    $('#'+id+' .oldactive').removeClass('oldactive');
    $('#'+id+' figure').hide();
    $('#'+id+' .activeslide').show();
});
Jquery (PhotoSwipe): photoswipe.js (убраны некоторые кнопки, отключена history, добавлена возможность не указывать явный размер изображения - data-size="0x0")

Картинки (PhotoSwipe): photoswipe.png, photoswipe.gif, photoswipe.svg

PhotoSwipe сайт с документацией и примерами: photoswipe.com