Search code examples
javascriptjquerytickervticker

jQuery vTicker - few elements at one moment


I have little problem with jQuery vTicker script. For now the script is sliding up or down only one element at time. I need that script to slide a few elements up at one moment but I dont know if that is possible (for example: I have four elements visible and on the next slide script replaces my all four elements, not only one) . Do u can help me?

My code:

<div id="najnowsze-naglowki">
                <ul class="najnowsze">
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                    <li><span class="time">14:38</span>Uwaga! Silny wiatr!</li>
                </ul>
            </div>

And initialization of jQuery vTicker script:

    $('#najnowsze-naglowki').vTicker('init', {speed: 400, 
        pause: 1000,
        showItems: 4,
        padding:15});

Link to vTicker script: http://richhollis.github.io/vticker/


Solution

  • Not actually a straight forward solution to your problem, but with changing markup you could achieve this

           $('#najnowsze-naglowki').vTicker('init', {speed: 400, 
            pause: 1000,
            showItems: 1,
            padding:15});
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <div id="najnowsze-naglowki">
                    <ul class="najnowsze">
                        <li>
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li>
                                <li>4</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>5</li>
                                <li>6</li>
                                <li>7</li>
                                <li>8</li>
                            </ul>
                        </li>
                    </ul>
                </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="http://richhollis.github.io/vticker/downloads/jquery.vticker.min.js?v=1.21"></script>
    
    </body>
    </html>

    I have checked vTicker documentation, and I couldn't find an option to change 4 items at a time.