jQuery vTicker - few elements at one moment

376 views Asked by At

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/

1

There are 1 answers

1
azs06 On BEST ANSWER

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.