<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.css">
<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.14/jquery.bxslider.min.js">
</script>
<style>@charset "utf-8";
/*==================================================
ニュースティッカーのためのcss
===================================*/
/*ニュース1行の周りの余白*/
.slider a {
display: block;
background: #fff;
padding: 20px;
}
/*日付*/
.slider span {
display: inline-block;
font-size: 0.8rem;
margin-right: 10px;
color: #777;
}
/* 320px以下の見た目 */
@media screen and (max-width: 320px) {
.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;
}
}
/*========= レイアウトのためのCSS ===============*/
body {
width: 100%;
height: 100vh;
vertical-align: middle;
padding: 25vh 0;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: linear-gradient(
109.6deg,
rgba(253, 199, 141, 1) 11.3%,
rgba(249, 143, 253, 1) 100.2%
);
}
li {
list-style-type: none;
}
.wrapper {
width: 90%;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 1.5rem;
margin: 5px 0;
color: #fff;
text-shadow: 1px 1px 2px #333;
}
h2 {
position: relative;
display: block;
text-align: center;
background: linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114));
color: #fff;
text-shadow: 1px 1px 2px #333;
font-weight: bold;
padding: 5px 10px 5px;
font-size: 17px;
vertical-align: middle;
}
a {
color: #333;
text-decoration: none;
}
p {
text-align: center;
margin: 0 0 30px 0;
color: #fff;
text-shadow: 1px 1px 2px #333;
}</style>
</head>
<body>
<body>
<div class="wrapper">
<h2>2021年の注目の発言</h2>
<ul class="slider">
<li>
<a href="#">
<span>2021.01</span>最終的には生活保護がある <strong>byガ〜ス〜</strong>
</a>
</li>
<li>
<a href="#">
<span>2021.04</span>東京来ないで <strong>by緑のたぬき</strong>
</a>
</li>
<li>
<a href="#">
<span>2021.06</span>バブル方式 <strong>byぼったくり男爵</strong>
</a>
</li>
<li>
<a href="#">
<span>2021.08</span>買い物は3日に1回程度に <strong>by緑のたぬき</strong>
</a>
</li>
</ul>
<p>使用したライブラリ：<a href="https://bxslider.com/" target="_blank">https://bxslider.com/</a>
</p>
</div>
<!--/wrapper-->
<script>var slider;
var sliderFlag = false;
var breakpoint = 320; //320px以下の場合
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();
});
//# sourceURL=pen.js</script>
</body>
</html>