質問編集履歴｜teratail（テラテイル）

6 追記

miyoshi_work score 69

2017/02/20 18:23 投稿

【jQuery】＊swiper.js 画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい

お世話になっております。

jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。

[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)

既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。

このサンプルのアニメーションで、

上の画像をフリック（動かす）したら、テキストが同時に動くようにしたいです。

###

コードは上記サンプルのものと同様です

```html

<head>

</head>

<body>

</div>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

</div>

</div>

</body>

```

```css

#slide {

padding: 0;

background: none repeat scroll 0 0 #fff;

max-width: 495px;

margin: 0 auto;

text-align: center;

}

#slide img {

width: 100%;

max-width: 480px;

}

.slide_info {

padding: 10px 0 30px;

}

.slide_info a{

display: block;

}

```

```javascript

$(document).ready(function() {

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

parallax: true,

speed: 900,

autoplay: 6000,

effect: 'flip',

updateOnImagesReady:true,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

var swiper = new Swiper('.slide_info', {

parallax: true,

speed: 900,

autoplay: 6000,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

```

###

時間ができた際に自分で試したサンプルあげようと思います

ご教授頂けますと幸いです。

jQuery

11012 questions

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

jQueryプラグイン

725 questions

jQueryの拡張機能。様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

5 修正

miyoshi_work score 69

2017/02/20 17:53 投稿

【swiper.js】画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい

【jQuery】＊swiper.js 画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい

お世話になっております。

jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。

[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)

既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。

このサンプルのアニメーションで、

上の画像をフリック（動かす）したら、テキストが同時に動くようにしたいです。

###

コードは上記サンプルのものと同様です

```html

<head>

</head>

<body>

</div>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

</div>

</div>

</body>

```

```css

#slide {

padding: 0;

background: none repeat scroll 0 0 #fff;

max-width: 495px;

margin: 0 auto;

text-align: center;

}

#slide img {

width: 100%;

max-width: 480px;

}

.slide_info {

padding: 10px 0 30px;

}

.slide_info a{

display: block;

}

```

```javascript

$(document).ready(function() {

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

parallax: true,

speed: 900,

autoplay: 6000,

effect: 'flip',

updateOnImagesReady:true,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

var swiper = new Swiper('.slide_info', {

parallax: true,

speed: 900,

autoplay: 6000,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

```

###

ご教授頂けますと幸いです。

jQuery

11012 questions

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

jQueryプラグイン

725 questions

jQueryの拡張機能。様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

4 修正

miyoshi_work score 69

2017/02/20 12:51 投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい

【swiper.js】画像とテキストのエフェクトをそれぞれ違うものにし、それらの動きを連動させたい

お世話になっております。

jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。

[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)

既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。

このサンプルのアニメーションで、

上の画像をフリック（動かす）したら、テキストが同時に動くようにしたいです。

###

コードは上記サンプルのものと同様です

```html

<head>

</head>

<body>

</div>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

</div>

</div>

</body>

```

```css

#slide {

padding: 0;

background: none repeat scroll 0 0 #fff;

max-width: 495px;

margin: 0 auto;

text-align: center;

}

#slide img {

width: 100%;

max-width: 480px;

}

.slide_info {

padding: 10px 0 30px;

}

.slide_info a{

display: block;

}

```

```javascript

$(document).ready(function() {

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

parallax: true,

speed: 900,

autoplay: 6000,

effect: 'flip',

updateOnImagesReady:true,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

var swiper = new Swiper('.slide_info', {

parallax: true,

speed: 900,

autoplay: 6000,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

```

###

ご教授頂けますと幸いです。

jQuery

11012 questions

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

jQueryプラグイン

725 questions

jQueryの拡張機能。様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

3 修正

miyoshi_work score 69

2017/02/20 12:50 投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい

お世話になっております。

jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。

[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)

既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。

このサンプルのアニメーションで、

上の画像をフリック（動かす）したら、テキストが同時に動くようにしたいです。

###

コードは上記サンプルのものと同様です

```html

<head>

</head>

<body>

</div>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

</div>

</div>

</body>

```

```css

#slide {

padding: 0;

background: none repeat scroll 0 0 #fff;

max-width: 495px;

margin: 0 auto;

text-align: center;

}

#slide img {

width: 100%;

max-width: 480px;

}

/* 店舗・item情報 */

.slide_info {

padding: 10px 0 30px;

}

.slide_info a{

display: block;

}

```

```javascript

$(document).ready(function() {

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

parallax: true,

speed: 900,

autoplay: 6000,

effect: 'flip',

updateOnImagesReady:true,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

var swiper = new Swiper('.slide_info', {

parallax: true,

speed: 900,

autoplay: 6000,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

```

###

ご教授頂けますと幸いです。

jQuery

11012 questions

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

jQueryプラグイン

725 questions

jQueryの拡張機能。様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

2 修正

miyoshi_work score 69

2017/02/20 12:49 投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい

お世話になっております。

jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。

[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)

既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。

このサンプルのアニメーションで、

上の画像をフリック（動かす）、もしくはテキストをフリックした際に画像、テキストが同時に動くようにしたいです。

上の画像をフリック（動かす）したら、テキストが同時に動くようにしたいです。

###

コードは上記サンプルのものと同様です

```html

<head>

</head>

<body>

</div>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

</div>

</div>

</body>

```

```css

#slide {

padding: 0;

background: none repeat scroll 0 0 #fff;

max-width: 495px;

margin: 0 auto;

text-align: center;

}

#slide img {

width: 100%;

max-width: 480px;

}

/* 店舗・item情報 */

.slide_info {

padding: 10px 0 30px;

}

.slide_info a{

display: block;

}

```

```javascript

$(document).ready(function() {

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

parallax: true,

speed: 900,

autoplay: 6000,

effect: 'flip',

updateOnImagesReady:true,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

var swiper = new Swiper('.slide_info', {

parallax: true,

speed: 900,

autoplay: 6000,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

```

###

ご教授頂けますと幸いです。

jQuery

11012 questions

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

jQueryプラグイン

725 questions

jQueryの拡張機能。様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

1 追記

miyoshi_work score 69

2017/02/20 12:47 投稿

【swiper.js】画像とテキストのエフェクトを変更させて、それらの動きを連動させたい

お世話になっております。

jQueryプラグイン【swiper.js】を使用したスライドショーを作成しております。

[**サンプル**](http://codepen.io/mmm-mimo/pen/VPJzrr)

画像とテキストの動きを変えたいと思い、上記サンプルを作成いたしました。

既存のスライダーから、画像とテキストのエフェクトをバラバラにしたいと思い、上記サンプルを作成いたしました。

このサンプルのアニメーションで、

上の画像をフリック（動かす）、もしくはテキストをフリックした際に画像、テキストが同時に動くようにしたいです。

###

コードは上記サンプルのものと同様です

```html

<head>

</head>

<body>

</div>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

<a href="#" class="text01">テキスト上</a>

<a href="#" class="text02">テキスト下</a>

</p>

</div>

</div>

</body>

```

```css

#slide {

padding: 0;

background: none repeat scroll 0 0 #fff;

max-width: 495px;

margin: 0 auto;

text-align: center;

}

#slide img {

width: 100%;

max-width: 480px;

}

/* 店舗・item情報 */

.slide_info {

padding: 10px 0 30px;

}

.slide_info a{

display: block;

}

```

```javascript

$(document).ready(function() {

var swiper = new Swiper('.swiper-container', {

pagination: '.swiper-pagination',

paginationClickable: true,

parallax: true,

speed: 900,

autoplay: 6000,

effect: 'flip',

updateOnImagesReady:true,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

var swiper = new Swiper('.slide_info', {

parallax: true,

speed: 900,

autoplay: 6000,

loop: true,

autoplay: 2500,

autoplayDisableOnInteraction: false

});

```

###

ご教授頂けますと幸いです。

jQuery

11012 questions

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

jQueryプラグイン

725 questions

jQueryの拡張機能。様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

質問編集履歴

teratailアカウントでログイン

SNSアカウントでログイン