How to create text carousel

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? https://tucuerpofit.com/testcarousel/

enter image description here

2 answers

  • answered 2022-03-20 10:55 AwatITWork

    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 class="text-center">Hello, text carousel!</h1>
    
    
    <div id="textCaro" class="carousel slide mt-1 mb-1" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#textCaro" data-bs-slide-to="0" class="active" 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 class="carousel-inner mb-3 mt-3">
    
            <div class="carousel-item active" >
                <div class="card-header">
                    <h4 class="text-center">Text 1</h4>
                </div>
            </div>
    
            <div class="carousel-item" >
                <div class="card-header">
                    <h4 class="text-center">Text 1</h4>
                </div>
            </div>
    
            <div class="carousel-item" >
                <div class="card-header">
                    <h4 class="text-center">This is a long text...............</h4>
                </div>
            </div>
    
            <div class="carousel-item" >
                <div class="card-header">
                    <h4 class="text-center">Text 1</h4>
                </div>
            </div>
    
    
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#textCaro" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#textCaro" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>
    
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
    
    </body>
    </html>
    

    The final result:

    Result Image01

    Result Image02

  • answered 2022-03-20 10:59 Leonardo

    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>
    

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum