DESIGN BLOGデザイン事務所の制作ブログ

【jQuery】超簡単jQueryスライダーbxSliderの使い方

JO
株式会社ビーエムビー

画像を何枚か切り替えて表示させたい場合に使える、jQueryのプラグインの一種であるbxSliderの使い方をご紹介します。
今回はCDN形式で行う方法で紹介します。

1、bxsliderのcssとjs導入
<link rel="stylesheet" href="/jquery.bxslider.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" /></script>
<script src="/jquery.bxSlider.min.js"></script>

2、jsの関連コード
<script>
$(function(){
$('.bxslider ul.slider').bxSlider({minSlides:3,maxSlides:3,slideWidth:260,moveSlides:1,slideMargin: 0,auto:true,useCSS:false,pager:false,autoHover:true});});
</script>

3、関連HTML
<div class="bxslider">
<ul class="slider">
<li><img src="slider1.jpg" /></li>
<li><img src="slider2.jpg" /></li>
<li><img src="slider3.jpg" /></li>
<li><img src="slider4.jpg" /></li>
</ul>
</div>

株式会社ビーエムビー

株式会社ビーエムビー

〒114-0031 東京都北区十条仲原1-4-8 商店街会館311 TEL&FAX:03-5948-5996

東京都北区のWEBやDTP(印刷物)のデザイン制作会社です。ホームページ制作やLP(ランディングページ)の作成、ECサイト(楽天ストアなど)の構築などのWEBデザイン、チラシ・ポスター・名刺・パンフレット・看板などの印刷物デザインに対応しています。お客様の業務形態や用途に合わせたwordpressによるCMSサイトをフルスクラッチにて構築することが可能です。お気軽にお問い合わせください。

その他の制作ブログ一覧

知られざるHTMLタグ!知っておくと便利なタグ10選 HTMLはウェブページを構築するための基盤で、一般的に使われるタグはよく知られています。しかし、実際にはあまり注目されていないけれど、便利で強力なタグもたくさんあります。今回は、あまり知名度のないけれど知っておくと便利なHTMLタグを紹介し、その使い方とメリットを解説します。 1. <details> と <summary> 使い方: これらのタグは、ユーザーがクリック…
【CSSのtransformとは?】使い方とアニメーション応用を解説 transform は、CSSの中でも非常に強力で、動きやアニメーションを加えるために使われるプロパティです。本記事では、CSS transform の基本的な使い方から、アニメーションへの応用例まで、わかりやすく解説します。 CSSのtransformとは?基本を押さえよう transformプロパティとは transform プロパティは、HTML要素の見た目を変形させるためのCSS… CSS
【CSS疑似クラス】知っていると便利!::before / ::after 以外にも疑似クラスはたくさん! CSSの世界で「疑似クラス」と聞いて真っ先に思い浮かぶのは、::before や ::after という人が多いのではないでしょうか? 確かに、これらは装飾的な要素を追加したり、アイコンを表示したりするのにとても便利です。でも実は、CSSにはそれ以外にも便利な疑似クラスがたくさん用意されているんです。 この記事では、意外と見落とされがちな疑似クラスをピックアップしてご紹介します!ちょ…
VPN接続とは?オススメVPNサーバーもご紹介! VPN接続とは?おすすめのVPNサーバーの選び方【初心者向けガイド】 インターネットの利用が日常的になった今、「VPN」という言葉を耳にする機会も増えたのではないでしょうか?この記事では、VPN接続の基本的な仕組みから、あなたにぴったりのVPNサーバーの選び方までをわかりやすく解説します。 VPN接続とは? VPN(Virtual Private Network)は、「仮想専用線」とも呼ばれ… WEB制作
初心者でも安心!レンタルサーバーの選び方ガイド Webサイトを立ち上げるには、まず「レンタルサーバー」を選ぶ必要があります。でも、種類が多くて「どれを選べばいいの?」と迷ってしまいますよね。この記事では、初心者でも失敗しないレンタルサーバーの選び方をわかりやすく解説します。 1. レンタルサーバーとは? レンタルサーバーとは、Webサイトのデータを24時間インターネット上に公開できるようにするための「場所」のこと。自分のパソコンを使わずに、… WEB制作
一覧に戻る