スリックナビの使い方、修正

スリックナビの使い方

スリックナビの使い方。

・ダウンロードする

・設置する

・調節する

 

 

.slick01 img{
max-width: 100%;/*ここが原因だった*/
}

 

max-width:を設定しないと、1枚の画像に、なぜか写真が並んでしまうバグが発生する。

大本のクラスを作り、画像に対して設定することで治ります。

 

ソースコードを記事の中に入れる

CodePenを利用するとよい・・・プレビューも表示できる

Githubで利用できるGist・・・ソースコードのみ

https://design-plus1.com/tcd-w/2018/07/sourcecode-write.html

 

 

ソースコードの解説

$('.slider').slick({
// 矢印キーでスライドを切り替えるか [初期値:true]
accessibility: true,
// スライドの高さが違うときに自動調整するか [初期値:false]
adaptiveHeight: false,
// 自動再生するか [初期値:false]
autoplay: true,
// 自動再生で切り替えする時間(ミリ秒) [初期値:3000]
autoplaySpeed: 3500,
// 前次ボタンを表示するか [初期値:true]
arrows: true,
// 別のスライドと連携したいときにクラス名を指定 [初期値:null]
asNavFor: null,
// 矢印ボタンの生成位置を変更 [初期値:$('.my-slide)]
appendArrows: $('.my-slide'),
// ドットナビゲーションの生成位置を変更 [初期値:$('.my-slide)]
appendDots: $('.my-slide'),
// 前ボタンの要素を変更 [初期値:'<button type="button" class="slick-prev">Previous</button>']
prevArrow: '<a class="slick-prev" href="#">前へ</a>',
// 次ボタンの要素を変更 [初期値:'<button type="button" class="slick-next">Next</button>']
nextArrow: '<a class="slick-next" href="#">次へ</a>',
// slidesToShowが奇数のとき、現在のスライドを中央に表示するか [初期値:false]
centerMode: false,
// centerMode:trueのとき、左右のスライドをチラ見せさせる幅 [初期値:'50px']
centerPadding: '60px',
// ease-in,ease-in-outなどCSSのイージング [初期値:'ease']
cssEase: 'linear',
// dots:trueのとき、ドットをサムネイルなどにカスタマイズ [初期値:n/a]
customPaging: function(slick, index){
var num = slick.$slides.eq(index).html();
return '<b>' + num + '</b>';
},
// ドットナビゲーションを表示するか [初期値:false]
dots: false,
// ドットナビゲーションのクラス名を変更 [初期値:slick-dots]
dotsClass: 'my-dots',
// マウスドラッグでスライドの切り替えをするか [初期値:true]
draggable: true,
// スライド切り替えをフェードするか [初期値:false]
fade: false,
// クリックでメインのスライドを切り替えるか
focusOnSelect: true,
// jQueryのイージング [初期値:'linear']
easing: 'linear',
// スライドをループさせるか [初期値:true]
infinite: false,
// infinite:falseのとき、両端のスライドをドラッグしようとした際のバウンドスクロール値 [初期値:0.15]
edgeFriction: 0.2,
// 開始スライド(0から始まるので注意) [初期値:0]
initialSlide: 2,
// 画像の遅延表示タイプ(ondemand/progressive) [初期値:'ondemand']
lazyLoad: 'ondemand',
// モバイルファーストにするか [初期値:false]
mobileFirst: false,
// autoplay:trueのとき、マウスフォーカスしたら一時停止させるか [初期値:true]
pauseOnFocus: true,
// autoplay:trueのとき、マウスホバーしたら一時停止させるか [初期値:true]
pauseOnHover: true,
// autoplay:trueのとき、ドットナビゲーションをマウスホバーしたら一時停止させるか [初期値:false]
pauseOnDotsHover: false,
// レスポンシブ設定の基準(window/slider/min) [初期値:'window']
respondTo: 'window',
// レスポンシブ設定
responsive: [
{
breakpoint: 1024, // 600〜1023px
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600, // 480〜599px
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480, // 〜479px
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
],
// 行数 [初期値:1]
rows: 1,
// スライド部分の要素のタグ名 [初期値:'']
slide: 'div',
// rowsの値が2以上のとき、1行あたりに表示させるスライド数 [初期値:1]
slidesPerRow: 2,
// 表示させるスライド数 [初期値:1]
slidesToShow: 2,
// 一度に移動させるスライド数 [初期値:1]
slidesToScroll: 2,
// スライド/フェードさせるスピード(ミリ秒) [初期値:300]
speed: 400,
// スワイプを検知するか [初期値:true]
swipe: true,
// slidesToScrollの値に関係なく、マウスドラッグやスワイプでスライドさせる際は1スライドずつ動かす [初期値:false]
swipeToSlide: false,
// タッチでスライドさせるか [初期値:true]
touchMove: true,
// (1/touchThreshold)*スライダーの横幅 分マウスドラッグするとスライドされる [初期値:5]
touchThreshold: 5,
// CSSのtransitionを使用するか [初期値:true]
useCSS: true,
// CSSのtransformを使用するか [初期値:true]
useTransform: true,
// 横幅がバラバラなスライドにするか [初期値:false]
variableWidth: false,
// 縦方向にスライドさせるか [初期値:false]
vertical: true,
// 縦方向のスワイプを有効にするか [初期値:false]
verticalSwiping: false,
// スライドの順番を逆にするか [初期値:false]
rtl: false,
// スライドアニメーション中サムネイルをクリックしたとき反応させないか [初期値:true]
waitForAnimate: true,
// z-index値 [初期値:1000]
zIndex: 1000
});


イベント

var $slider = $('.slider');
$slider.slick();

$slider.on('afterChange', function(slick, currentSlide){
console.log('スライド切り替え後のイベント');
});
$slider.on('beforeChange', function(slick, currentSlide, nextSlide){
console.log('スライド切り替え前のイベント');
});
$slider.on('breakpoint', function(event, slick, breakpoint){
console.log('ブレイクポイント時のイベント');
});
$slider.on('destroy', function(event, slick){
console.log('スライダーを解除(unslick)した時のイベント');
});
$slider.on('edge', function(slick, direction){
console.log('infinite:falseのとき両端のスライドをドラッグした時のイベント');
});
$slider.on('init', function(slick){
console.log('スライダーが初期化された時のイベント');
});
$slider.on('reInit', function(slick){
console.log('スライダーが再初期化された時のイベント');
});
$slider.on('setPosition', function(slick){
console.log('スライダのポジションまたは横幅が設定された時のイベント');
});
$slider.on('swipe', function(slick, direction){
console.log('マウスドラッグまたはスワイプされた時のイベント');
});
$slider.on('lazyLoaded', function(event, slick, image, imageSource){
console.log('画像がlazyLoadされる度に呼ばれるイベント');
});
$slider.on('lazyLoadError', function(event, slick, image, imageSource){
console.log('画像がlazyLoadされなかったときに呼ばれるイベント');
});

 

 

【オプションの使い方】

http://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin

 

 

【矢印が見えない場合の対処方法】

・矢印アイコンがボックスの外に追いやられてる

・矢印アイコンがスライドする画像の下に隠れている

・矢印の色が白色になっているので背景の白と同化していて見えないだけ

・そもそもslickのfontsフォルダを設置し忘れている

 

.slick-prev,

.slick-next{
z-index: 100;
}

 

片方は見えたが、preが見えない・・・

この場合、Z-indexが関係しています。

 

これを追加する。

 

https://travelogue.jp/blog/archives/4757.html

 

 

参照サイト

 

 

大変申し訳ありませんが、当社ではサービスの質を落とさないために、月の契約は5件までとさせていただいております。 契約をお待ちいただく可能性もございますので、ご了承のほどよろしくお願いいたします

 

 

 

 

この記事を読んだ人は、こんな記事も読んでいます

 

SEO対策の基本 外部要因とは?

SEO対策の基本的である、外部要因とは何か?

SEO対策をするなら絶対に知っておきたい、基本知識です。

 

売れるサイトを作るのに知って起きたい知識

サーチエンジンマーケティングという言葉をご存知でしょうか?

ホームページで商品やサービスを売る時に知っておきたいマーケティング

についてご紹介いたします。

seo対策をするメリットとは

SEO対策をする5つのメリットとは?

なぜ上位表示させることが大事なのか?なぜSEO対策をする必要があるのか

についてご紹介させていただきます。

 

内部要因とは

SEO対策の内部要因とは?

上位表示させるためには、内部要因について知っておくことも大事です。

キーワードを上位表示させるために必要なのは、ソースコードを最適化することです

内部要因の対策について知りたい方はこちらへ

 

キーワード対策をするまえに

キーワード対策をする前に

そのキーワード対策。ちょっと待ってください。

そのまま対策をすると、必ずお金を損してしまいます。個人事業主や中小企業は

そんな大きなキーワードで対策をしてはいけません。

広告費用が高くなる理由とは

広告費用が高くなる本当の理由とは?

売れないサイトに集めていませんか?広告費用がかかるわりには

お問い合わせが少ない・・・と感じる方は多いはずです。

購入率の悪いサイトに集客をしている可能性があります。

 

 

 

 

【SEO対策・webコンサルティングのプラスワーク対応エリアについて】

プラスワークでは、東京、神奈川、千葉、埼玉を中心に全国でwebコンサルティング、SEO対策、ホームページの更新、ホームページのリニューアル運営代行をしております。売上アップをお考えならお気軽にご相談ください。

 

【SEO対策・webコンサルティングのプラスワーク 対応地域】

北海道 [ 北海道 ]

東北  [ 青森 | 岩手 | 山形 | 福島 | 秋田 | 宮城 ]

関東  [ 東京 | 埼玉 | 千葉 | 茨城 | 栃木 | 群馬 | 神奈川 ]

甲信越 [ 山梨 | 長野 | 新潟 ]

北陸  [ 石川 | 福井 | 富山 ]

東海  [ 愛知 | 静岡 | 岐阜 | 三重 ]

近畿  [ 大阪 | 兵庫 | 京都 | 滋賀 | 奈良 | 和歌山 ]

中国  [ 島根 | 山口 |鳥取 | 広島 | 岡山 ]

四国  [ 徳島 | 香川 | 愛媛 | 高知 ]

九州  [ 福岡 | 佐賀 | 長崎 | 熊本 | 大分 | 宮崎 | 鹿児島 ]

プラスワークでは全国でSEO対策、ホームページ更新、制作をしております。中小企業専門SEO対策・ホームページ更新制作会社、口コミのよいSEO対策会社をお探しならプラスワークにお任せくださいませ。

 

 

【コンテンツ】

トップへ

更新レスキュー

料金について

制作実績

お客様の声

よくある質問

会社概要

お問い合わせ

【更新レスキュー】

ライトコース

ゴールドコース

プラチナコース

 

【その他】

ニュース

メルマガ登録

特別資料プレゼント

相互リンク募集中

【課題から探す】

ホームページの課題

SEO対策とは

SEO対策がダメな理由

上位表示されない理由

相互リンクとは

順位が落ちてしまう原因

 

 

フェイスブック  ツイッター