Is there a way to adjust the jQuery cycle plugin to create a slideshow with two images instead of just one?

Picture a slideshow that resembles the one showcased in this link: http://malsup.com/jquery/cycle/div.html, but with only two images instead of three.

Also envision it having two triggers, similar to the demo in the center of this page: http://jquery.malsup.com/cycle/lite/

That's the kind of slideshow I aim to create.

However, I want the images to swap positions when you click 'next' and 'prev'. Thus, the code would appear something like this:

<div id="slideshow" width="100%">
        <div class="slide">
            <img src="image1.jpg" width="43%">
            <img src="image2.jpg" width="43%">
        </div>
        <div class="slide">
            <img src="image3.jpg" width="43%">
            <img src="image4.jpg" width="43%">
        </div>      
    </div>

The jQuery script would resemble this:

$('#slideshow').cycle({
        fx: 'wipe',
        timeout: 0,
        prev: '#left-arrow',
        next: '#right-arrow',       
    });

The stylesheet for this:

#slideshow {
    overflow: hidden;
}

So imagine, when you click 'next' (or '#right-arrow' in this context) - and you are at the initial state of the slideshow, what should occur is image2 sliding to image1's position, and image3 becoming visible in place of image2.

Click next again, the rotation continues and now images1&2 are no longer visible.

Click previous and it navigates back through the sequence.

How can I adapt this plugin to achieve that functionality?

I experimented with various approaches, including placing each image on a separate slide - but my attempts didn't yield the desired outcome.

Any insights or suggestions?

Answer №1

Consider using jCarousel or jCarouselLite to achieve this functionality.

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

The issue with Cordova (PhoneGap) is that when you move a video file captured by the camera, the gallery thumbnail

Is there a plugin available for Cordova (Android) that can refresh the gallery? I am currently capturing video using the Cordova plugin cordova-plugin-media-capture, which saves the video to the default sdcard path (gallery). After saving the file, I ...

A guide on extracting a URL from source tags using Cheerio/jQuery

I have been struggling to retrieve the first image with data-srcset attribute ("https://sample.img_1") using Cheerio. None of my previous attempts have been successful. My most recent attempt looks like this: $(".sample_picture [media='(max-width: 64 ...

Having trouble with @Url.Action not functioning properly in an AJAX request

When attempting to use AJAX to send a set of values from my view to my controller, I encountered an issue where the URL.Action method was not converting into the corresponding controller and action, but instead appearing as url.action in the URL. This is ...

Retrieve data quickly and navigate directly to specified div element on page

I am facing an issue with scrolling on my website. While it currently works fine, I would like to make the scrolling instant without any animation. I want the page to refresh and remain in the same position as before, without automatically scrolling to a s ...

Tips for updating model data when integrating jQuery Data tables with ASP.NET MVC

Managing a large amount of data returned from JSON can be complex. To tackle this, I am utilizing jQuery dataTable for sorting, filtering, and pagination purposes. The functionality is working seamlessly for sorting, searching, and paginating the data. H ...

Showing off the latest products at the top of the list

Typically, when utilizing ngFor, the most recent item is displayed underneath the initial element. For instance, a list containing: [Apple, Orange, Banana] If we use ngFor to display this list: Apple Orange Banana I am interested in learning a method t ...

The Kendo UI Combobox triggering the change event twice

After noticing some strange behavior in all the comboboxes within my application, I realized that the Kendo UI ComboBoxes were triggering the change event twice, resulting in two HTTP requests being made when the code inside only required one. Despite cond ...

Tips for using data-id instead of id when binding in jQuery

Good morning, The code snippet I currently have makes use of an ID: $('#signup-country').bind('change keyup', function(){ Now, I am interested in using the data-id attribute instead of a regular id (in this case #signup-country). Co ...

What is the best way to enjoy video and audio content on a mobile website?

What is the best way to incorporate video and audio on mobile websites? I am interested in learning how to convert and embed a Video and an MP3 file on a page of a mobile website. ...

Having trouble getting the toggleClass function to work properly?

I'm facing an issue with some straightforward code that I've written. $(function() { $("#tren").click(function() { $("#trens").toggleClass("show"); }); }); .show { color: "red"; } <ul> <li id="tren">Some text</li> < ...

Display a circular div containing information; upon hovering over it, reveal all details

Looking to create a layout with three circular divs side by side where the bottom of each circle displays the beginning of an information text. Upon hovering, the full text should be revealed: My initial approach involved setting the CSS properties for a ...

The output generated by BeautifulSoup is consistently " b' ' "

No matter which html file I select, all I keep getting as output is b' '. from bs4 import BeautifulSoup html_doc = "C:/Users/George/Desktop/bsTest" soup = BeautifulSoup(html_doc, 'html.parser') print(soup.prettify()) Is there anyone ...

Modify the button's color when clicked and add it to an array with JavaScript

I am currently working on changing the color of buttons to indicate a selection. When a button is selected, its value is added to an array. If the same button is clicked again, it becomes unselected and its color reverts back to the original state, with it ...

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

Arrange a series by the actual pixel width of the string

Imagine you have an array of tags represented as strings and you need to display them in a narrow view. Some tags are smaller, allowing for 2 to fit on one line, while larger tags require their own line. Your goal is to sort the array so that the smalles ...

What is the best way to halt a specific function in jQuery?

I recently developed a website for my photographer friend, and I implemented a feature where the home page is initially blurred. Visitors can click a button to unblur the content. While the functionality works smoothly, there's one issue - every time ...

Storing notes using HTML5 local storage

I recently developed a unique note-taking web application where users can create multiple notes and switch between them using tabs on the left side. My next step was to implement local storage for saving these notes, so I inserted the following code: $(d ...

Could a complex, intricate clipping path be created using CSS 3?

Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...

Can anyone help me get my carousel to work properly?

I am facing a carousel problem in my personal exercise project. I have gathered HTML, CSS, and JavaScript from the internet and am attempting to integrate them all together. //Sidebar script start $(document).ready(function () { var trigger = $(&apo ...

Taking pictures with the camera in three.js on an iPhone

While working on a project that required capturing the camera video stream as a texture in three.js for mobile phones, I encountered an issue. The code I was using ran smoothly on Android devices but not on iPhones. Ideally, when the user grants permission ...