Circular Carousel JavaScript Animation loosing KeyFrame position - javascript

All, I'm developing a circular carousel that will be used eventually as an Elementor Page Builder widget.
The carousel lays out correctly and animates correctly for the first click. Afterwards the grid containing the individual cards does not rotate to the correct new position. This throws off the cards' orientation.
Positions are stored in element's data attributes. They are being updated correctly on the click events
I've uploaded a sample of the code onto Code Pen: [https://codepen.io/aGeekonaBike/pen/VwMQMea]
Could someone to take a look and let me know if my logic is leading down a dark path.

Related

JavaScript CSS transition problem - rotating a carousel 360 degrees with cards flipping

I have a carousel with cards that will hold content, viewed like you would view a book, I would like them to flip through the full array of cards, with the choice of going forwards and backwards.
The set up I have works if you continuously click on either the next or previous sections, if you click going the opposite way the cards will end up in the correct position, however the transitions are messed up.
Are you able to help me solve the transition issue?
I have attached a link to a CodePen
https://codepen.io/NPGB88/pen/GRxjJbq
enter code here

Cards loading animation on scroll: How to trigger animation on scroll without causing card elements to create infinitely?

I have a list of projects in an object, for which I create cards through JS so they're added dynamically to the DOM. I want to add an animated loading background on each card before they display their content, and this animation should only start once the user has scrolled past the Projects heading.
I have a createProjectCard(projects) function to create the card element for each project and then add the animated-bg class to them. So my first thought to try and trigger the animated-bg on scroll was to call window.addEventListener('scroll', () => {createProjectCard(projects)}).
Now, the animation is indeed triggered when desired, but the other effect of this is that once scrolling past the trigger line, the cards keep on being created over and over with each scroll under that line.
The reasoning I made so far:
The only way (that I see) to add the animated-bg class to the card is after the cards are created.
The cards can only be created within createProjectCard().
Because the animation should begin only when the user wants to check the projects, it means the cards (together with their animation) need to be created once we scroll past the project section heading on the page.
However, once past that trigger line, the condition in the if statement remains true, so the cards get created anew on each scroll below that trigger line.
Link to the pen: https://codepen.io/awelie_go/pen/XWemQwp
(To demonstrate the issue, it shows only 3 project cards, and as you can see once you scroll a bit down, they multiply on each scroll)
Does someone have any pointers as to how I should approach this?
NB: this needs to be in Vanilla Javascript only

How to make slider working on a cloned HTML-page?

I have cloned html page containing a slider by means of HTTrack tool. But it looks static and does not move. Actually this is a snapshot of the current state of the slider without the possibility to change its state despite all links to images are available. How can I make it working?

Jquery UI draggable positioning problem inside Reveal.js slide

My jquery draggable is working fine in a plane html page (where reveal.js is not present).
In my reveal js presentation I use embed=true [means I didn't use the full page for each slide. I used only a part of the full page for each slide].
Inside any Reveal js slide the draggable item is not moving with the cursor. It's only accurate when the cursor and draggable item is in it's beginning position. But when I pick draggable item and move cursor, the draggable item moves far from cursor.
Finally I found the bug after three days of panic. The jQuery draggable is fetching problem inside auto scaled elements. And the Reveal.js slides are auto scaled by default. I just put the bellow code inside Reveal.initialize. This solved my problem.
minScale: 1,
maxScale: 1,
By the way, after solving the draggable issue, now all my slides contents changed their sizes and positions. Now I need to fix them.
Happy coding :)

jQuery ResponsiveSlides - How to start Slider with last picture in <ul>

I am currently using responsiveSlides
as an image slider on our web page.
It is a jQuery slider using an HTML unsorted list of images to slide through (automatically in my case).
Now the Issue i am having is, that before the slider actually starts (meaning the script is loaded) there is the last picture in the unsorted list displayed, for a short moment. Then the slider starts his work with the first image in that list.
I tried using a minified version of the js-file, and load that script at the very beginning of my HTML markup. This actually shortened the display time of the last picture, but it is still noticeable and annoying. (This happens with every click on a navigation point, as the page is loading new...)
Also i experimented with timeout function (js) to display the unsorted list containing div after some miliseconds, or on document.ready state, etc..
But all of theses attempts where ugly.
So now i am at the point, where i try to understand how the whole slider script is working, and i assume there must be a point, where i can set to start with the last picture in my unsorted list, instead of starting with the first one, but i just can't find that point in the code.
I couldn't manage to post the code here with proper syntax highlighting, so you can find the code here
Any ideas are much appreciated!
As I see on their demo page, sliding happens because of changing z-index, so slides like a pie.
In you slider you may see the last slide while script is initializing because of already applied CSS, but not JS yet.
I'd suggest to add opacity: 0; in CSS to all your slides. When JS will be ready, it'll add opacity: 1; itself.

Categories

Resources