<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 ----------> <script src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> <div class="container"> <div class="row"> <h2>vertical News Ticker html plugins controls</h2> </div> <div class="row"><!-- Başlangıç --> <div class="row"> <div class="col-md-6"> <div class="card panel-default"> <div class="card-header"> <span class="glyphicon glyphicon-list-alt"></span><b>News</b></div> <div class="card-body"> <div class="row"> <div class="col-xs-12"> <ul class="demo1" style="overflow-y: hidden; height: 258px;"> <li style="display: list-item;" class="news-item"> <table cellpadding="4"> <tbody> <tr> <td><img src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/images/1.png" width="60" class="img-circle"></td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td> </tr> </tbody> </table> </li> <li style="display: list-item;" class="news-item"> <table cellpadding="4"> <tbody> <tr> <td><img src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/images/2.png" width="60" class="img-circle"></td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td> </tr> </tbody> </table> </li> <li style="display: list-item;" class="news-item"> <table cellpadding="4"> <tbody> <tr> <td><img src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/images/3.png" width="60" class="img-circle"></td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td> </tr> </tbody> </table> </li> <li style="display: none;" class="news-item"> <table cellpadding="4"> <tbody> <tr> <td><img src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/images/4.png" width="60" class="img-circle"></td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td> </tr> </tbody> </table> </li> <li style="display:none;" class="news-item"> <table cellpadding="4"> <tbody> <tr> <td><img src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/images/5.png" width="60" class="img-circle"></td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td> </tr> </tbody> </table> </li> <li style="display:none;" class="news-item"> <table cellpadding="4"> <tbody> <tr> <td><img src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/images/6.png" width="60" class="img-circle"></td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td> </tr> </tbody> </table> </li> <li style="display:none;" class="news-item"> <table cellpadding="4"> <tbody> <tr> <td><img src="https://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/images/7.png" width="60" class="img-circle"></td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in venenatis enim... <a href="#">Read more...</a></td> </tr> </tbody> </table> </li> </ul> </div> </div> </div> <div class="card-footer"> <ul class="pagination float-right" style="margin: 0px;"> <li class="page-item"><a href="#" class="page-link prev"><i class="fas fa-chevron-down"></i></a></li> <li class="page-item"><a href="#" class="page-link next"><i class="fas fa-chevron-up"></i></a></li> </ul> <div class="clearfix"></div> </div> </div> </div> </div> </div><!-- bitiş --> </div>

.fas { margin-right:4px !important; /*override*/ } .pagination .fas { margin-right:0px !important; /*override*/ } .pagination a { color:#fff; } .card ul { padding:0px; margin:0px; list-style:none; } .news-item { padding:4px 4px; margin:0px; border-bottom:1px dotted #555; }

$(".demo1").bootstrapNews({ newsPerPage: 3, autoplay: true, pauseOnHover:true, direction: 'up', newsTickerInterval: 3000, onToDo: function () { //console.log(this); } });