急いでいます！

Flickity で画像にリンクを貼ると正常に動かない・・・CSSで何とかなるようです。

解決済

質問者：k-ayako
質問日時：2018/03/10 21:31
回答数：1件

Flickityのカルーセルスライダー実装しようと思ってます。

通常の動作はするのですが画像にリンクタグを貼るとうまく動作しません。

position : absoluteで動作できるという情報があったのですがどうもうまくいきません。

ページのソースとアップしているページも上げておきます。

よろしくお願いします。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flickity/0.3.1/flickity.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/0.3.1/flickity.pkgd.min.js"></script>

<style type="text/css">

.gallery-cell {
max-width: 35%;
margin-top: 10px;
margin-right: 3px;
margin-left: 3px;
margin-bottom: 3px;
}

@media screen and (max-width:768px){
.gallery-cell {
max-width: 85%;
margin-top: 10px;
margin-right: 3px;
margin-left: 3px;
margin-bottom: 3px;
}
}

</style>

<script type="text/javascript">

jQuery(function($){
$('#main-image-gallery').flickity({
contain: true,
wrapAround: true,
//　trueで無限スクロール。デフォルトはfalse。

contain: true,
//　trueでラッパー要素の中で収まるようにスクロールする。falseではみ出た部分に余白ができる。デフォルトはfalse。(wrapAround: trueの場合は無視される)

prevNextButtons: false,
// falseで「前へ」「次へ」のボタンの非表示。デフォルトはtrue。

pageDots: false,
// falseでドットナビゲーションを非表示。デフォルトはtrue。

autoPlay: true
// trueで3秒間隔で自動スクロール。秒数を指定したい場合は1500などミリ秒で指定する。デフォルトはfalse。
});
});

</script>

</head>

<body>

<div id="main-image-gallery">
<img src=images/001.jpg class="gallery-cell">
<img src=images/002.jpg class="gallery-cell">
<img src=images/003.jpg class="gallery-cell">
</div>

</body>
</html>

http://simple-business2018.com/test/

(リンクタグでおかしくなる）
http://simple-business2018.com/test/link.html