Help with my Javascript #145017

A33ie · 2024-11-19T11:31:06Z

A33ie
Nov 19, 2024

Body

Hi, I'm not sure if this is the right place to ask but I'm desperate and I have been trying to solve this issue for 3 days and I am unfortunatly not getting anywhere. Currently I have the basic JavaScript on a gist but in my VSC is where I have been using trail and error.
I want the buttons to act as a previous and next but when I add a set function it still doesn't work. Can anyone help me please as this is a crucial part of the design and one of the last things to finish :) https://gist.github.com/A33ie/6e61ebd1051470de2bac90cd33045dbe

Guidelines

I have read and understood this category's guidelines before making this post.

mastertanzeel · 2024-11-19T18:01:50Z

mastertanzeel
Nov 19, 2024

Hi @A33ie,

There are some issues in your js and HTML. I have updated, check it out. Lemme know if you still need any help :)

updated code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Expanding</title>
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"> </script>
<style>
    /* your CSS style */
</style>
</head>
<body>

<div class="expanding">
    <div class="indicator"></div>

    <div id="demo"></div>
    
    <div class="card" id="card">
        <div class="details">
            <div class="place-box">
                <div class="text" id="place"></div>
            </div>
            <div class="title-box-1"><div class="title-1" id="title"></div></div>
            <div class="title-box-2"><div class="title-2" id="price"></div></div>
        
            <div class="desc" id="description"></div>
            <div class="cta">
                <button class="discover" href="#">BOOK NOW</button>
            </div>
        </div>
    </div>

    <div class="pagination" id="pagination">
        <button class="previous arrow arrow-left" onclick="prevCard()">Previous</button>
        <button class="next arrow arrow-right" onclick="nextCard()">Next</button>
        <div class="progress-sub-container" >
            <div class="progress-sub-background" >
                <div class="progress-sub-foreground" ></div>
            </div>
        </div>
        <div class="slide-numbers" id="slide-numbers"></div>
    </div>
</div>

<script>
    const data = [
        {
            place:'paintballing packages',
            title:'Commando',
            title2:'£30',
            description:'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
            image:'https://rednalcombatltd.wpcomstaging.com/wp-content/uploads/2024/11/DSC_4742.jpg'
        },
        {
            place:'paintballing packages',
            title:'Desert Storm',
            title2:'£38',
            description:'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
            image:'https://rednalcombatltd.wpcomstaging.com/wp-content/uploads/2024/11/438706688_940363681425594_763346074187593378_n.jpg'
        },
        {
            place:'paintballing packages',
            title:'Ultimate Combat',
            title2:'£55',
            description:'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
            image:'https://rednalcombatltd.wpcomstaging.com/wp-content/uploads/2024/11/ultimate.png'
        },
    ];

    let currentIndex = 0;

    const updateCard = () => {
        const card = data[currentIndex];
        document.getElementById('place').textContent = card.place;
        document.getElementById('title').textContent = card.title;
        document.getElementById('price').textContent = card.title2;
        document.getElementById('description').textContent = card.description;
    };

    const nextCard = () => {
        if (currentIndex < data.length - 1) {
            currentIndex++;
        } else {
            currentIndex = 0; // Loop back to the first card
        }
        updateCard();
    };

    const prevCard = () => {
        if (currentIndex > 0) {
            currentIndex--;
        } else {
            currentIndex = data.length - 1; // Loop to the last card
        }
        updateCard();
    };

    // Initialize the first card
    updateCard();
</script>

</body>
</html>

1 reply

A33ie Nov 20, 2024
Author

Thank you so much and apologies if I am being silly but is this the full code apart from the CSS? As it is not working

I have also tried integrating it with my original code but still the same result

denis23x · 2024-11-21T16:19:26Z

denis23x
Nov 21, 2024

Hi @A33ie check this out https://gist.github.com/denis23x/4328e4fbd1fe6326b29ad5e1806a22c1

I made pagination by arrows and by cards, but.. now there is another problem 😄

The animation didn't initially have pagination in mind, for example changing the card from 0 to 2 (not sequentially), will break the animation, also when changing the active card you need to reset the timer and animation state.

I can't help you anymore, I don't have the competence in GSAP animations, I hope everything works out for you.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Help with my Javascript #145017

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 1 reply

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

GitHub Community

Help with my Javascript #145017

A33ie Nov 19, 2024

Body

Guidelines

Replies: 2 comments · 1 reply

mastertanzeel Nov 19, 2024

A33ie Nov 20, 2024 Author

denis23x Nov 21, 2024

A33ie
Nov 19, 2024

Replies: 2 comments 1 reply

mastertanzeel
Nov 19, 2024

A33ie Nov 20, 2024
Author

denis23x
Nov 21, 2024