質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1407閲覧

スライドショーを設置したい。

kikyou_

総合スコア5

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/01/29 03:37

編集2022/01/12 10:55

![イメージ説明]### 前提・実現したいこと
![イメージ説明]

スライドショーを左サイドバー、メインを表示するところに設置したい。
現在画像の通り

作った画像1
作った画像2

画像1のサイドバーの隣に作った画像2を設置したい。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

メインコンテンツに設置できない。

該当のソースコード

ソースを乗せると、投稿できなかった。
コード

```jquery <!-- 画像スライドスクリプト--> <script> $(function(){ $(window).load(function(){ var setWrap = $('.slideShow'), setMainView = $('.mainView'), setThumbNail = $('.thumbNail'), setMaxWidth = 800, setMinWidth = 320, thumbNum = 6, thumbOpc = 0.5, fadeTime = 1000, delayTime = 5000, sideNavi = 'on', // 'on' or 'off' autoPlay = 'on'; // 'on' or 'off' setWrap.each(function(){ var thisObj = $(this), childMain = thisObj.find(setMainView),mainUl = childMain.find('ul'),mainLi = mainUl.find('li'),mainLiFst = mainUl.find('li:first'), childThumb = thisObj.find(setThumbNail),thumbUl = childThumb.find('ul'),thumbLi = childThumb.find('li'),thumbLiFst = childThumb.find('li:first'),thumbLiLst = childThumb.find('li:last'); thisObj.css({width:setMaxWidth,display:'block'}); mainLi.each(function(i){ $(this).attr('class','view' + (i + 1).toString()).css({zIndex:'98',opacity:'0'}); mainLiFst.css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime); }); thumbLi.click(function(){ if(autoPlay == 'on'){clearInterval(setTimer);} var connectCont = thumbLi.index(this); var showCont = connectCont+1; mainUl.find('.view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'});}); mainUl.find('.view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'});}); $(this).addClass('active'); $(this).siblings().removeClass('active'); if(autoPlay == 'on'){timer();} }); thumbLi.css({opacity:thumbOpc}); thumbLiFst.addClass('active'); // メイン画像をベースにエリアの幅と高さを設定 var mainLiImg = mainLi.find('img'), baseWidth = mainLiImg.width(), baseHeight = mainLiImg.height(); // レスポンシブ動作メイン imgSize(); function imgSize(){ var windowWidth = parseInt($(window).width()); if(windowWidth >= setMaxWidth) { thisObj.css({width:setMaxWidth}); childMain.css({width:baseWidth,height:baseHeight}); mainUl.css({width:baseWidth,height:baseHeight}); mainLi.css({width:baseWidth,height:baseHeight}); thumbLi.css({width:((setMaxWidth)/(thumbNum))}); } else if(windowWidth < setMaxWidth) { if(windowWidth >= setMinWidth) { thisObj.css({width:'100%'}); childMain.css({width:'100%'}); mainUl.css({width:'100%'}); mainLi.css({width:'100%'}); } else if(windowWidth < setMinWidth) { thisObj.css({width:setMinWidth}); childMain.css({width:setMinWidth}); mainUl.css({width:setMinWidth}); mainLi.css({width:setMinWidth}); } var reHeight = mainLiImg.height(); childMain.css({height:reHeight}); mainUl.css({height:reHeight}); mainLi.css({height:reHeight}); var reWidth = setThumbNail.width(); thumbLi.css({width:((reWidth)/(thumbNum))}); } } $(window).resize(function(){imgSize();}); imgSize(); // サムネイルマウスオーバー var agent = navigator.userAgent; if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){ thumbLi.hover(function(){ $(this).stop().animate({opacity:'1'},200); },function(){ $(this).stop().animate({opacity:thumbOpc},200); }); } // ボタン移動動作 function switchNext(){ var setActive = thumbUl.find('.active'); setActive.each(function(){ var listLengh = thumbLi.length, listIndex = thumbLi.index(this), listCount = listIndex+1; if(listLengh == listCount){ thumbLiFst.click(); } else { $(this).next('li').click(); } }); } function switchPrev(){ var setActive = thumbUl.find('.active'); setActive.each(function(){ var listLengh = thumbLi.length, listIndex = thumbLi.index(this), listCount = listIndex+1; if(1 == listCount){ thumbLiLst.click(); } else { $(this).prev('li').click(); } }); } // サイドナビボタン(有り無し) if(sideNavi == 'on'){ childMain.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>'); var btnPrev = thisObj.find('.btnPrev'),btnNext = thisObj.find('.btnNext'),btnPrevNext = thisObj.find('.btnPrev,.btnNext'); if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){ btnPrevNext.css({opacity:thumbOpc}).hover(function(){ $(this).stop().animate({opacity:'0.9'},200); },function(){ $(this).stop().animate({opacity:thumbOpc},200); }); } else { btnPrevNext.css({opacity:thumbOpc}); } btnPrev.click(function(){switchPrev();}); btnNext.click(function(){switchNext();}); } // 自動再生(有り無し) if(autoPlay == 'on'){ function timer(){ setTimer = setInterval(function(){ switchNext(); },delayTime); } timer(); } }); }); }); </script> <!-- 画像スライドスクリプトend-->

html

1<!--スライドstart--> 2 3 4<div class="slideShow"> 5 6<div class="mainView"> 7<ul> 8 9 <li><a href="#1"><img src="img/main.gif" alt=""></a></li> 10 <li><a href="#2"><img src="img/suraido1.gif" alt=""></a></li> 11 <li><a href="#3"><img src="img/suraido2.gif" alt=""></a></li> 12 <li><a href="#4"><img src="img/suraido3.gif" alt=""></a></li> 13 <li><a href="#5"><img src="img/suraido4.gif" alt=""></a></li> 14 15 16</ul> 17</div><!--/.mainView--> 18 19<div class="thumbNail"> 20 <br></br> 21<ul> 22 <li><img src="img/main.gif" alt=""></li> 23 <li><img src="img/suraido1.gif" alt=""></li> 24 <li><img src="img/suraido2.gif" alt=""></li> 25 <li><img src="img/suraido3.gif" alt=""></li> 26 <li><img src="img/suraido4.gif" alt=""></li> 27</ul> 28</div><!--/.thumbNail--> 29 30</div><!--/.slideShow--> 31 32 33<!--スライドend--> 34``````html

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2018/01/29 04:39

「メインコンテンツに設置できない」とのことですが、左サイドバーには設置できた、ということでしょうか?
x_x

2018/01/29 04:39

jQueryタグがついているので何らかのプラグインを使おうとしているのかもしれませんが、書かないとわかりません。
kikyou_

2018/01/29 05:07

ソースコードを書き込めないんですが・・・。どうしたらよろしいでしょうか?
kei344

2018/02/01 19:10

プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)
guest

回答1

0

slick.jsを使った方が早いんじゃないでしょうか

http://kenwheeler.github.io/slick/

投稿2018/02/16 11:06

orange-lion

総合スコア426

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問