kdcsライブラリー

slickスライダーに動画（mp4）を含めてスライドさせる。

1. 動画は1番目に配置し、再生中はスライドを止める。
2. 動画の再生が終了したら自動スライド開始。
3. 画像スライド中に動画を巻き戻す。（動画の先頭から再生させるため）

以下、javascriptのスライダーオプション記述
オプション設定ではautoplay:falseにしておく

//slick メインスライダーオプション -------------------------
    var theVideo = document.getElementById('theVideo');

    $('.slick-box').on('init', function(event, slick, currentSlide){
	    theVideo.play();
});

$(function() {
	$('.slick-box').slick({
		infinite: true,
		dots: false,
		arrows: true,
		prevArrow: '<button type="button" class="slick-prev"><</button>',
		nextArrow: '<button type="button" class="slick-next">></button>',
		slidesToShow: 1,
		slidesToScroll: 1,
		adaptiveHeight: false,
		autoplay: false,
		fade: true,
		speed: 2000,
		autoplaySpeed: 7000,
        pauseOnFocus: false
	});

    document.getElementById('theVideo').addEventListener('ended',myHandler,false);

        function myHandler(e) {
            $('.slick-box').slick('slickGoTo',1);
			$('.slick-box').slick('slickPlay');
		}

    $('.slick-box').on('afterChange', function(event, slick, currentSlide){

	    if (currentSlide == 0) {
		    $('.slick-box').slick('slickPause');
			theVideo.play();
        } else {
            theVideo.pause();
            theVideo.currentTime = 0;
		}
    });
});

videoタグには「playsinline muted」を記述。（autoplayは含めない）

html5

<?php /* slickスライダーここから---------------------------------------------------------- */ ?>
<div id="slickSlider">
<div class="slick-box">
<div id="slider-1" class="slider-item">
<div class="caption inner">
<div class="catch">動画キャッチタイトル</div>
<div class="catch2">キャッチコピー1行目<br>キャッチコピー2行目</div>
</div><!--/.caption-->
<video id="theVideo" playsinline muted>
<source src="<?php echo get_template_directory_uri(); ?>/images/slick/movie2.mp4">
</video>
</div><!--/#slider-1-->
<div id="slider-2" class="slider-item">
<img class="slickImage2" src="<?php echo get_template_directory_uri(); ?>/images/slick/slick_img03.jpg" alt="画像２" title="">
<div class="caption inner">
<div class="catch">画像1キャッチタイトル</div>
<div class="catch3">キャッチコピー</div>
</div><!--/.caption-->
</div><!--/#slider-2-->
</div><!--/.slick-box-->
<div class="slickslider-filters"></div>
</div><!--/#slickSlider-->
<?php /* slickスライダーここまで---------------------------------------------------------- */ ?>

セットする画像の縦横幅がバラバラの時の対処法は二つ

1.slickのoptionで設定

adaptiveHeight:true,

このオプションをtrueで実行するとスライドの高さが画像に合わせて自動で可変する
※スライダー以下、上下に動くのでよろしくない・・・

2.CSSで高さとobject-fitを指定する

.slider img {
width: 100%;
height: 50vw;
object-fit: cover;
}

※IEがobject-fitに未対応

IEだけ別css（この場合、heightをvwからautoにする）

@media screen\0 {
  .slider img {
    height: auto;
  }
}

welcartの商品詳細ページにある商品購入用フォームの数量をプラス+と-ボタンで入力できるようにする。
※jQueryを使用するので先にjQeryが読み込まれている必要あり

2019年12月14日現在 footer.php内に記述

<?php if(is_single()): ?>
<script type="text/javascript">
jQuery(function($){
    $(".skuquantity").after('<input type="button" value="+" id="add1" class="plus" />').before('<input type="button" value="-" id="minus1" class="minus" />');
    $(".plus").click(function(){
        var currentVal = parseInt(jQuery(this).prev(".skuquantity").val());
        if (!currentVal || currentVal=="" || currentVal == "NaN") currentVal = 0;
        $(this).prev(".skuquantity").val(currentVal + 1);
    });
    $(".minus").click(function(){
        var currentVal = parseInt(jQuery(this).next(".skuquantity").val());
        if (currentVal == "NaN") currentVal = 0;
        if (currentVal > 0) {
            $(this).next(".skuquantity").val(currentVal - 1);
        }
    });
});
</script>
<?php endif; ?>

slick.jsを使ったスライドショーで多いのが一つの画像が移動もしくはフェードで切り替わるもの
オプションの設定で「止まることなく流れ続けるスライドショー」にできる

以下、オプション設定

$('#slick-slide').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 0,
    cssEase: 'linear',
    speed: 8000,
    slidesToShow: 4,
    slidesToScroll: 1,
});

ポイントは「autoplayspeedを0にする」「cssEaseをlinearにする」

Slick.jsでカルーセル表示させたときに両サイドの部分（非アクティブ）を薄く見せる
※サンプルは、幅1080px 縦400pxの画像を使用した場合
※centerMode true slidesToShow 1

jqueryとslick.jsを読み込む（footer.php）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/slick/slick.min.js"></script>

(続きを読む…)