Fancybox - 到达最后一张图片时到达另外五张

Question

截图

我使用bootstrap 3和fancybox，你可以在屏幕截图中看到我有5个图像在行中，我想在到达最后一个图像时单击右箭头，这将导致幻灯片到另外五个。箭头示例

这是我的代码

＆＃13;

＆＃13;

(function($) {

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect    : 'fade',
        closeEffect    : 'fade',
		loop : true
    });
});
})( jQuery );

＆＃13;

h2 {
	font-family: 'Sintony' sans-serif;
	font-size: 25.5px;
	color: #00aeef;
	text-transform: uppercase;
	margin: 0;
	padding-top: 42px;
	padding-bottom: 14px;
}

.fancybox img {
	margin-right: 4px;
	margin-bottom: 7px;
	border-radius: 8px;
	display: inline;
	}

＆＃13;

<div class="col-xs-12 col-sm-12 col-md-12 illustrative">
				<h2>illustrative works</h2>
				<p>Sed suscipit risus vel sapien fringilla elementum. Donec vulputate sapien suscipit nulla tincidunt sodales. 
				Ut ut nisi in nisl convallis ultricies. Curabitur tristique faucibus tincidunt. 
				Donec rutrum mi faucibus nisi luctus sodales facilisis neque semper. </p>
				
				<a class="fancybox" rel="gallery1" data-fancybox-group="gallery1" href="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/fabulous-Illustration-b.jpg" title="DJ Fabulous Illustration">
					<img src="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/fabulous-Illustration-s.jpg" class="img-responsive" alt="DJ Fabulous Illustration" />
				</a>
				<a class="fancybox" rel="gallery1" data-fancybox-group="gallery1" href="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/card_b.jpg" title="Illustrative artwork for American recording artist Mike Posner's debut single 'Cooler than me">
					<img src="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/card_s.jpg" class="img-responsive" alt="Illustrative artwork for American recording artist Mike Posner's debut single 'Cooler than me" />
				</a>
				<a class="fancybox" rel="gallery1" data-fancybox-group="gallery1" href="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/Saskia-Pomeroy-Abstract-Colour-Shapes-Forms-b.jpg" title="Saskia Pomeroy Abstract Colour Shapes Forms">
					<img src="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/Saskia-Pomeroy-Abstract-Colour-Shapes-Forms-s.jpg" class="img-responsive" alt="Saskia Pomeroy Abstract Colour Shapes Forms" />
				</a>
				<a class="fancybox" rel="gallery1" data-fancybox-group="gallery1" href="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/illustration11_b.jpg" title="Just Another Illustration sample">
					<img src="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/illustration11_s.jpg" class="img-responsive" alt="Just Another Illustration sample" />
				</a>
				<a class="fancybox" rel="gallery1" data-fancybox-group="gallery1" href="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/city_b.jpg" title="Illustration City">
					<img src="http://www.linecase.mile.x3.rs/wp-content/themes/linecase/img/city_s.jpg" class="img-responsive" alt="Illustration City" />
				</a>
				
			</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为，你要找的是一个滑块/旋转木马，每张幻灯片包含一组5张图片。 Owl carousel是我用于多个项目的好选择。

Answer 2

你可以使用bootstrap轮播。这是示例this