JavaScript Web プログラミング

JQuery「Smooth scroll」とBootstrap「Carousel」を共存させて使う方法

投稿日:

こんにちは!シミダイ(@shimidai2100)です。

JQuery「Smooth scroll(スムーススクロール)」とBootstrap「Carousel(カルーセル)」を共存させて使う方法を紹介します。

JQueryとBootstrapはコピペで作成できるコードがネット上には多くありますが、

お互いを考慮して使わないと動作がおかしくなるので注意してください。

なおJQueryのSmooth Scrollについては以下の記事も参考にしてください。

JQuery(JavaSrcript)でページ内リンクをヌルっとスクロール(スムーススクロール)させる方法

こんにちは!シミダイ(@shimidai2100)です。 Webページでヌルっとボタンを押すと、ヌルっと動くサイトありますよね? 仕事でちょこっと必要になって作成したので注意点も含めて記事にしたいと思 ...

続きを見る


Smooth scroll(スムーススクロール)の修正版JQuery

JQuery「Smooth scroll(スムーススクロール)」とBootstrap「Carousel(カルーセル)」を共存させた、

「Smooth scroll」のコードは以下になります。※コピペでOKです。

共存できない原因と修正のポイント

共存できない原因は、「carousel」にもid属性に”#”を使用しているからです。

carousel」でも”#”を使用して要素を遷移させています。

2行目のように「hred="#"」かつ「carousel-control-prevが含まれない」かつ「carousel-control-prevが含まれない」

タグをスムーススクロールのJumpボタン対象とさせるように記載します。

Bootstrapのバージョンによっては、「carousel-control」というセレクタになっていますので、動かない人は確認してみてください。

carousel」以外でも同様に「+」を使用してセレクタを追加させることは可能です。

 

スポンサードリンク

関連記事

-JavaScript, Web, プログラミング

Translate »

Copyright© shimidai2100 , 2018 All Rights Reserved.