メインスライダーを画像が少し切れるカルーセルにする。

18.10.26

1 用意するもの
2 header.phpのhtml(body)内
3 備考

用意するもの

・「slickで１カラムのテーマ」
・css/common.css
・js/jquery.carouFredSel.js
・images/photo.jpg各種　etc

header.phpのhead内

<?php
if(!is_page()&&is_home()) {
/*------------------------------------------------------------------
TOPページのみ　スライダー	jquery
------------------------------------------------------------------*/
?>
<link href="<?php bloginfo('template_url'); ?>/slider/css/common.css" rel="stylesheet" type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/slider//js/jquery.carouFredSel.js"></script>
	
<script> 
jQuery(window).load(function () {
jQuery(".loading").fadeOut();

  //▼スライダーの設定------------------------------
	var num = 3; //表示数
	var start = 1; //画像のスタート位置
	var slideW = 389; //スライドする画像の横幅の半分
	var slideH = 484; //スライドする画像の高さ
	var timeoutDuration = 4000; //スライドが切り替わる秒数	
  //▲ここまで
	
	function sp() {
		var num = "";
		if (window.matchMedia( '(max-width: 600px)' ).matches) { num = 1; }
		return num;
	}
	var res = false;
	var slideWR = slideW;
	if(sp()){
		num = 1;
		res = true;
		slideW = 0;
		slideWR = 0;
		slideH = "57px";
	}
	jQuery('#prev').css({left:"-"+slideW+"px",height:slideH});
	jQuery('#next').css({right:"-"+slideWR+"px",height:slideH});
	jQuery('#mv').fadeIn().carouFredSel({    
		width: '100%',
		responsive: res,
		items: { 
			visible: num, 
			start: start 
		},
		prev: '#prev',
		next: '#next',
		pagination: '#pager',
		scroll: {
			items: 1, 
			duration: 1000, 
			timeoutDuration: timeoutDuration
		}		
	});
});
</script>
	
<?php }?>

<?php

if(!is_page()&&is_home()) {

/*------------------------------------------------------------------

TOPページのみ　スライダー jquery

------------------------------------------------------------------*/

jQuery(window).load(function () {

jQuery(".loading").fadeOut();

//▼スライダーの設定------------------------------

var num = 3; //表示数

var start = 1; //画像のスタート位置

var slideW = 389; //スライドする画像の横幅の半分

var slideH = 484; //スライドする画像の高さ

var timeoutDuration = 4000; //スライドが切り替わる秒数

//▲ここまで

function sp() {

var num = "";

if (window.matchMedia( '(max-width: 600px)' ).matches) { num = 1; }

return num;

}

var res = false;

var slideWR = slideW;

if(sp()){

num = 1;

res = true;

slideW = 0;

slideWR = 0;

slideH = "57px";

}

jQuery('#prev').css({left:"-"+slideW+"px",height:slideH});

jQuery('#next').css({right:"-"+slideWR+"px",height:slideH});

jQuery('#mv').fadeIn().carouFredSel({

width: '100%',

responsive: res,

items: {

visible: num,

start: start

prev: '#prev',

next: '#next',

pagination: '#pager',

scroll: {

items: 1,

duration: 1000,

timeoutDuration: timeoutDuration

}

});

</script>

<?php }?>

header.phpのhtml(body)内

<?php
if(!is_page()&&is_home()) {
/*------------------------------------------------------------------
TOPページのみ　スライダー	html
------------------------------------------------------------------*/
?>
<div id="mainslider">
	<div id="mvIn">
	  <ul id="mv">
		  <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/slider/images/photo01.jpg" alt="1"></a></li>
		  <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/slider/images/photo01.jpg" alt="1"></a></li>
		  <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/slider/images/photo02.jpg" alt="1"></a></li>
		  <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/slider/images/photo03.jpg" alt="1"></a></li>
	  </ul>
	</div>
	<div id="prev"></div>
	<div id="next"></div>
	<div id="pager"></div>
	<div class="loading"><img src="<?php bloginfo('template_url'); ?>/slider/images/loading.gif" alt=""></div>
</div>
<?php }?>