swiper-slideのリンクについて

Question

前提・実現したいこと

※2018/11/13 15:35再追記しました

Webクリエイターの訓練校に通っており、現在下記サイトを参考に作成しております。
RINN inc.

こちらのサイトのようにswiperをドラッグ（スライド）して次の項目を表示させるとそのページが開くようにしたいのです。
（講師に聞いてもできませんでした）

発生している問題・エラーメッセージ

しかし、クリックしないとリンクされたページが出てきません。

###該当のソースコード

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" data-hash="slide1" data-link="me.html">
            <h1 class="page-ttl">M&nbsp;e</h1>
        </div>
        <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="0" data-hash="slide2" data-link="Learned.html">
            <div class="page-ttl"><a href="Learned.html#slide2">Learned</a></div>
        </div>
        <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2" data-hash="slide3" data-link="miscellany.html">
            <div class="page-ttl"><a href="miscellany.html#slide3">Miscellany</a></div>
        </div>
        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="1">
            <h1 class="page-ttl">Me</h1>
        </div>
        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="0">
            <div class="page-ttl"><a href="Learned.html#slide2">Learned</a></div>
        </div>
        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="2">
            <div class="page-ttl"><a href="miscellany.html#slide3">Miscellany</a></div>
        </div>
 
    </div>
</div>

$(function(){
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 2,
        loopedSlides:2,
        sliderMove:true,
        hashNavigation:true,
        simulateTouch:true,
        preventClicks:true,
        coverflowEffect: {
        autorotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true,
        },
    });
});

試したこと

hashNavigationを試してみましたがダメでした。
slideChangeにもチャレンジしましたが、swiper.jsは変更箇所が見当たらなかったのと、メソッドではセレクタが思いつかず断念しました。
（ここまでは浮かびました。)

Swiper.on('slideChange', function () {
  $('ここが謎').load('htmlファイル');

追記です
Swiperの効果は出ますが、スライドができなくなってしまいました。

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" data-link="me.html">
            <h1 class="page-ttl">M&nbsp;e</h1>
        </div>
        <div id="sample" class="swiper-slide swiper-slide-next" data-swiper-slide-index="0" data-hash="slide2" data-link="Learned.html">
            <div class="page-ttl"><a href="Learned.html">Learned</a></div>
        </div>
        <div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="2" data-link="miscellany.html">
            <div class="page-ttl"><a href="miscellany.html">Miscellany</a></div>
        </div>
        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active" data-swiper-slide-index="1">
            <h1 class="page-ttl">M&nbsp;e</h1>
        </div>
        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next" data-swiper-slide-index="0" data-link="Learned.html">
            <div class="page-ttl"><a href="Learned.html">Learned</a></div>
        </div>
        <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-prev" data-swiper-slide-index="2" data-link="miscellany.html">
            <div class="page-ttl"><a href="miscellany.html">Miscellany</a></div>
        </div>
    </div>
</div>

JavaScript

$(function(){
    var swiper = new Swiper('.swiper-container', {
        loop: true,
        effect: 'coverflow',
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 2,
        hashNavigation:true,
        loopedSlides:2,
        sliderMove:true,
        simulateTouch:true,
        preventClicks:true,
        coverflowEffect: {
        autorotate: 50,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true,
        },
        on:{
            slideChange:function(){
                //現在のスライド要素を取得
                var $currentSlide = $(swiper.slides).eq(swiper.realIndex);
                //対応するファイルのURLを取得
                var url = $currentSlide.data('link');
                //非同期通信
                $.ajax({
                // data属性に、ルート直下からのパスを('/me.html'など)を設定しておいてください
                    url:'../html/Learned.html' //ファイル名差し替えてあります
            })
                .promise()
                .then(function(data){
                    //非同期通信でデータが取得できた場合の処理
                    //HTMLとして挿入し、既存のコンテンツ部分を上書きする
                    //セレクタは適宜変更してください
                    $('#sample').html(data);
                })
            }
        }
    })
});

Comments

[NozomuIkuta]

https://teratail.com/help/question-tips#questionTips3-5にしたがって、ソースコードを見やすくできますか？

[chi_kama]

失礼致しました、編集させていただきました。

Answer 1

参考サイトを完全再現するのは手間ですが、概ね以下の技術(考え方)で実装できそうです。
(参考サイトとまるっきり同じ実装方法であることは保証しません)

1. Swiper
2. Ajax

参考サイトにはコンテンツ切り替え時にアニメーションがかかっていますが、
コンテンツ切り替えについて本質的な部分ではないので省略します。

以下、説明です。

処理の流れ

chi_kamaさんが考えられている通り、おおまかな処理の流れは以下の通りです。

1. Swiperでスライドが動く
2. slideChangeイベントが発生
3. slideChangeイベントに対応した処理が実行される
4. コンテンツ部分がロードされる
5. コンテンツ部分のHTMLを差し替える

必要な処理

SwiperでslideChangeイベント時の処理を登録する

以下の形でできます。

$(function(){
    var swiper = new Swiper('.swiper-container', {
        // 省略
        on: {
            slideChange: function() {
                // slideChangeイベントが発生した場合の処理(コンテンツ部分のロード)
            }
        }
    });
});

コンテンツ部分のロード

各コンテンツに必要な部分だけ、別途通信して取得します。
jQueryには非同期通信を行うajaxメソッドがあります。
リンクするわけではないので、質問のHTMLにある<a>要素は不要になります。

$.ajax({
    url: 'リクエストしたいURL',
    // その他オプション
});

今回の場合、リクエストしたいURLは各コンテンツ部分のHTMLです。
相対パス・絶対パスどちらでもOKです。
ファイル名は、スライド要素のdata属性を取得する(後述)形にすると便利です。
通信して結果を受け取ったあとの処理は、以下の形で書きます

$.ajax({
    url: 'リクエストしたいURL'
})
.promise()
.then(function(data) {
    // 通信が完了した場合の処理
    // data: 受け取った結果(データ)
});

resultには、リクエストしたURLがHTMLファイルなら、HTMlファイルの中身が文字列として入っています。

data属性の取得

jQueryには名前の通りdata()メソッドがあります。

<div id="sample" data-link="me.html"></div>

var filename = $('#sample').data('link')
console.log(filename) // -> 'me.html'

取得したHTMLの挿入

HTML文字列を要素として挿入するには以下の方法があります。

<div id="contents"></div>

$('#contents').html("<div>サンプル</div>");

結果は以下の通りです。

<div id="contents">
    <div>サンプル</div>
</div>

もし、<div id="sample"></div>に既存の内容(HTML)があれば、すべて上書きされます。

実装

まず、以下のファイルを用意します。

1. index.html(名前は任意です。Swiperのあるページのファイル名です)
2. content1.html content2.htmlなど、コンテンツ部分に相当するHTMLファイルを必要分(名前は任意です。コンテンツ部分のHTMLだけなので、<!doctype html> <html> <head> <body>は必要ありません。いきなり<div>などから書いてください)

HTML

あとでファイル名を取得できるように、各スライドにdata属性を設定しておきます。
すでに質問のHTMLにdata-link属性があるので、それを利用します。

JavaScript

いっぺんに書いてしまうので、動かない場合や、不明な点はお知らせください。
また、省略部分は適宜補ってください。
(環境つくってテストするのがかなり手間なので、あしからず)

$(function(){
    var swiper = new Swiper('.swiper-container', {
        // 省略
        on: {
            slideChange: function() { // slideChangeイベントが発生した場合の処理
                // 現在のスライド要素を取得
                var $currentSlide = $(swiper.slides).eq(swiper.realIndex);

　　　　　　　　　 // 対応するファイルのURLを取得
                var url = $currentSlide.data('link');

                // 非同期通信
                $.ajax({
                    // data属性に、ルート直下からのパスを('/me.html'など)を設定しておいてください
                    url: url
                })
                .promise()
                .then(function(data) { // 非同期通信でデータが取得できた場合の処理
                    // HTMLとして挿入し、既存のコンテンツ部分を上書きする
                    // セレクタは適宜変更してください
                    $('#contents').html(data);
                })
            }
        }
    });
});

Comments

[chi_kama]

回答ありがとうございます。
slideが効かなくなってしまったのでご質問させてください。
data属性の取得に記載されているJavaScriptについてですが、
var filename = $('#sample').data('link');
console.log('me.html'); // -> 'me.html'
こちらをSwiperのあるページのhead要素内に記載でよろしいでしょうか。
また、contents1.htmlファイルを作成し<div>～</div>を記述したものをSwiperのあるページと同階層に入れてあります。

[NozomuIkuta]

実際に実装するのは「実装」と書かれた見出し以下のソースコードです。

今回の場合、JavaScriptは<head>内ではなく、<body>の最後に記述してください。
該当の要素は<body>にあって、<head>内でSwiperを起動しても、その時点で該当の要素が存在せず、適用できません。

「必要な処理」という見出しからの内容は、
全体の処理を分解して「こういう個々の処理(考え方)が必要です」という説明です。

[chi_kama]

認識の齟齬、失礼致しました。
これから明日までPCが使えない可能性がありますので、次回の返信が遅れてしまいますが、ご了承ください。
本題ですが、
SwiperのファイルとSwiper-containerをbody内の一番最後に記述いたしましたが、変わらず効きません。
質問自体に再度ソースコードを追記いたしますので、お時間あればご確認いただけますでしょうか。
私の方でも粘ってみます。ありがとうございます。