Here is a screenshot of my issue:
https://i.stack.imgur.com/duhzn.png
Incorporating Bootstrap 3 and FancyBox, I am facing an issue with displaying images in rows. When I reach the last image, clicking on the right arrow should result in sliding to another set of five images. How can I achieve this functionality? See example with arrows below.
This is my code snippet:
(function($) {
$(document).ready(function() {
$(".fancybox").fancybox({
openEffect : 'fade',
closeEffect : 'fade',
loop : true
});
});
})( jQuery );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;
}<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>