画像を何枚か切り替えて表示させたい場合に使える、jQueryのプラグインの一種であるbxSliderの使い方をご紹介します。
今回はCDN形式で行う方法で紹介します。
１、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>
２、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>
３、関連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サイトをフルスクラッチにて構築することが可能です。お気軽にお問い合わせください。