The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

Question

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

In my case, I have two distinct pages: let's call them the first and second pages.

On the first page, I utilize an owl carousel slider with a tag that links to a specific slide on the second page's owl carousel slider using an ID. Meanwhile, on the second page, there are previous and next buttons that change names each time the user switches slides to guide them. Everything seems to work fine until the user navigates from the first page to the second one and attempts to click the previous button right away, which doesn't function correctly. However, if they click the next button first and then the previous one, it works as intended. Here are the relevant code snippets:

FIRST PAGE

<div class="owl-carousel home-page-project-design home-page-manufacturing-list">
        <a href="../project-design-showcase.php#walk-in-wardrobes">
            ...
            content goes here
            ...
        </a>
        ... more similar layout for other sections ...
    </div>

SECOND PAGE

<section class="next-and-previous-title-showcase">
        ...
        additional details displayed in this section can be found here
        ...
    </section>

    <div class="owl-carousel test3">
        ...
        include corresponding files for different carousel slides
        ...
    </div>

    <script>
        ...
        jQuery script inside this section controlling the functionality of the carousel
        ...
    </script>

javascript html jquery css owl-carousel

Answer 1

Answer №1

SOLUTION

<script>
$(document).ready(function() {
    var fragmentMap = {
        'custom-closets': 0,
        'living-rooms': 1,
        'dining-areas': 2,
        'home-offices': 3,
        'entertainment-centers': 4,
        'wine-cellars': 5,
        'patios': 6
    };

    var owl = $('.test3').owlCarousel({
        stagePadding: 10,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1280: {
                items: 1
            }
        },
        touchDrag: true,
        mouseDrag: false
    });

    function updateButtonLabels(currentItem) {
        $('.prev-button').text(prevButtonLabels[currentItem]);
        $('.next-button').text(nextButtonLabels[currentItem]);
    }

    var nextButtonLabels = [
        'Living Rooms',
        'Dining Areas',
        'Home Offices',
        'Entertainment Centers',
        'Wine Cellars',
        'Patios',
        ''
    ];

    var prevButtonLabels = [
        '',
        'Custom Closets',
        'Living Rooms',
        'Dining Areas',
        'Home Offices',
        'Entertainment Centers',
        'Wine Cellars'
    ];

    var currentItem = 0;

    // Get the fragment identifier from the URL
    var fragment = window.location.hash.substring(1);

    if (fragmentMap.hasOwnProperty(fragment)) {
        currentItem = fragmentMap[fragment];
    }

    // Initialize the Owl Carousel with the currentItem
    owl.trigger('to.owl.carousel', [currentItem, 0, true]);
    updateButtonLabels(currentItem);

    $('.prev-button').click(function() {
        if (currentItem > 0) {
            owl.trigger('prev.owl.carousel');
            currentItem--;
            updateButtonLabels(currentItem);
        }
    });

    $('.next-button').click(function() {
        if (currentItem < prevButtonLabels.length - 1) {
            owl.trigger('next.owl.carousel');
            currentItem++;
            updateButtonLabels(currentItem);
        }
    });
});
</script>

Answer 2

SOLUTION

<script>
$(document).ready(function() {
    var fragmentMap = {
        'custom-closets': 0,
        'living-rooms': 1,
        'dining-areas': 2,
        'home-offices': 3,
        'entertainment-centers': 4,
        'wine-cellars': 5,
        'patios': 6
    };

    var owl = $('.test3').owlCarousel({
        stagePadding: 10,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: 1
            },
            1280: {
                items: 1
            }
        },
        touchDrag: true,
        mouseDrag: false
    });

    function updateButtonLabels(currentItem) {
        $('.prev-button').text(prevButtonLabels[currentItem]);
        $('.next-button').text(nextButtonLabels[currentItem]);
    }

    var nextButtonLabels = [
        'Living Rooms',
        'Dining Areas',
        'Home Offices',
        'Entertainment Centers',
        'Wine Cellars',
        'Patios',
        ''
    ];

    var prevButtonLabels = [
        '',
        'Custom Closets',
        'Living Rooms',
        'Dining Areas',
        'Home Offices',
        'Entertainment Centers',
        'Wine Cellars'
    ];

    var currentItem = 0;

    // Get the fragment identifier from the URL
    var fragment = window.location.hash.substring(1);

    if (fragmentMap.hasOwnProperty(fragment)) {
        currentItem = fragmentMap[fragment];
    }

    // Initialize the Owl Carousel with the currentItem
    owl.trigger('to.owl.carousel', [currentItem, 0, true]);
    updateButtonLabels(currentItem);

    $('.prev-button').click(function() {
        if (currentItem > 0) {
            owl.trigger('prev.owl.carousel');
            currentItem--;
            updateButtonLabels(currentItem);
        }
    });

    $('.next-button').click(function() {
        if (currentItem < prevButtonLabels.length - 1) {
            owl.trigger('next.owl.carousel');
            currentItem++;
            updateButtonLabels(currentItem);
        }
    });
});
</script>

The previous button on Owl Carousel seems to be malfunctioning after navigating from a different page

Answer №1

Similar questions

In the realm of asp.net mvc, JSON remains a mysterious and undefined

Is it possible to load asynchronous JS and then execute functions?

Efficient State Management with React-Redux for Streamlined HTTP Requests

Encountered an error while trying to download a PDF document in React

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

AJAX Image Upload: How to Transfer File Name to Server?

Is it possible to perform a legitimate POST request using AJAX XMLHttpRequest, rather than the traditional var=val URL type post?

The meaning gets blurred when using 'this' in a prototype method

What can be done to address the problem of background-image opacity making text difficult to read?

Update the URL of the entire window by changing the link within the frame

Leveraging API data within React: A step-by-step guide

Showing data from the POST request in a dialog box

The function this.someFunction does not exist

The essential guide to creating a top-notch design system with Material UI

Uncaught jQuery onchange event not firing

Stop the form submission from redirecting or refreshing by utilizing JavaScript

What is the best method for returning the AJAX outcome to the JSP page?

What is the method for applying a stroke-width:1 to specific sides of SVG shapes?

The table does not recognize any of the CSS classes when the TAG is inputted inside

Enhancing CSS and HTML: Increasing the Border Color of Dropdown Menus and Utilizing Multiple Words per Dropdown Item