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

Search through array elements that are nested deeply

Creating a Discord Bot: Building an Embed Table/List with Segmented Sections

Event follows activation of trigger click

What is the process for retrieving a JavaScript script generated by PHP through AJAX and executing the script successfully?

Security Error when using the JavaScript map function in FireFox

Utilizing Material UI tabs panel with customized CSS styling

How to update data in AngularJS grid component using ng-bind directive

To ensure proper display, the canvas should be set to display block when its width is 100vw and height is 100vh

Issues with Django Posts Functionality:

Retrieving JavaScript array data following a page reload

How can you ensure that the right data types are sent through ajax requests?

Display images in a list with a gradual fade effect as they load in Vue.js

Looping through an array of JSON objects in Javascript results in finding instances, however, the process records them

How can I efficiently generate a table using Vue js and Element UI?

Difficulty with conflicting styles when dynamically loading components in Nuxt3

Expanding Material Ui menu to occupy the entire width of the page

Encountering an issue with extending the MUI color palette, receiving a "reading 'dark'" error due to properties of undefined

Managing global errors and intercepting requests in AngularJS can be easily achieved by utilizing $resource interceptors and global handlers for

What is the best way to incorporate buttons that trigger PHP scripts within a MySQL database?

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP