bx-sliderでPCとSPで画像の切り替えをしたら一部オプションが使えなくなった。

Question

bx-sliderでスライダーを作成しているのですが、PCとSPで別の画像を表示するために、cssで該当箇所をvisibility: hidden;して、jQueryで表示切り替えをしたら、一部オプションが使えなくなってしまいました。

• goToSlide();
• goToPrevSlide();
• goToNextSlide();

こちらのオプションを使うには、どうしたらいいでしょうか...
cssでvisibility: hidden;する方法がよくないのでしょうか。

よろしくお願いします。

<section class="keyvisual slider" id="slider">
          <div class="keyvisual__main slider-wrap">
            <div class="slider-wraper">
              <div class="bx-wrapper">
                <div class="bx-viewport">
                  <ul class="bxslider bxslider-pc">
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual04_pc.jpg" alt="keyvisual-04"></a></li>
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual01_pc.jpg" alt="keyvisual-01"></a></li>
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual02_pc.jpg" alt="keyvisual-02"></a></li>
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual03_pc.jpg" alt="keyvisual-03"></a></li>
                  </ul>
                  <ul class="bxslider bxslider-sp">
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual01_sp.jpg" alt="keyvisual-01"></a></li>
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual02_sp.jpg" alt="keyvisual-02"></a></li>
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual03_sp.jpg" alt="keyvisual-03"></a></li>
                    <li><a href="javascript:void(0);"><img class="switch" src="img/keyvisual/keyvisual04_sp.jpg" alt="keyvisual-04"></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="bx-controls">
            <div class="bx-controls-direction"><a class="bx-prev" href="javascript:void(0)"><img src="img/btn/btn_prev.png"></a><a class="bx-next" href="javascript:void(0)"><img src="img/btn/btn_next.png"></a></div>
          </div>
          <div>
            <ul class="keyvisual__nav wrapper">
              <li><a href=""><img src="img/keyvisual/keyvisual__nav-01.png" alt="PICKUP 01">
                  <p>あああああ</p></a></li>
              <li><a href=""><img src="img/keyvisual/keyvisual__nav-02.png" alt="PICKUP 02">
                  <p>いいいいい</p></a></li>
              <li><a href=""><img src="img/keyvisual/keyvisual__nav-03.png" alt="PICKUP 03">
                  <p>うううううう</p></a></li>
              <li><a href=""><img src="img/keyvisual/keyvisual__nav-04.png" alt="PICKUP 04">
                  <p>えええええ</p></a></li>
            </ul>
          </div>
        </section>

.slider {
	#slider {
		width: 100%;
		height: 100%;
		min-height: 500px;
		overflow: hidden;
		position: relative;
	}
	.slide-wrap {
		height: 400px;
		position: absolute;
		@include pc {
			width: 1920px;
			left: 50%;
			margin-left: -960px;
		}
	}
	.bx-viewport {
		visibility: hidden;
	}
	.bx-controls {
		position: absolute;
		z-index: 100;
		@include pc {
			width: 1020px;
			top: 0;
			left: 50%;
			margin-left: -320px;
		}
		img {
			@include pc {
				display: none;
			}
			@include sp {
				// width: 50px;
			}
		}
		a.bx-prev {
			@include pc {
				left: -1209px;
			}
			@include sp {
				left: 191px;
			}
		}
		a.bx-next {
			@include pc {
				right: -835px;
			}
			@include sp {
				right: -256px;
			}
		}
	}
	.bx-controls-direction {
		max-width: 100%;
		top: 0;
		position: absolute;
		@include sp {
			min-width: 1020px;
		}
		@include sp {
			min-width: 100%;
			padding: 20px 0;
		}
		a {
			position: absolute;
			width: 100%;
			display: block;
			z-index: 9999;
		}
	}
	.bx-pager {
		text-align: center;
		clear: both;
		display: block;
		position: relative;
		top: 320px;
		.bx-pager-item {
			line-height: 1;
			height: 40px;
			width: 40px;
			overflow: hidden;
			display: inline-block;
			margin:10px 2px 0 2px;
			 a {
				background-color: #ccc;
				display: block;
				padding-top: 50px;
				display: block;
				&.active {opacity:0.5;}
				&:hover {opacity:0.3;}
			}
		}
	}
	.result {
		padding: 30px;
		margin: 30px;
		border: 1px solid #F1F1F1;
		font-size: 12px;
		span {
			display: block;
			margin-top: 1em;
		}
		p {
			margin-bottom: 1em;
			font-weight: bold;
			font-size: 14px;
		}
		.slide {
			width: 300px !important;
			position: static !important;
			float:none !important;
		}
	}
}

.keyvisual {
	max-width: 1920px;
	margin: 0 auto;
	@include sp {
		border-bottom: 3px solid $text__base;
	}
	.slider-wraper {
		position: absolute;
		@include pc {
			width: 1020 * 3 + px;
			margin-left: -1020 * 1.5 + px;
			left: 50%;
		}
		@include sp {
			width: 100* 3 + %;
			height: auto;
		}
	}
	.bxslider {
		li {
			margin: 0 1px;
		}
	}
	.keyvisual__main {
		width: 100%;
		overflow: hidden;
		position: relative;
		@include pc {
			height: 510px;
		}
		@include sp {
			min-height: 320px;
		}
		ul {
		    position: relative;
		}
		li {
			float: left;
		    list-style: none;
		    position: relative;
			height: 100%;
			@include pc {
				width: 1020px;
			}
		}
	}
	.keyvisual__nav {
		@include pc {
			padding: 8px 0 64px 0;
			position: relative;
			overflow: hidden;
			ul {
				position: relative;
				left: 50%;
				float: left;
			}
			li {
				width: 250px;
				margin: 0 2px;
				border-top: 6px solid $color__base;
				position: relative;
				float: left;
				a:hover, a:active,a:focus {
					border-top: 6px solid #444;
				}
			}
			img {
				padding: 10px 16px 0 0;
				float: left;
			}
			p {
				padding-top: 10px;
			}
		}
		@include sp {
			li {
				width: 180px;
				padding: 10px;
			}
			img {
				width: 40px;
				padding: 10px 5px;
				float: left;
				overflow: hidden;
			}
			p {
				padding: 10px 0;
				overflow: hidden;
			}
		}
	}
}

$(document).ready(function(){
	var slider = $('.bxslider').bxSlider({
		pager: false,
		auto: true,
		slideWidth: 1020,
		touchEnabled: true,
		minSlides: 3,
		maxSlides: 3,
		moveSlides: 1,
		slideMargin: 0
	});

	$(".keyvisual__nav a").on({
		"click": function(event) {
			event.preventDefault();
			var index = $(event.currentTarget).parent().index();
			slider.stopAuto();
			slider.goToSlide(index);
			slider.startAuto();
		}
	});

	$(".bx-prev").on({
		"click": function() {
			slider.goToPrevSlide();
		}
	});

	$(".bx-next").on({
		"click": function() {
			slider.goToNextSlide();
		}
	});

	var $setElem = $('.switch'),
	pcName = '_pc',
	spName = '_sp',
	replaceWidth = 768;

	$setElem.each(function() {
		var $this = $(this);
		function imgSize() {
			if(window.innerWidth > replaceWidth) {
				$this.attr('src', $this.attr('src').replace(spName,pcName)).css({visibility: 'visible'});
			} else {
				$this.attr('src', $this.attr('src').replace(pcName,spName)).css({visibility: 'visible'});
			}
		}
		$(window).resize(function() {imgSize();});
		imgSize();
	});
});

Answer 1

SCSSは詳しくないので、CSSで記入すると下記のようにブレイクポイントを作ってあげるのはダメでしょうか？
これで一応いけました

またvisibility:hiddenについて記事があったので載せておきます。
display:none と visibility:hidden の違い

@media(max-width:500px) {
	.bxslider-pc{
		display: none;
	}