ループスライダー

最後と最初に空白が空くのでCSSでマージンをマイナスしてあげる！
画像サイズ480×260px
全画面ループスライダーにすると下部にスクロールバーがでるので、CSSに　bodyのろころ　overflow-x: hidden;　を入れる。

【 HTML 】
<?php if (is_mobile()) : ?>
<div id="loopsliderwrap">
	<div id="loopslider">
	<ul>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide1-mobi.jpg" width="300" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide2-mobi.jpg" width="300" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide3-mobi.jpg" width="300" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide4-mobi.jpg" width="300" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide5-mobi.jpg" width="300" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide6-mobi.jpg" width="300" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide7-mobi.jpg" width="300" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide8-mobi.jpg" width="300" alt="photo" /></li>
		<li class="lastloop"><img src="<?php echo get_template_directory_uri(); ?>/img/slide9-mobi.jpg" width="300" alt="photo" /></li>
	</ul>
</div></div><!--/#loopslider-->
<?php else: ?>

<div id="loopsliderwrap">
	<div id="loopslider">
	<ul>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide1.jpg" width="480" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide2.jpg" width="480" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide3.jpg" width="480" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide4.jpg" width="480" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide5.jpg" width="480" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide6.jpg" width="480" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide7.jpg" width="480" alt="photo" /></li>
		<li><img src="<?php echo get_template_directory_uri(); ?>/img/slide8.jpg" width="480" alt="photo" /></li>
		<li class="lastloop"><img src="<?php echo get_template_directory_uri(); ?>/img/slide9.jpg" width="480" alt="photo" /></li>
	</ul>
</div></div><!--/#loopslider-->
<?php endif; ?>



【 JavaScript 】
//TOP画面のスライダー
$(function(){
	$('#loopslider').each(function(){
		var loopsliderWidth = $(this).width();
		var loopsliderHeight = $(this).height();
		$(this).children('ul').wrapAll('<div id="loopslider_wrap"></div>');

		var listWidth = $('#loopslider_wrap').children('ul').children('li').width();
		var listCount = $('#loopslider_wrap').children('ul').children('li').length;

		var loopWidth = (listWidth)*(listCount);

		$('#loopslider_wrap').css({
			top: '0',
			left: '0',
			width: ((loopWidth) * 2),
			height: (loopsliderHeight),
			overflow: 'hidden',
			position: 'absolute'
		});

		$('#loopslider_wrap ul').css({
			width: (loopWidth)
		});
		loopsliderPosition();

		function loopsliderPosition(){
			$('#loopslider_wrap').css({left:'0'});
			$('#loopslider_wrap').stop().animate({left:'-' + (loopWidth) + 'px'},125000,'linear');
			setTimeout(function(){
				loopsliderPosition();
			},125000);
		};

		$('#loopslider_wrap ul').clone().appendTo('#loopslider_wrap');
	});
});



【 CSS 】
/* =======================================
	スライダー設定：全画面版
======================================= */
@media screen and (min-width: 482px) {/*PCのみ*/
#loopslider {
	width: 1920px;
	height: 220px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
/*	width: 100%;*/
	height: 220px;
	float: left;
	display: inline;
	overflow: hidden;
}
#loopslider ul li {
	width: 480px;
	height: 220px;
	float: left;
	display: inline;
	overflow: hidden;
	padding:0px 0px;
}

.lastloop{margin-right:-50px;}


.swiper-pagination{
	position: relative !important;
	padding-top:20px;
}
}


@media screen and (max-width: 481px)  {/*スマホ*/
#loopslider {
	width: 1920px;
	height: 138px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

#loopslider ul {
/*	width: 100%;*/
	height: 138px;
	float: left;
	display: inline;
	overflow: hidden;
}
#loopslider ul li {
	width: 300px;
	height: 138px;
	float: left;
	display: inline;
	overflow: hidden;
	padding:0px 0px;
}

.lastloop{margin-right:-50px;}
}
▲このページのTOPに戻る▲
【サンプル】ループスライダー

ループスライダー
