Bootstrap Snippet vertical News Ticker html plugins controls using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
$(".demo1").bootstrapNews({
            newsPerPage: 3,
            autoplay: true,
            pauseOnHover:true,
            direction: 'up',
            newsTickerInterval: 3000,
            onToDo: function () {
                //console.log(this);
            }
        });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"vertical News Ticker html plugins controls"
Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"vertical News Ticker html plugins controls" Bootstrap 4.1.1 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"vertical News Ticker html plugins controls"
Bootstrap 4.1.1 Snippet by muhittinbudak