jQueryプラグインでスライドを作る
【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
クロム
jquery-3.7.1.min.js CDN及び 1.13.3/jquery-ui.min.js
参照サイト:slickでスライダー実装
【スライダーのデザイン】
jQueryプラグイン「slick」を使ってスライダーを作ってみる
・スライダーは3枚の写真を自動でスクロールする事
【slickを選ぶ】
https://kenwheeler.github.io/slick/のHPを開く
これをスクロールして、自分の作りたいタイプのものを選ぶ。
また、詳細を知りたい場合は「usage」をクリックすると、ジャンプ出来る。
手順1
HTMLのマークアップ(構造)を確認する
head部へ、2つのcssを読み込む
body部へ、slick.jsを読み込む
slickコードの見本
最後は、HTMLの見本コード
ただし、実際のプログラムは実際の環境に合わせないと、動かない
【 jsDelivr CDN!】
【コードを実装する】
・フォルダー
・index.htmlファイル
続
・style.cssファイル
@charset "utf-8";
/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, article,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article, aside, dialog, figure, footer, header,
hgroup, nav, article {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/* End Reset CSS */
html {
color: #54514c;
font-size: 10px;
}
body {
"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
header {
z-index: 100;
position: fixed;
width: 100%;
height: 60px;
background-color: #8fc3f3;
}
.center {
display: block;
margin: 30px auto;
text-align: center;
font-size: 20px;
}
#key_visual {
width: 100%;
max-width: 1500px;
padding-top: 60px;
margin: 0 auto;
}
#key_visual img {
width: 100%;
vertical-align: bottom;
}
footer {
text-align: center;
}
footer p {
text-align: center;
}
footer p small {
font-size: 18px;
line-height: 3em;
}
/*メディアクエリ*/
@media (min-width: 768px) {
html {
font-size: 12px;
}
header {
height: 80px;
}
header h1 {
top: 24px;
left: 25px;
}
header .logo img {
width: 250px;
}
header nav {
display: inline-block;
position: absolute;
top: 22px;
right: 0;
width: auto;
height: auto;
margin-right: 15px;
font-size: 1.4rem;
opacity: 1;
}
header nav ul {
position: relative;
top: 0;
left: 0;
transform: unset;
}
header nav ul li {
display: inline-block;
height: 35px;
border-radius: 2px;
line-height: 35px;
}
header nav ul li a {
display: block;
padding: 0 15px;
color: #9c9b98;
font-size: unset;
text-decoration: none;
transition: color .3s;
}
header nav ul li:hover {
background-color: #b99566;
}
header nav ul li:hover a {
color: #fff;
}
#drawer_toggle {
display: none;
}
#key_visual {
padding-top: 80px;
margin-bottom: 30px;
}
main {
padding-bottom: 50px;
}
main h2 {
padding-left: 20px;
}
#information {
margin-bottom: 50px;
}
#information ul {
font-size: 1.2rem;
}
#information ul li time {
display: inline-block;
padding-right: 10px;
}
#information ul li p {
display: inline-block;
line-height: 1;
}
#information ul li p::before {
margin-right: 10px;
vertical-align: middle;
}
#gourmet .container {
justify-content: space-between;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
}
#gourmet article {
width: calc(50% - 5px);
padding: 0;
}
footer ul li {
display: inline-block;
width: 120px;
margin: 0 10px;
}
footer ul li a {
color: #fff;
}
footer .logo {
margin: 20px 0 5px;
}
footer .logo img {
width: 200px;
}
}
@media (min-width: 1000px) {
main {
width: 1000px;
margin: 0 auto;
}
#gourmet .container {
padding: 10px 0;
}
#gourmet article {
width: calc(50% - 5px);
}
}
/*スライダー設定*/
.slider {
visibility: hidden;
}
.slider.slick-initialized {
visibility: visible;
}
.slick-prev, .slick-next {
z-index: 1;
}
.slick-prev {
left: 10px;
}
.slick-next {
right: 10px;
}
・main.js$(function(){
// $('.your-class').slick({
// setting-name: setting-value
// });
$(".slider").slick({
arrows: false,
dots: true,
autoplay: true
});
});
※コメント投稿者のブログIDはブログ作成者のみに通知されます