bxSlider スライドショー

よく使っている汎用スライダー。

大概の要件はこなせる。便利(ㆁᴗㆁ✿)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/contents/wp-content/themes/sysg01/js/bxslider.js"></script>
<link rel="stylesheet" href="/contents/wp-content/themes/sysg01/css/jquery.bxslider.css" />

<script>
	jQuery(function($){
  $('.bxslider1').bxSlider({
    auto: true,
	autoHover: true,
  	speed: 500, // 500
    slideWidth: 320,
    minSlides: 1,
    maxSlides: 3,
    startSlide: 2,
    slideMargin: 10,
	infiniteLoop: true,
	pager: false,
	randomStart: true
  });
});
</script>

<script>
	jQuery(function($){
  $('.bxslider2').bxSlider({
    auto: true,
	autoHover: true,
  	speed: 500, // 500
    slideWidth: 320,
    minSlides: 1,
    maxSlides: 3,
    startSlide: 2,
    slideMargin: 10,
	infiniteLoop: true,
	pager: false,
	randomStart: true
  });
});
</script>

	<div id="slide_space">
			<ul class="bxslider1">
					<li><a href="/ご提供サービス/サーバー/ip電話網構築サービス/"><img src="/contents/images/asterisk_service_thum_20170718_1.jpg" />
					<p><strong>IP電話網構築 IP-PBX</strong></p></a></li>
					
					<li><a href="/citrix-xenapp-共有アプリケーション環境構築/"><img src="/contents/images/citrix_s_slider_1-min.jpg" />
					<p><strong>Citrix XenAPPアプリケーション共有</strong></p></a></li>
			
					<li><a href="/ご提供サービス/aws-gcp-国産クラウド構築サービス/"><img src="/contents/images/cloud_s_slider_1-min.jpg" />
					<p><strong>クラウド構築</strong></p></a></li>
					
					<li><a href="/インフラ/インフラ構築、運用、保守"><img src="/contents/images/office_support_s_slider_1-min.jpg" />
					<p><strong>ITオフィスサポート</strong></p></a></li>
					
			</ul><!-- /.owl-carousel -->
	</div>

<hr/>

	<div id="slide_space">
			<ul class="bxslider2">
					
					<li><a href="/ご提供サービス/アプリケーション/グループウェア/"><img src="/contents/images/groupware_s_slider_1-min.jpg" />
					<p><strong>グループウェア開発</strong></p></a></li>
					
					<li><a href="/サーバー/高アクセス対策/"><img src="/contents/images/kousoku_s_slider_1-min.jpg" />
					<p><strong>高速サーバ</strong></p></a></li>
			
					<li><a href="/ご提供サービス/アプリケーション/posシステム/"><img src="/contents/images/pos_handy_s_slider_1-min.jpg" />
					<p><strong>POSシステム</strong></p></a></li>
			
					<li><a href="/ご提供サービス/アプリケーション/page-6471/active-directory-open-directory連携サービス/"><img src="/contents/images/security_s_slider_1-min.jpg" />
					<p><strong>Active Directory でApple製品も一括管理</strong></p></a></li>
			
					<li><a href="/ご提供サービス/システム開発/"><img src="/contents/images/system_builder_s_slider_1-min.jpg" />
					<p><strong>システム開発</strong></p></a></li>
			
					<li><a href="/web/サイト構築/"><img src="/contents/images/web_make_s_slider_1-min.jpg" />
					<p><strong>WEB開発 SEO</strong></p></a></li>
					
			</ul><!-- /.owl-carousel -->
	</div>