JS

※768px以下で動きを解除しているため、スマートフォンからの確認は出来ません。
 

HTMLの書き方

head終了タグ直前にbxSlider のCSSと自作のCSSの2つを読み込みます。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css">
<link rel="stylesheet" type="text/css" href="css/9-4-1.css">

body内のニュースティッカーを表示させたい場所に以下のHTMLを記載します。

<ul class="slider">
	<li><a href="#"><span>2021.11.01</span>1 つめのニュースの記事です。</a></li>
	<li><a href="#"><span>2021.11.02</span>2 つめのニュースの記事です。</a></li>
	<li><a href="#"><span>2021.11.03</span>3 つめのニュースの記事です。</a></li>
</ul>

body 終了タグ直前に jQuery、bxSlider、動きを制御する自作のJS の3 つを読み込みます。
また、IE11 に対応したい場合はIE対策用のJSを追加で2 つ読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<!--自作のJS-->
<script src="js/9-4-1.js"></script>

CSSの書き方

/*ニュース1行の周りの余白*/
.slider a{
	display: block;
	background:#fff;
	padding:20px;
}

/*日付*/
.slider span {
	display:inline-block;
	font-size:0.8rem;
	margin-right:10px;
	color:#777;
}

/*768px以下の見た目 ※1行のままにしたい場合は不要　*/
@media screen and (max-width:768px) {
	.slider {
		padding:20px;
		background:#fff;
	}

	.slider li {
		border-bottom:1px dashed #ccc;
	}

	.slider li:last-child {
		border-bottom:none;
	}

	.slider span {
		display:block;
		padding-bottom:10px;
	}
}

JSの書き方

var slider;
var sliderFlag = false;
var breakpoint = 768;//768px以下の場合
  
function sliderSet() {
	var windowWidth = window.innerWidth;
	if (windowWidth >= breakpoint && !sliderFlag) {//768px以上は1行でスライダー表示
		slider = $('.slider').bxSlider({
			touchEnabled:false,//リンクを有効にするためスライドをマウスでドラッグした際にスライドの切り替えを可能にする機能を無効化
			mode: 'vertical',//縦スライド指定
			controls: false,//前後のコントロールを表示させない。
			auto: 'true',//自動的にスライド
			pager: false//ページ送り無効化
		});
		sliderFlag = true;
	} else if (windowWidth < breakpoint && sliderFlag) {
		slider.destroySlider();//bxSliderのOptionであるdestroySliderを使用してスライダーの動きを除去
		sliderFlag = false;
	}
}

$(window).on('load resize', function() {
	sliderSet();
});

タブレット以下も1行で表示させたい場合は下記のみの記述でOK

$('.slider').bxSlider({
	touchEnabled:false,//リンクを有効にするためスライドをマウスでドラッグした際にスライドの切り替えを可能にする機能を無効化
	mode: 'vertical',
	controls: false,
	auto: 'true',
	pager: false
});