Ticker does not continue...and is too small...

[liekecomp2022]

Hello,

I have made a ticker at https://ontwikkel16.comp-it-aut.nl/ in SP Page builder.
The pictures don't continue and the pictures should be higher like the ticker at: https://frankiacamperclubnederland.nl/.

Can someone help me with the correct code?

In the PAGE CSS:

Code: Select all

  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lichtkrant</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            color: yellow;
            font-size: 30px;
            white-space: nowrap;
            background-color: black; /* Aanzicht verbeteren met een donkere achtergrond */
        }
        #lichtkrant 
{
    display: inline-flex; 
    overflow: hidden; 
    animation: scroll 20s linear infinite; 
    
 /* Standaard animatiestatus */
}

#lichtkrant:hover 
{
    animation-play-state: paused; /* Pauzeer animatie bij hover */
}
        @keyframes scroll {
            0% {
                transform: translateX(0); /* Startpositie */
            }
            100% {
                transform: translateX(-100%); /* Eindpositie */
            }
        }
        .lichtkrant_img {
            width:  auto;
            height: 200px;
animation-play-state: running;
object-fit: contain; /* zorgt ervoor dat de gehele afbeelding zichtbaar is terwijl de verhouding behouden blijft */
            margin-right: 20px; /* Ruimte tussen de afbeeldingen */
        }
    </style>

At the page:

<p>
<title>Lichtkrant</title>
</p>
<div id="lichtkrant">
<p>&nbsp;</p>
<a href="https://www.campercoating.eu/" target="_blank" rel="noopener"><img class="lichtkrant_img" src="/images/lichtkrant/campercoating-groen-vlak.png" alt="campercoating groen vlak" /></a> <a href="https://www.e-boekhouden.nl/" target="_blank" rel="noopener"><img class="lichtkrant_img" src="/images/lichtkrant/eboekhouden-banner.jpg" alt="Eboekouden banner" /></a> <a href="https://frankiacamperclubnederland.nl/" target="_blank" rel="noopener"><img class="lichtkrant_img" src="/images/lichtkrant/Frankia_camper_club.png" alt="Frankia camper club" /></a> <a href="https://www.comp-it-aut.nl/" target="_blank" rel="noopener"><img class="lichtkrant_img" src="/images/lichtkrant/logo-compitaut.png" alt="Logo Compitaut" /></a> <a href="https://www.dropbox.com/scl/fi/bsllm0hepov367uufd28k/Frankia-Camper-club-Nederland.docx?rlkey=nau7bw6quzbbysmhe3kpa6298&amp;e=1&amp;dl=0" target="_blank" rel="noopener"><img class="lichtkrant_img" src="/images/lichtkrant/Logo-Seminautic.png" alt="Logo Seminautic" /></a> <a href="https://www.raemacaravans.nl/" target="_blank" rel="noopener"><img class="lichtkrant_img" src="/images/lichtkrant/Raema-logo.jpg" alt="Raema logo" /></a> </div>

[liekecomp2022]

The pictures in the ticker should appear after each other. And the pictures should be larger.
Can someone help me with the correct code in Joomla?
Outside Joomla the code works fine..
Is this because of the CSS in Joomla itself?

[liekecomp2022]

I fixed the hight of the ticker at https://ontwikkel16.comp-it-aut.nl/. However the pictures are not shown the whole time during the ticker, see attachment.
Can someone help me with the correct code?
Outside the Joomla website it works fine, see: https://ontwikkel16.comp-it-aut.nl/recl ... krant.html.
However when using the html in the SP Page builder Welkom page and putting the css code at the page css the pictures dissappear half way.
Is should work like the ticker at https://frankiacamperclubnederland.nl/.

The DJ image slider does not provide the ticker functionality..

[liekecomp2022]

The ticker I have made at https://ontwikkel16.comp-it-aut.nl/ does not continue with all the images after each other.
The images dissappear in the middle and show up later.
The ticker should be like the ticker at https://frankiacamperclubnederland.nl/

I have added CSS code at the Welkom page and put the ticker HTML code in the text area at the Welkom page.

It works fine when I have the ticker code outside Joomla like: https://ontwikkel16.comp-it-aut.nl/recl ... krant.html.

How can I fix this with the CSS?

[Nidzo2203]

Did you try this alternative
viewtopic.php?f=844&t=1013199&p=3735598#p3735348

[liekecomp2022]

I want the one I made working.
Can someone help me with the correct CSS code?

[pe7er]

Mod note: Topics merged. Please do not open new topics for the same problem.

[liekecomp2022]

I want to use my own code.
What should the css be so you see the pictures continuously? At https://ontwikkel16.comp-it-aut.nl/
Just like at:https://frankiacamperclubnederland.nl/
Can someone help me?