Creating a HTML and JavaScript carousel without relying on the animate function

Question

Creating a HTML and JavaScript carousel without relying on the animate function

I am currently facing some challenges with building a custom slider. While it moves forward smoothly using CSS animation, I'm struggling to implement a backward motion with an animation. It seems like I need to loop through the slides and try a different approach, but I can't figure it out at the moment.

Initially, I tried setting the current_slide by adding an .active class to the first article on load and then using the jQuery index function, but that didn't work as expected. Also, I'm not familiar with the 'props:' syntax and my online search hasn't been very helpful. Any assistance would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

Make sure to take a look at this code snippet: http://jsfiddle.net/YFgAM/

$('.block-13 .show-more.prev').click(function () {

    var last = $('.block-13 .list li:last-child');

    last.remove();

    $('.block-13 .list').filter(':not(:animated)').prepend(last);

    $('.block-13 .list').filter(':not(:animated)').css({
        right: '+=' + width
    });

    $('.block-13 .list').filter(':not(:animated)').animate({
        right: '-=' + width
    });

});

You should insert the element (specifically, '.carousel-prev') before starting the animation.

Answer 2

Make sure to take a look at this code snippet: http://jsfiddle.net/YFgAM/

$('.block-13 .show-more.prev').click(function () {

    var last = $('.block-13 .list li:last-child');

    last.remove();

    $('.block-13 .list').filter(':not(:animated)').prepend(last);

    $('.block-13 .list').filter(':not(:animated)').css({
        right: '+=' + width
    });

    $('.block-13 .list').filter(':not(:animated)').animate({
        right: '-=' + width
    });

});

You should insert the element (specifically, '.carousel-prev') before starting the animation.

Creating a HTML and JavaScript carousel without relying on the animate function

Answer №1

Similar questions

What is the best way to execute fetch calls in sequence (A -> B -> C) within a React component?

Error encountered when referencing iscrollview and iscroll js

Error Alert: Vue is not recognized in Browserify environment

Creating dependent dropdown lists is a useful way to streamline data entry and ensure accuracy in your

Examining a specific element node to see if it contains a certain string

Error: The function was expecting a mapDiv with the type of Element, but instead undefined was passed - google

Efficient way to handle nested variables in templates with Nunjucks or alternative approaches

What is the process of transforming an xhr request into an angular $http request?

Notification for radio button selected

Issue: Attempting to render objects as React children is invalid. Consider using an array if you want to render a collection of children. This problem often occurs when fetching data from a JSON

"Centered in the middle of the screen, an animated

JavaScript error: Resource could not be loaded

Encountering an unusual issue: Unable to access undefined properties (specifically 'get')

Troubleshooting: Issue with AngularJS Image onload directive - "this" reference not functioning properly?

Tips on customizing regex to selectively identify specific strings without capturing unrelated ones

Having trouble displaying a cube using three.js even though I have meticulously organized the object-oriented structure of my application

Laravel validation successfully validates Vanilla AJAX request, but the controller does not receive the values

Is it possible to use multiple routes in the same page with Vue-router?

iterative outcomes with ajax and jquery scripting in javascript

If the session cannot be located, users will be redirected to the sign-in page