Develop an engaging billboard carousel using jQuery

After coming across a tutorial on tympanus, I decided to make some modifications to create a rotating billboard effect. However, something seems to be going wrong and it's driving me crazy trying to figure out the problem!

$(function() {
$('#ad_1 > img').each(function(i,e){
    rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
    elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
        var other;
        if(elem1.parent().attr('id') == 'ad_1')
            other = $('#ad_2').children('img').eq(i);
        else
            other = $('#ad_1').children('img').eq(i);
            other.animate({'marginLeft':'0px','width':'35px'},speed,function(){
            var f = function() { rotate(other,speed,timeout,i) };
            setTimeout(f,timeout+i*100);
        });
    });
}});

Aside from these modifications, everything else follows the original instructions from tympanus. Any help would be greatly appreciated! Thank you.

javascriptjquerycsscallbackslideshow

Answer №1

In the future, it would be beneficial for you to clearly explain your goal instead of leaving it up to those you seek help from to interpret. After some experimentation, I found that you want a delayed animation effect from left to right on each panel, rather than all panels animating simultaneously.

Your attempt to achieve this involved adjusting the duration between panel rotations based on index, causing different display times for each panel and distorting the overall image over time.

To ensure consistent display durations for all panels, revert the change you made to the setTimeout function.

setTimeout(f, timeout);

To delay when each panel starts rotating, add a setTimeout within the each handler that triggers the rotations:

$('#ad_1 > img').each(function (i, e) {
    setTimeout($.proxy(function () {
        rotate($(this), 500, 7000, i);
    }, this), (i * 100));
});

Note the increased timeout value in the rotate function to accommodate sequential animations.

I suggest improving the formatting of your code by ensuring proper indentation, spacing, and including curly braces for readability.

Answer №2

It appears that your else statement is missing brackets, which could be causing an issue in the code. It might need to be revised like this:

$(function() {
$('#ad_1 > img').each(function(i,e){
    rotate($(this),500,3000,i);
});
function rotate(elem1,speed,timeout,i){
    elem1.animate({'marginLeft':'18px','width':'0px'},speed,function(){
        var other;
        if(elem1.parent().attr('id') == 'ad_1') {
            other = $('#ad_2').children('img').eq(i);
        } else {
            other = $('#ad_1').children('img').eq(i);
            other.animate({'marginLeft':'0px','width':'35px'},speed,function(){
            var f = function() { rotate(other,speed,timeout,i) };
            setTimeout(f,timeout+i*100);
        });
       }
    });
}});

*edit: Make sure you have included jQuery in your project for this code to work properly.

<script src="jquery-1.3.2.js" type="text/javascript"></script>

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

Unable to switch between navigation items and icons

Currently, I am in the process of learning vanilla JavaScript and I'm trying to incorporate a navigation feature similar to when the hamburger icon is clicked. However, I have encountered an issue where I cannot toggle the hamburger icon to change it ...

javascripthtml

Add a new variable to the data in a jQuery ajax request for each request with any updates

I've encountered an issue with the code below, which is meant to add additional data to any ajax request made by my app. It works fine when the page first loads, but because my application is single-page and ajax-based, I need the updated variable val ...

javascriptphpjqueryajax

displaying the download status of a file during the download process with PHP and jquery

Exploring the creation of a unique download manager with PHP and jQuery. In search of a script that enables file downloads with visible progress tracking. The attempted implementation has not yielded the desired results: jQuery function init ...

phpjqueryajax

Is there a CSS Grid that supports IE6+ with percentage-based layouts?

Seeking a sleek CSS grid system that is percentage-based with 12 columns and works well on IE6+ as well as all modern browsers. Support for nested columns would be a bonus but not mandatory. Many grids out there lack compatibility with IE6 or are based sol ...

cssinternet-explorer-6percentagegrid-layout

Vue-Router triggers a "ReferenceError: jQuery is undefined" error

Setting up a new vue project and encountering a router error in the console: "[vue-router] Failed to resolve async component default: ReferenceError: jQuery is not defined [vue-router] uncaught error during route navigation: ReferenceError: jQuery is no ...

jqueryvue.jsnpmvuejs2vue-router

Tips for preventing DIV elements from overlapping

In the process of creating a CSS design for a SIM game I enjoy playing, a client requested four boxes: two large ones with two smaller ones aligned horizontally in between. Everything was going smoothly until I attempted to add headers to the boxes. The en ...

htmlcssalignment

What CSS attribute determines the distinction in visual presentation between two elements that share the same CSS configurations?

In the HTML code below, there is a button and a div with the same class and content: <div class="root"><!-- --><button class="outer"><div class="middle"><div class="inner">label</div></div></button><!-- - ...

cssdebugging

What is the best way to ensure an observable has finished before retrieving a value?

Looking at the function provided below: public getAssemblyTree(id: number) { .... const request = from(fetch(targetUrl.toString(), { headers: { 'responseType': 'json' }, method: 'GET' })); request.sub ...

javascriptangulartypescriptobservable

Is it possible for a Vue component to contain both data and props simultaneously?

How does a standard Vue component look? Vue.component('blog-post', { // camelCase in JavaScript props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) The basic documentation on components does not us ...

javascriptvue.js

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

If I can't find an answer, then I ask: There are two different forms on the page: one is the "ask for call" form (which appears on every page of the site) and the other is a simple "contact form" (specifically placed on the contact page). Both forms ...

javascriptjqueryhtmlforms

Proportional fluid image grid with responsive design

After implementing various media queries, I've managed to create an image grid using Bootstrap 4+ that looks great on specific devices and layouts. Here's the reference code: .cmd-three-img-container { position: relative; margi ...

javascripthtmlcssflexboxbootstrap-4

Stop users from saving the page in Next.js

I'm currently working on a NextJs project that involves building an editor application. I want to ensure that the editor functionality does not work when users attempt to save the page in a different format, similar to how applications like Youtube an ...

javascriptnext.jsserverclient

What sets apart jQuery's `click`, `bind`, `live`, `delegate`, `trigger`, and `on` functions, and how can they be utilized differently in coding

I have gone through the documentation for each function provided on the official jQuery website, but I couldn't find any comparison listings for the following functions: $().click(fn) $().bind('click',fn) $().live('click',fn) $().d ...

javascriptjquery

Unusual CSS anomalies encountered on iPhone devices

Having an issue with the animation on my homepage where the logo spins into place. It works fine on desktop and in Chrome and Firefox mobile simulators, but on actual phones it rotates an additional 90 degrees. Included are screenshots from the Firefox mob ...

cssmobilesafarimobile-safari

Webpack dynamically imports files from a folder

In order to streamline my development process, I have a specific structure for organizing React components. Each main component has its own components folder right alongside it. Currently, I find myself manually importing each component from the components ...

javascriptreactjswebpackimportrequire

Papaparse and vfile not functioning properly - Output appears jumbled

I recently posted a question on Stack Overflow about parsing large CSV files, the issue can be found here. The problem involves reading a CSV file and converting it into a table format. I attempted to use the code provided in one of the responses, but unfo ...

javascriptjquerycsvpapaparse

What steps can be taken to avoid an input with a width of 100% from overflowing?

I'm facing an issue that needs to be resolved. Currently, I have a group of div elements arranged in a table-like structure with a row and three columns. When these divs reach a maximum width of 768px, the first column is hidden, leaving only the se ...

htmltwitter-bootstrapcssflexbox

Creating a responsive web design with a user-friendly CSS grid layout

Currently, I am delving into the realm of CSS grid to better comprehend its functionality. In my layout design, there are two menus (colored in red) positioned on either side of a central main content box (colored in blue). As the screen size reduces and ...

htmlcssgridgrid-layoutcss-grid

Is it possible for AJAX to access files with unique extensions?

I recently discovered some files with the extension .cst on my localhost server. I'm wondering if AJAX is capable of loading them. So, here's my question: Can AJAX load files with custom extensions? If yes, how can I achieve this? If not, is ther ...

javascriptajax

Tips for accessing arrayList data within a loop in JavaScript and displaying it in an HTML <c: forEach> tag

I have an array list stored inside a javascript code block. I am looking to extract this array list and iterate through it using the html tag <c:forEach>. How can I achieve this? Currently, I am able to display the array list using <h:outputText&g ...

javascriptjavaarraylist