Display a fancy slideshow that transitions to five new images when the last one is reached

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>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

It seems that you need a slider or carousel with multiple images in each slide. I recommend checking out Owl Carousel, which I have found to be a great option for projects involving this feature.

Answer №2

One option is to utilize the bootstrap carousel for displaying content in a rotating manner. Check out this example of a bootstrap carousel for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leverage the power of JavaScript functions within the app.component.ts file of

I have a JavaScript file named action.js and I am trying to incorporate it into an Angular project. After doing some research, I found out that the js file should be placed in the assets folder and the path must be referenced in the scripts array within an ...

javascripthtmlnode.jsangulartypescript

Bug in jQuery mouse hover effect causes the mouseover event to fire multiple times upon mouseout

I'm experiencing an issue with my gallery grid where a nested span displaying the title is supposed to slide up on mouseover and hide on mouseout. However, whenever the mouse moves down to the title or hovers out of the tile from the bottom, the hover ...

jqueryhoverjquery-animatemouseovermouseout

Unable to perform dynamic query with $in operator in Mongoose find method

I am currently utilizing Node.js along with Mongoose version 5+ to create a dynamic query in my database. The variable filterField represents the field name, while filterValues is an array. Here is an example of how my code looks: if (req.currentUser.acti ...

javascriptnode.jsmongodbmongoose

What is the best way to invoke a function that is declared within a React component in a TypeScript class?

export class abc extends React.Component<IProps, IState> { function(name: string) { console.log("I hope to invoke this function"+ name); } render() { return ( <div>Hello</div> ); } } Next, can I cal ...

javascriptreactjstypescriptreact-component

Error message "Unexpected token" occurs when attempting to use JSON.parse on an array generated in PHP

My attempt to AJAX a JSON array is hitting a snag - when I utilize JSON.parse, an error pops up: Uncaught SyntaxError: Unexpected token Take a look at my PHP snippet: $infoJson = array('info' => array()); while($row = mysqli_fetch_array($que ...

javascriptphpajaxjson

Generate a complete screenshot of a website using Chrome 59 through code

Is it possible to programmatically capture a full-page screenshot of a website using the latest Chrome 59 and chromedriver with Selenium Webdriver, even if the website is larger than the screen size? ...

javascriptnode.jsselenium

Having trouble with Viewport CSS being restricted by Blogger?

I've been working on configuring my personal blog, which is hosted on Blogger, to properly adapt to the Windows 8 IE snap feature. Through my research online, it has been suggested that I include a @viewport in the CSS. However, it seems like the CSS ...

htmlcssinternet-explorerwindows-8.1blogger

Cease the execution within the promise.then block

Embarking on my nodejs journey has been an exciting experience. While I have a background in other programming languages, the concept of promises is new to me. In my nodejs environment, I am using expressjs + sequelize. I'm currently working on setti ...

javascriptnode.jsexpresssequelize.js

Non-clickable image

My social media page icons are not hyperlinked, and I can't figure out why. I've surrounded them with the href attribute, but for some reason, it's not working. Can anyone provide assistance? Here is the HTML code: <!DOCTYPE html> ...

htmlcsshyperlinkicons

Hiding the author, category, and date information from displaying on WordPress posts

After creating a Wordpress blog site and adding the category widget to the right sidebar as a drop down, I realized that I needed to customize its layout in terms of colors and design. However, I am struggling to find out how it can be done, which .php fil ...

phpcsswordpress

Error 400: Invalid Request: Issue encountered when swapping code for Asana access token using Next.js

Encountered a 400 Bad Request error while trying to exchange the code for an access token at . I am unsure of the cause and would appreciate any assistance. Below is the code: const GetAsanaAccessToken = async (req, res) => { const body = { grant ...

javascriptapinext.jsasanaasana-api

Utilizing React Typescript for Passing Props and Implementing them in Child Components

I'm currently working with React and TypeScript and attempting to pass data as props to a child component for use. However, I've encountered an error that I can't quite understand why it's happening or how to resolve it. Additionally, I ...

javascriptreactjstypescript

Identifying the selected element with jQuery

Let's say I have a form that includes both inputs and textareas. How can I determine which one is currently selected or clicked on? $('body').on('change', 'input textarea', function() { }) In simpler terms, ...

jquery

react-datepicker displaying error message "Preventing default action not possible within a passive event listener invocation"

I've integrated the react-datepicker library in portal mode. While it functions well on browsers, I encounter an error when using mobile browser mode. An issue arises stating: "Unable to preventDefault inside passive event listener invocation" Des ...

javascriptcsshtmlreactjsreact-datepicker

Troubleshooting the issue of Ajax form submission not working as expected without page refresh

I am attempting to submit the form on the same page without refreshing the page. Here is my form: <?php if(isset($_POST['transfer'])){ $amount = $_POST['amount'] ? $_POST['amount'] : ''; $from_c = $_POST[ ...

phpjqueryajax

Position a dynamic <div> in the center of the screen

My goal is to design a gallery page with a list of thumbnails, where clicking on a thumbnail will open the related image in a popup div showing its full size. The issue I'm facing is how to center the popup div on the screen, especially when each pic ...

javascriptjqueryhtmlcss

What strategies are typically employed to prevent falling into the callback hell trap when working with error-back asynchronous functions in Node.JS?

As a new Node user, I've been practicing pure Node scripting without relying on third-party npm packages. However, I quickly ran into the issue of my code becoming nested with callbacks inside callbacks, making it difficult to follow. This can lead to ...

javascriptnode.jsasynchronouscallback

Assistance with a Jquery plugin called qtip

I am currently utilizing the JQuery plugin qtip to showcase tooltips in my asp.net application. Below is a snippet of my code: $("ul li").css("width","90px"); $('ul li').each(function(){ $(this).qtip({ content: ...

jqueryjquery-uijquery-pluginsqtip

When using jQuery to add an item to a List, it disappears immediately after

I am facing an issue with the code I have. Whenever I click on the "Add" button to add an item, it briefly appears in the list but then disappears. I'm having trouble figuring out why this is happening. $(document).ready(function() { $("#submitB ...

javascriptjquery

Different Line Thickness in Dropdown Menu

Is there a way to adjust line heights in CSS within a drop down menu? I have attempted to change the font sizes of each element, but the new font size does not seem to take effect once an option is selected. Any suggestions would be greatly appreciated! & ...

javascripthtmlcssselectdrop-down-menu