プロが教えるわが家の防犯対策術！

詳しい人求む！

画像の幅がフルサイズのレスポンシブで並べた画像がスライドするサイトを作りたいのですが上手くいきません

解決済

  • 質問者：yamamoto7778
  • 質問日時：
  • 回答数：2件

こちらのサイトのように画像の幅がほぼフルサイズのレスポンシブで並べた画像が自動で横にスライドするホームページが作りたいのですが上手くいきません。
http://www.designfestagallery.com/

１　ceoのためにも画像は<div>ではなくて<li>で並べたいです。

２　画像横幅は画面サイズに合わせ、スライド画像の下は空白にしたいです。
今の処スライド画像の上に少し被さるように空白のボックスを作ってみたんですがスライド画像より上に来ません。
スライド画像の下にclear:bothを付けても、z-indexをスライド画像より上の値にしても同じです。
http://i.imgur.com/I3XP7ys.png

３　<li>の画像が最後なったら折り返し(http://unslider.com/
)ではなくて(http://www.designfestagallery.com/　デモのクリックをお願いします
)みたいにループさせたいです。

４　Supersized.js (http://motoshige.net/blog/archives/5128)は試したんですが出来ませんでした。※スクリプトの細かい編集が苦手です。

注文が多くて面倒だとは思いますがよろしくお願いします。

この条件で探していくと適当なj.queryが見つからないので、こちらから自作のスクリプトをお借りしました。
http://www.hp-stylelink.com/news/2014/04/2014040 …


http://i.imgur.com/We0Q2Ay.jpg

横に並べてスライドができてる状態だとサイトの横幅に合いません。

http://imgur.com/OYZuY3r

<li>のwidthを100%にするとどうしても画像が横に並びません。
※ <li>のwidthを100%にする時は <ul>のwidthを<li>の画像3枚分のwidth幅(4600pxとか)で書いて<body>のwidthは画面サイズ、overflow-x: hiddenにしてます。



.slidejisaku {

list-style: none;
overflow: hidden;
position: relative;
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
padding-left: 0px;
border:solid;

}

li{
display: inline-block;
border:solid;
float: left;
}

.slidejisaku ul {
margin: 0px;
padding: 0px;
border:solid;
width: 4960px;
overflow: hidden;
max-height: 1260px;
display: block;
}

.clear{
clear:both;
}

<!—空白の部分です。—>
.whitebox{
width: 100%;
height:40%;
z-index: 30;
border:solid;

}




</style>
</head>

<body>





<script>
var loop = setInterval(function() {
//li先頭要素のクローンを作成
var clone = $(".slidejisaku li:first").clone(true);
//li先頭要素のマージントップにマイナスを指定しアニメーションさせる
$(".slidejisaku li:first").animate({
marginLeft : "-2000px"
}, {
duration : 800,
complete : function() {
//処理完了時に先頭要素を削除
$(".slidejisaku li:first").remove();
//クローンをliの最後に追加
clone.clone(true).insertAfter($(".slidejisaku li:last"));
}
});
}, 1500);
</script>


<div id="loopedSlide">
<ul class="slidejisaku">
<li><img src="/images/aaa.png"></li>
<li><img src="/images/bbb.png"></li>
<li><img src="/images/ccc.png"></li>
</ul></biv>

<div class="clear">
フロート指定なし
</div>

<div class=“whitebox">
</div>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： umioyo
  • 回答日時：

#1ですが、これじゃだめ？


https://output.jsbin.com/midogebafa/
    • good
    • 0
    • 件
通報する
この回答へのお礼

解りやすく短く纏めてくれて本当にありがとうございました。m(u u)m
とても助かりました。
こんなに短く書けるものなんですね。。
残りも何とか頑張ってみようと思います。

通報する
お礼日時：2016/02/07 03:18

No.1

  • 回答者： umioyo
  • 回答日時：

細かく見てないですが、参考としている元のサイトでは縦に移動しているのに対し、横に移動させたいのですよね。


そもそも記載してあるCSSでは（ご自身でも書かれていますが）横に並んでいないので、まずは動かす前にCSSだけのレベルで横に並び、かつ1枚目しか表示されないコードを書くべきです。

レスポンシブと書かれているのにアニメーションのネガティブマージンやulの幅がピクセル指定だったりするので、そのあたりをちゃんとレスポンシブに対応するようにクリアにする必要があります。
また、フル幅で表示するのであれば別に3倍必要ないですよね。
.slidejisaku ul
という指定も効くところないです。
ul.slidejisakuが正解ですが、上にある
.slidejisaku
と同じものを指しています。

などなど。まずはCSSをきちんとすべきかと思います。

それと、ulの幅を例えば200%にして中のliを2枚にする場合、
中のliは100%に指定してもulに対しての幅100%ですから、ulと同じ幅になってしまいます。
ulに2枚入れるのであれば中のliは50%になります。

たぶん、いまの状態で自作で横のスライドショーを作るのはかなりしんどいと思いますので、既存のレスポンシブ対応のスライドショーを改造したほうが早いと思います。

ceoってのはseoの意味でしょうか。
だいたいseoseoいっていろいろこだわるお客さんは多いですが、まずその前にコンテンツを見なおしたほうが100倍効果ある、と、私はお客さんに伝えています。

頑張ってください。
    • good
    • 1
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報