swiper.js日替わりのコンテンツを表示するスライダーを実現したい

【2017/7/24 質問内容修正】

ご指摘を頂きましたので、質問内容を修正いたします。
漠然とした内容で大変失礼いたしました。
またご指摘ありがとうございました。

【実現したいこと】
swiper.jsを使用し、日付に応じた日替わりコンテンツをスライダー表示したい

【試したこと】
前回質問させて頂き、ご回答いただいた内容を参考に「年初からの経過日数-1を計算する」という方法を試しました。
https://teratail.com/questions/84887

【エラー内容】
initialSlide: x,を指定し、事前に、年初からの経過日数-1を計算したうえでxに代入する、とのことだったのですが、私のjavascriptの知識ではうまく記述することができませんでした…。

var swiper;
$(window).load(function() {
    swiper = new Swiper('.swiper-container', {
	
	function() {
			var n = Date.parse("2017/01/01");
			var m = new Date();
			var x =(m - n)/1000/60/60/24;
			x = Math.floor(x);
			alert(x);}
	
        pagination: '.swiper-pagination',
		paginationClickable: true,
		pagination: '.swiper-pagination',
		parallax: true,
		speed: 600,
		nextButton: '.swiper-button-next , .link_next , .next_allow',
		prevButton: '.swiper-button-prev , .link_prev , .prev_allow',
		initialSlide: x,
        
    });
});

functionの書き方がわかっていないため、滅茶苦茶な構文になっているのだと思います。
基礎的なことが不勉強でお恥ずかしい限りですが、色々調べながら試行錯誤したもののうまくいきません。
（スライダー自体が機能しなくなる）

恐縮ですが、どなたがお知恵を貸して頂けますと幸いです。
どうぞよろしくお願い申し上げます。

kei344

2017/07/23 07:45

「何が」「どのように」わからないのかをもう少し具体的にかかれてはいかがでしょうか。

isobel

2017/07/24 06:42

質問内容を修正いたしました。ご指摘ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScriptの基礎から勉強していったほうがいいかと思いますが、

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8" />
5<meta http-equiv="Content-Sequrity-Policy" content="default-src *; style-src- * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; " />
6
7<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
8
9<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
10
11<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
12<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
13
14<script src="https://momentjs.com/downloads/moment.js"></script>
15
16<style>
17.swiper-container {
18    width: 500px;
19    height: 700px;
20    margin: 20px auto;
21}
22</style>
23
24</head>
25<body>
26<!-- Slider main container -->
27<div class="swiper-container">
28    <!-- Additional required wrapper -->
29    <div class="swiper-wrapper">
30        <!-- Slides -->
31    </div>
32    <!-- If we need pagination -->
33    <div class="swiper-pagination"></div>
34    
35    <!-- If we need navigation buttons -->
36    <div class="swiper-button-prev"></div>
37    <div class="swiper-button-next"></div>
38    
39    <!-- If we need scrollbar -->
40    <div class="swiper-scrollbar"></div>
41</div>
42<script>
43$(document).ready(function(){
44    //initialize swiper when document ready  
45    var mySwiper = new Swiper('.swiper-container', {
46        pagination: '.swiper-pagination',
47        paginationClickable: true,
48        nextButton: '.swiper-button-next',
49        prevButton: '.swiper-button-prev',
50        spaceBetween: 30
51    });
52    
53    var _wkDay = moment().startOf('year');
54    var _diffDay = moment().diff(_wkDay, 'days');
55    for(var i = 0; i <= _diffDay; i++) {
56        mySwiper.appendSlide('<div class="swiper-slide">' + _wkDay.format('YYYY/MM/DD') + '</div>');
57        _wkDay.add(1, 'day');
58    }
59});
60</script>
61</body>
62</html>