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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

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

Q&A

0回答

446閲覧

Jqueryのwidthを100%にしたい

prebank

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

jQuery

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

0グッド

0クリップ

投稿2020/06/10 22:15

前提・実現したいこと

ワードプレスでスライドショー系のwidthを100%に変更したいのですが、jQueryを使っているようですが、widthが最大1000pxで固定されてしまいます。
下記の コードのthis._max_width = 1000;を100%に変えても、数字以外のもの(例:1000px,100%)が入っているとreturnが0になり、スライドショーが表示できません。下記のコードでどうすればWidthを100%にできるでしょうか?

var Fader;

(function($) {
return $(function() {
return new Fader();
});
})(jQuery);

Fader = (function() {
function Fader() {
this._main_visual = $("#main-visual");
this._delay = 7000;
this._duration = 2000;
this._ul = $("ul", this._main_visual);
this._li = $("li", this._ul);
this._pics = [];
this._length = this._li.length;
this._showed = 1;
this._index = 1;
this._window = $(window);
this._max_width = 1000;
this._max_height = 400;
this._aspect = this._max_height / this._max_width;
this._init();
}

Fader.prototype._init = function() {
this._resize();
this._fader();
return this._onResize();
};

Fader.prototype._fader = function() {
var i, len, ref, val;
ref = this._li;
for (i = 0, len = ref.length; i < len; i++) {
val = ref[i];
this._pics.push($(val));
}
return this._startLoop();
};

Fader.prototype._startLoop = function() {
return setTimeout((function(_this) {
return function() {
if (_this._showed > (_this._length - 1)) {
_this._showed = 0;
}
return _this._pics[_this._showed].css({
zIndex: ++_this._index
}).fadeIn(_this._duration, function() {
if (_this._showed < 1) {
_this._pics[_this._length - 1].hide();
} else {
_this._pics[_this._showed - 1].hide();
}
_this._showed++;
return _this._startLoop();
});
};
})(this), this._delay);
};

Fader.prototype._resize = function() {
if (this._window.width() < this._max_width) {
return this._ul.css({
width: this._window.width(),
height: this._window.width() * this._aspect
});
} else {
return this._ul.css({
width: this._max_width,
height: this._max_width * this._aspect
});
}
};

Fader.prototype._onResize = function() {
return this._window.on("resize", (function(_this) {
return function() {
return _this._resize();
};
})(this));
};

return Fader;

})();

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問