Использую
idangero.us/swiper/#.WKvYbDuLRhE
Нужно сделать пункт меню при нажатии на который сайт прокрутится до нужного блока по вертикали и отобразится нужный слайд по горизонтали.
К примеру, чтобы открылся
<div class="design-slide" style="background-image: url('images/design/3.jpg')" data-id="4" id="slide-design-4"></div>
ниже код
<div class="swiper-container main-slider">
<div class="swiper-wrapper main-swiper-wrapper">
<!--===================================================== section heading -->
<div class="swiper-slide main-slider-slide" id="slide-heading">
<div class="sect section-heading">
<div class="swiper-container heading-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="heading-slide i-1" style="background-image: url('images/heading-slide-1.jpg');">
</div>
</div>
<div class="swiper-slide">
<div class="heading-slide i-1" style="background-image: url('images/heading-slide-4.jpg');">
</div>
</div>
<div class="swiper-slide">
<div class="heading-slide i-5" style="background-image: url('images/heading-slide-5.jpg');">
</div>
</div>
<div class="swiper-slide">
<div class="heading-slide i-3" style="background-image: url('images/heading-slide-3.jpg');">
</div>
</div>
</div>
</div>
<div align="center" class="mainlogo">
<img src="images/logo-ihlas.png" alt=" ">
</div>
<!--<marquee width="100%" scrollamount="15" class="ticker1">Бегущая строка !!!</marquee>-->
</div>
</div>
<!--===================================================== section location -->
<!--===================================================== section design -->
<div class="swiper-slide main-slider-slide dark" id="slide-design">
<div class="sect section-design">
<div class="design-slider">
<div class="design-slide" style="background-image: url('images/design/6.jpg')" data-id="1" id="slide-design-1"></div>
<div class="design-slide" style="background-image: url('images/design/1.jpg')" data-id="2" id="slide-design-2"></div>
<div class="design-slide" style="background-image: url('images/design/2.jpg')" data-id="3" id="slide-design-3"></div>
<div class="design-slide" style="background-image: url('images/design/3.jpg')" data-id="4" id="slide-design-4"></div>
<div class="design-slide" style="background-image: url('images/design/4.jpg')" data-id="5" id="slide-design-5"></div>
<div class="design-slide" style="background-image: url('images/design/5.jpg')" data-id="6" id="slide-design-6"></div>
</div>
<div class="design-navigation-block">
<div class="slider-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="custom-owl-prev design-prev">
<svg class="svg-icon icon-arrow-left" xmlns="http://www.w3.org/2000/svg" width="9.938"
height="16.5"
viewBox="0 0 9.938 16.5">
<path class="icon-arrow-right-path" fill-rule="evenodd" clip-rule="evenodd"
d="M132.546,1866.37l-1.419-1.38,7.119-6.93-7.01-6.82,1.406-1.36,8.432,8.2Z"
transform="translate(-131.125 -1849.88)"/>
</svg>
</div>
<div class="custom-owl-next design-next">
<svg class="svg-icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="9.938"
height="16.5"
viewBox="0 0 9.938 16.5">
<path class="icon-arrow-right-path" fill-rule="evenodd" clip-rule="evenodd"
d="M132.546,1866.37l-1.419-1.38,7.119-6.93-7.01-6.82,1.406-1.36,8.432,8.2Z"
transform="translate(-131.125 -1849.88)"/>
</svg>
</div>
</div>
</div>
</div>
<!--===================================================== section example -->
<div class="swiper-slide main-slider-slide" id="slide-example">
<div class="sect section-example">
<div class="example-slider">
<div class="example-slide" style="background-image: url('images/example/1.jpg')" data-id="1"></div>
<div class="example-slide" style="background-image: url('images/example/2.jpg')" data-id="2"></div>
<div class="example-slide" style="background-image: url('images/example/3.jpg')" data-id="3"></div>
<div class="example-slide" style="background-image: url('images/example/8.jpg')" data-id="4"></div>
<div class="example-slide" style="background-image: url('images/example/9.jpg')" data-id="5"></div>
</div>
<div class="example-navigation-block">
<div class="slider-counter">
<span class="current"></span>
<span class="total"></span>
</div>
<div class="custom-owl-prev example-prev">
<svg class="svg-icon icon-arrow-left" xmlns="http://www.w3.org/2000/svg" width="9.938"
height="16.5"
viewBox="0 0 9.938 16.5">
<path class="icon-arrow-right-path" fill-rule="evenodd" clip-rule="evenodd"
d="M132.546,1866.37l-1.419-1.38,7.119-6.93-7.01-6.82,1.406-1.36,8.432,8.2Z"
transform="translate(-131.125 -1849.88)"/>
</svg>
</div>
<div class="custom-owl-next example-next">
<svg class="svg-icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="9.938"
height="16.5"
viewBox="0 0 9.938 16.5">
<path class="icon-arrow-right-path" fill-rule="evenodd" clip-rule="evenodd"
d="M132.546,1866.37l-1.419-1.38,7.119-6.93-7.01-6.82,1.406-1.36,8.432,8.2Z"
transform="translate(-131.125 -1849.88)"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
