How to create text carousel-CodePudding

I want to create an horizontal carousel that has a phrase or several words scrolling end to end of the screen in a loop.

What I've tried is duplicating the phrase in two different divs, to avoid the gap in the animation (otherwise, the phrase goes almost away before it starts from the beginning and looks awful). The problem (even though I've tried to delay the 2nd animation by half the time of the first one for them not to overlap), depending on the device, the text still overlaps.

How can I create such cacrousel (with or without JS) making sure texts don't overlap?

CodePudding user response：

I've made an example, you could customize it as you want.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carousel</title>
</head>
<body>
    <div id="carousel" >
        <p>Personal</p>
    </div>
    <style>
        body{
            max-width: 100vw;
            max-height: 100vh;
            background-color: black;
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
        }
        p{
            margin: 10rem;
            font-size: 2rem;
            font-weight: 900;
            color: white;
        }
        #carousel{
            position: absolute;
            top: 50vh;
            left: 0%;
            animation: mover 5s infinite;
        }
        #carousel>*{
            display: inline-flex;
        }

        #carousel::before{
            color: white;
            content: 'YOUR TEXT';
        }
        
        #carousel::after{
            color: white;
            content: 'YOUR TEXT';
        }

        @keyframes mover {
            0%{
                position: absolute;
                top: 50vh;
                left: 0%;
            }
            100%{
                position: absolute;
                top: 50vh;
                left: 85%;
            }
        }
    </style>
</body>
</html>

CodePudding user response：

Use Bootstrap carousel, this is much easier and more flexible to work with: here is an example:

Update: The main reason I am telling you to use this, is you have so many ways to design your carousel with all features in Bootstrap, here I just created the simplest one, you can use Left or Right or Click to move to the next slide, also it automatically moves to next slide.

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/jquery-ui.min.css" rel="stylesheet">

    <script src="js/jquery-3.6.0.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>

    <title>Stack16</title>
</head>
<body>
<h1 >Hello, text carousel!</h1>


<div id="textCaro"  data-bs-ride="carousel">
    <div >
        <button type="button" data-bs-target="#textCaro" data-bs-slide-to="0"  aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#textCaro" data-bs-slide-to="1" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#textCaro" data-bs-slide-to="2" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#textCaro" data-bs-slide-to="3" aria-label="Slide 3"></button>
    </div>

    <div >

        <div  >
            <div >
                <h4 >Text 1</h4>
            </div>
        </div>

        <div  >
            <div >
                <h4 >Text 1</h4>
            </div>
        </div>

        <div  >
            <div >
                <h4 >This is a long text...............</h4>
            </div>
        </div>

        <div  >
            <div >
                <h4 >Text 1</h4>
            </div>
        </div>


    </div>
    <button  type="button" data-bs-target="#textCaro" data-bs-slide="prev">
        <span  aria-hidden="true"></span>
        <span >Previous</span>
    </button>
    <button  type="button" data-bs-target="#textCaro" data-bs-slide="next">
        <span  aria-hidden="true"></span>
        <span >Next</span>
    </button>
</div>

<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>


</body>
</html>

The final result: