2017-12-06 2 views
1

Beispiel: https://github.com/bingcool/ionic-banner-tips, Bitte öffnen Sie den Link und überprüfen, ich möchte es wie oben auf dem Bildschirm, dass gelber Text kann automatische horizontale Scroll-und Loop.ionic3 - Text automatisch abspielen (horizontal und und loop)

enter image description here

Edit:

<ion-slides autoplay="1" loop="true" speed="3000"> 
    <ion-slide>This is the loop text</ion-slide> 
    </ion-slides> 

Das ist mein Projekt ist, möchte ich meine ionic3 Projekt wie dieses Beispiel gleiche die gelbe. Und mache den Text in einer Zeile. enter image description here

+0

Ihr Git Link scheint "Ionic 1" nein? – Sampath

+0

Das bin ich nicht .., dass man ionic1 Projekt Plugin .. aber ich will gleiche Funktion in ionci3 .. Ich denke, „Ion-Folien“ dieses Problem gelöst, kann –

+0

@Sampath bitte meinen Code überprüfen Sie bitte –

Antwort

1

Schließlich Problem gelöst

html-Datei enter image description here

SCSS Datei

.a { 
    position: absolute; 
    width: 100%; 
    height: 50px; 
    background-color: pink; 
    overflow: hidden; 
} 
.b { 
    position: absolute; 
    width: 1440px; 
    height: 100%; 
} 
.b p { 
    // width: 480px; 
    // height: 100%; 
    margin-left: 400px; 
    float: left; 
} 
.play { 
    animation: ma 10s 3s infinite linear; 
} 
@keyframes ma { 
    0% { 
     margin-left: 0px; 
    } 
    100% { 
     margin-left: -1200px; 
    } 
} 
.play:hover { 
    animation-play-state: paused; 
} 

Abschlussprojekt Screenshot enter image description here

Verwandte Themen