swiperを利用。画面表示幅に合わせて設定の変更をおこないたいです。

Question

前提・実現したいこと

swiperを利用し、スライドを作成しているのですが、スマホとPCの表示分けができず困っています。
breakpointsを使っても変わらない状況です。

変えたいのはスライドの表示方向です。
768px以上で縦
767px以下で横

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

direction: 'vertical'を使って縦にしていたのですが、
breakpointsが効かない今、どのようにして、direction: 'horizontal'を
反映させて良いかわからない状況です。

該当のソースコード

let mySwiper = new Swiper(".swiper-container", {
    loop: true, 
    direction: 'vertical' ,
    effect: "fade", 
    autoplay: {
        delay: 4000, 
        disableOnInteraction: false 
    },
    breakpoints: {
        767: {
            direction: 'horizontal', 
        },
    },
    pagination: {
		el: '.swiper-pagination',
        type: 'bullets',
        clickable: true,
    },
    scrollbar: {
		el: '.swiper-scrollbar',
		hide: false,
		draggable: true
	},
    speed: 4000, 
  });

補足情報（FW/ツールのバージョンなど）

IEに反映させるため、swiperはバージョン4.5.1を使用しています。

breakpointsで変更できる方法、またはそれ以外で変更できる方法がありましたら、ご回答いただけますと幸いです。

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

Answer 1

こちら解決しました。