<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/css/newsTicker.css">
<script src="https://www.jqueryscript.net/demo/Flexible-jQuery-Vertical-News-Ticker-Plugin-Advanced-News-Ticker/js/newsTicker.js"></script>
<div class="container">
<div class="row">
<h2>vertical News Ticker html plugins controls</h2>
</div>
<div class="row"><!-- Başlangıç -->
<div id="oneliner">
<div class="header"> Breaking News </div>
<ul class="newsticker" style="height: 44px; overflow: hidden;">
<li style="margin-top: 0px;">Morbi sodales tellus sit amet leo congue bibendum. Ut non mauris eu neque fermentum pharetra.</li><li style="margin-top: 0px;">In pharetra suscipit orci sed viverra. Praesent at sollicitudin tortor, id sagittis magna. Fusce massa sem, bibendum id.</li><li style="margin-top: 0px;">Maecenas nec ligula sed est suscipit aliquet sed eget ipsum. Suspendisse id auctor nibh. Ut porttitor volutpat augue, non sodales odio dignissi id.</li><li style="margin-top: 0px;">Onec bibendum consectetur diam, nec euismod urna venenatis eget. Cras consequat convallis leo.</li><li style="margin-top: 0px;">Etiam imperdiet volutpat libero eu tristique. Aenean eget nulla euismod, rutrum felis in, consequat diam.</li><li style="margin-top: 0px;">Curabitur porttitor ante eget hendrerit adipiscing. Maecenas at magna accumsan, rhoncus neque id, fringilla dolor.</li><li style="margin-top: 0px;">Praesent ornare nisl lorem, ut condimentum lectus gravida ut. Ut velit nunc, vehicula volutpat laoreet vel, consequat eu mauris.</li><li style="margin-top: 0px;">Nunc ultrices tortor eu massa placerat posuere. Vivamus viverra sagittis nunc. Nunc et imperdiet magna. Mauris sed eros nulla.</li></ul>
</div>
</div><!-- bitiş -->
</div>
var multilines = $('#multilines .newsticker').newsTicker({
row_height: 78,
speed: 800,
prevButton: $('#multilines .prev-button'),
nextButton: $('#multilines .next-button'),
stopButton: $('#multilines .stop-button'),
startButton: $('#multilines .start-button'),
});
var oneliner = $('#oneliner .newsticker').newsTicker({
row_height: 44,
max_rows: 1,
time: 2000,
nextButton: $('#oneliner .header')
});
// Pause newsTicker on .header hover
$('#oneliner .header').hover(function() {
oneliner.newsTicker('pause');
}, function() {
oneliner.newsTicker('unpause');
});
