Having trouble getting CSS absolute and relative positioning to work with my div slider carousel

I'm currently working on creating a slider carousel using VUE, where the CSS classes (3 divs) are looped through. However, I am facing an issue where every time a div fades out, the next slider creates a duplicate slider at the bottom, resulting in two sliders running simultaneously.

Check out this example of the problem

Whenever I try to use the relative and absolute properties, my divs end up disappearing completely. I'm struggling to find a solution.

<template>
    <h1 class="text-center">SLIDER APP</h1>
    <div>
        <div v-for="(color, index) in slider" :key="color">
            <transition name="fade">
                <div v-if="currentslide == index" :class="color"></div>
            </transition>
        </div>
    </div>
    
</template>

<script>
export default {
    data(){
        return {
            currentslide:0,
            intervals:'',
            slider:['first-slider', 'second-slider', 'third-slider'],
            isshowing:true,
        }
    },
    mounted(){
        this.intervals = setInterval(() => {
            console.log('This is slide', this.currentslide)
            this.currentslide = this.currentslide == 2 ? 0:this.currentslide+1;
        }, 2000);
    },
    beforeUnmount(){
        clearInterval(this.intervals)
    }
}
</script>

<style>

.first-slider {
    background: blue;
    height: 350px;
}

.second-slider {
    background: red;
    height: 350px;
}

.third-slider {
    background: orange;
    height: 350px;
}

.fade-enter-active, .fade-leave-active {
    transition: all 0.5s ease;
}

.fade-enter-from, .fade-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

</style>

Answer №1

Avoid reliance on absolute or relative positioning; opt for using display flex within a parent div for optimal positioning outcomes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to hide an HTML form completely?

Is there a way to quickly hide an HTML form from a webpage once the submit button is clicked and replace it with the result of a .php file in the most efficient manner possible, with minimal code? ...

Send the express() app variable between files

Hey everyone, I understand there are many similar posts here, but unfortunately I'm still struggling with my issue. Within my server.js file, I have defined my app variable and implemented some configuration: var app = express(); ... In another fil ...

Transmit an Array using Ajax and retrieve it on an ASP Classic page

I am facing a challenge where I need to pass an array using AJAX on an ASP page. After trying to send it as GET method and checking the data being received, I noticed that only the LAST record of the array is being processed by ASP. How can I successfu ...

Using Leaflet JS to implement multiple waypoints on a map

I am trying to create a route with multiple waypoints without hardcoding any data. My waypoints array should dynamically include latitude and longitude values. How can I achieve this? var data = [ { "title": 'Chennai', " ...

A guide on accessing objects from an array in Vue.js

Wondering how to choose an object from an array in Vue.js: When the page loads, the selectTitle() function is triggered. I simply want to select a specific object (for example, i=2) from my 'titleList' array. However, at the moment, I am only re ...

Is it possible to conceal the text specifically inside a textarea, rather than just hiding the entire textarea itself?

Is it possible to have a button next to the textarea that allows you to hide and unhide the text inside the textarea by clicking on it? ...

Tips for receiving live updates of active users online with the help of Mongoose and socket.io

I have been working on developing an app that covers various topics. Each topic has online users, and I am using express/socket.io/mongoose for the backend and flutter for the frontend. Currently, I am facing a challenge in displaying real-time informatio ...

Struggling to get getInitialProps working in dynamic routes with Next.js?

I am encountering an issue. The return value from the getInitialProps function is not being passed to the parent component. However, when I console.log the values inside the getInitialProps function, they appear to be correct. Here is the code snippet: i ...

Tips for sending JSON data to the line chart function

Creating a line chart using Highcharts involves retrieving values from a database and passing those values to the line chart. Here is an example: //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun ...

Can you explain the purpose of $winstonLoggerConfig<T>() and $winstonLogger<T>() in winston v3?

I'm currently using the winston logger and I want to implement flow typing for it. However, I am unsure of what exactly I should pass to it in order to achieve this. Below is my current logger setup: const logger = createLogger({ ... }); Missing typ ...

Styling the checked state of a switch in NativeScript/Angular with ngModel/FormBuilder

Let's explore the styling of a switch element within Angular: <Switch class="switch" formControlName="answer"></Switch> One approach involves targeting the switch with checked attribute, setting its background-color and text color accord ...

The Google Pie chart is displaying outside of the designated div area when placed inside a dropdown menu

Encountering an issue with my pie chart rendering outside of its parent div when placed within a dropdown menu. The chart successfully loads after the page is loaded, but only displays correctly if I hover over the dropdown and allow it to load. If I do ...

What is the best way to position an image in the center of the screen with uniform margins around it?

Could someone please help me figure this out? I've been attempting for some time but can't seem to make it work with the bottom margin. This website in the fashion industry showcases what I'm trying to achieve: It's designed to be resp ...

Issue with `npm run generate` command in Nuxt.js causing failure to create `index.html` file

Why is it that all static routes and dynamic routes are generated except for index.html? My nuxt-config.js file contains the following: const staticRoutes = [ '/about', '/contact', '/portfolio' ] const dynamic ...

How can I use Jquery to loop through each combobox on the page and delete those with a specific class name?

I am currently dealing with a page that contains multiple combo-boxes. Each combo-box has a default option set as empty, which is given the class name 'hide'. This functionality seems to work perfectly in Chrome and Firefox, as the hidden options ...

Are you struggling with perplexing TypeScript error messages caused by a hyphen in the package name?

After creating a JavaScript/TypeScript library, my goal is for it to function as: A global variable when called from either JavaScript or TypeScript Accessible via RequireJS when called from either JavaScript or TypeScript Complete unit test coverage Th ...

Shorten a value within an array of objects using JavaScript

How can I truncate a value in an array of objects based on specific criteria? Let's use the following example: var items = [ { name: "CN=arun, hjsdhjashdj,jsdhjsa,kshd", status: "Present" }, { name: "CN=manohar, abcdefghij,111111,2222222", s ...

The <a> tag does not have the clickability feature

My personal website doesn't allow me to click on the links that I have added for web pages. Here is the CSS code I am using: @font-face { font-family: typewrite; src: url(fonts/typewcond_regular.otf); } @font-face { font-family: typewrite; sr ...

Switch up the styling of a component by updating its properties with a switch statement

Although there is a similar question, my query has a unique requirement. I have defined the common styles for my button and implemented a function using a switch statement with different properties for various buttons across different pages. However, for ...

Battle between Comet and Ajax polling

I'm looking to develop a chat similar to Facebook's chat feature. Using Comet would require more memory to maintain the connection. There seems to be a latency issue when using Ajax polling if requests are sent every 3-4 seconds. Considering t ...