Когда я нажимаю материализовать изображение карусели, карусель вращается вместо открытия ссылки - PullRequest
Новая
       18

Когда я нажимаю материализовать изображение карусели, карусель вращается вместо открытия ссылки

0 голосов
/ 31 октября 2019

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

Я бы хотел, чтобы он не прокручивался при нажатии, а только принажать и перетащить. Также хотелось бы, чтобы ссылка работала одним касанием на мобильном телефоне.

Я попытался добавить больше строк, изменить размер заголовков, изменить минимальную высоту карусели, используя z-index.

Вот ссылка на сайт: https://vellios -professional-portfolio.herokuapp.com / projects.html

Вот ссылка на полный репо: https://github.com/TheGreekCuban/Alexander-Vellios-Portfolio

ОБНОВЛЕНИЕ: Я заметил, что щелчок работает должным образом, если я щелкаю изображение влево в фокусе. Но, очевидно, я не ожидаю, что пользователь щелкнет вокруг, пока они не поймут это. Мне нужно, чтобы он работал над изображением в фокусе.

Карусель html: 

<div class= "carousel" id="fs">
        <h4>Full Stack Applications</h4>
        <a class="carousel-item" href="https://bleauwonder.github.io/renegades-of-silicon-alley/"><img src="../img/compass.jpg" class="responsive-img">
            <h6 class= "carouselTitle white-text">Renegade TrailBrews</h6>
        </a>
        <a class="carousel-item" href="https://shrouded-brushlands-82538.herokuapp.com/"><img src="../img/weardrobedb.png" class="responsive-img">
            <h6 class= "carouselTitle white-text">WeardrobeDB</h6>
        </a>
        <a class="carousel-item" href="https://burgerbar-alexander.herokuapp.com/"><img src="https://i.gifer.com/IaCK.gif" class="responsive-img">
            <h6 class= "carouselTitle white-text">Burger Bar</h6>
        </a>
        <a class="carousel-item" href="https://scrape-oholic.herokuapp.com/"><img src="../img/scrape.gif" class="responsive-img">
            <h6 class= "carouselTitle white-text">The Real News Scraper</h6>
        </a>
    </div>


    <div class="carousel" id="mp">
        <h4>Mini-Projects (Desktop Only)</h4>
        <a class="carousel-item" href="https://thegreekcuban.github.io/Star-Wars-RPG/"><img src="../img/SW.jpg">
            <h6 class= "carouselTitle white-text">Star Wars RPG</h6>
        </a>
        <a class="carousel-item" href="https://thegreekcuban.github.io/TriviaGame/"><img src="../img/got.jpeg">
            <h6 class= "carouselTitle white-text">GOT Trivia</h6>
        </a>
        <a class="carousel-item" href="https://thegreekcuban.github.io/Hangman/"><img src="../img/Hangman_game.gif">
            <h6 class= "carouselTitle white-text">Word Guess Game</h6>
        </a>
        <a class="carousel-item" href="https://thegreekcuban.github.io/API-Homework/"><img src="../img/travel.gif">
            <h6 class= "carouselTitle white-text">Gif Generator</h6>
        </a>
        <a class="carousel-item" href="https://thegreekcuban.github.io/Train-Scheduler-App/"><img src="../img/train.gif">
            <h6 class= "carouselTitle white-text">Train Scheduler</h6>
        </a>
        <a class="carousel-item" href="https://thegreekcuban.github.io/liri-node-app/"><img src="../img/liri.png">
            <h6 class= "carouselTitle white-text">Liri Node App</h6>
        </a>
        <a class="carousel-item" href="https://thegreekcuban.github.io/Bamazon/"><img src="../img/bamazon.gif">
            <h6 class= "carouselTitle white-text">Bamazon Node Store</h6>
        </a>
        <a class="carousel-item" href="https://alexander-friend-finder.herokuapp.com/"><img src="../img/facebook.png" class="responsive-img">
            <h6 class= "carouselTitle white-text">GOT Friend Finder</h6>
        </a>
</div>

Карусель Javascript: 

$(document).ready(function(){
    $('.sidenav').sidenav();
    $('.carousel').carousel({
      indicators: true
    });
  });

Карусель CSS: 

body, html {
    height: 100%;
}

body {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    margin: 0;
    display: grid;
    grid-template:  "nav nav nav nav"
                    "fs fs mp mp"
                    "fs fs mp mp"
                    "fs fs mp mp"
                    "footer footer footer footer";
    grid-template-rows: repeat(5, minmax(auto, 1fr));
    grid-template-columns: repeat(4, 1fr);
    background-color: #3A3A3A;
}

#navContainer {
    margin: 0 5% 0 5%;
    font-family: 'Cinzel', serif;
}

#fs {
    grid-area: fs;
    text-align: center;
    color: white;
}

#mp {
    grid-area: mp;
    text-align: center;
    color: white;
}

nav {
    background-color: #107C10;
    color: #3A3A3A;
    border-bottom: 3px solid #3A3A3A;
    grid-area: nav;
}

#footer {
    text-align: center;
    font-family: 'Cinzel', serif;
    background-color: #107C10;
    color: #3A3A3A;
    border-top: 3px solid #3A3A3A;
    grid-area: footer;
    margin-top: auto;
}

Нет ошибок, я просто хочупростой щелчок, чтобы открыть основную ссылку вместо прокрутки. Я использую Google Chrome, если это имеет значение.

...