質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.98%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,333

isobel

score 16

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/07/23 16:45

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

    キャンセル

  • isobel

    2017/07/24 15:42

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

    キャンセル

  • 退会済みユーザー

    2017/07/25 10:59

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+1

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Sequrity-Policy" content="default-src *; style-src- * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; " />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script>

<script src="https://momentjs.com/downloads/moment.js"></script>

<style>
.swiper-container {
    width: 500px;
    height: 700px;
    margin: 20px auto;
}
</style>

</head>
<body>
<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
<script>
$(document).ready(function(){
    //initialize swiper when document ready  
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 30
    });

    var _wkDay = moment().startOf('year');
    var _diffDay = moment().diff(_wkDay, 'days');
    for(var i = 0; i <= _diffDay; i++) {
        mySwiper.appendSlide('<div class="swiper-slide">' + _wkDay.format('YYYY/MM/DD') + '</div>');
        _wkDay.add(1, 'day');
    }
});
</script>
</body>
</html> 

いわゆるこういうことかな。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/25 10:57

    ありがとうございます!
    不勉強でお恥ずかしい限りです…。

    今日・明日と作業ができないので、教えて頂いたコードを今週中に試して、
    改めて評価させて頂きたく思います。

    よろしくお願い致します。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる