Попытка внедрить swiper в код моего сайта для жестов навигации - PullRequest
Новая
       6

Попытка внедрить swiper в код моего сайта для жестов навигации

1 голос
/ 05 января 2020

Я хотел реализовать swiper. js Навигация по коду моего сайта, но я делаю что-то не так, потому что он не работает. Я хочу, чтобы на мобильном телефоне можно было менять страницы жестом смахивания.

Шаги, которые я сделал:

1) $ npm установить swiper

2) 

<link rel="stylesheet" href="path/to/swiper.min.css">

и 

<script src="path/to/swiper.min.js"></script>

3) 

<div class="swiper-container">
            <div class="swiper-wrapper">
                <header class="main-head">
                        <img src="logo.svg" height="100%"></img>
                </header>
                <nav class="main-nav">
                    <ul>
                        <li><a href="index.html" class="swiper-slide">Page 1</a></li>
                        <li><a href="page2.html" class="swiper-slide">Page 2</a></li>
                        <li><a href="page3.html" class="swiper-slide">Page 3</a></li>
                    </ul>
                </nav>

4) 

.swiper-container {
    width: 100%;
    height: 100%;
}

5) 

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,

6) 

.swiper-wrapper{display:grid;grid-template-columns:repeat(auto-fill, minmax(3, 1fr));grid-template-rows:repeat(2,auto) 4fr auto;grid-column-gap:0;grid-row-gap:0;height:100vh}

Заранее спасибо! PS Я скачал файлы swiper.min. js $ swiper.min. css в папку моего сайта.

...