У меня есть некоторая проблема, отображающая галерею картинок под demo-wrapper, я бы в идеале хотел бы отображать изображения бок о бок (горизонтальной) и иметь возможность скользить между ними без кнопок. Я не смог сделать это с Flex, поэтому теперь я пытаюсь сделать это с JavaScript. В настоящее время мой справочный скрипт имеет кнопки на основе стрелки, чтобы изменить изображения между изображениями, но я к сожалению, не могу контролировать изображения, и я не могу найти мою ошибку / с.

Я бы полюбил предложения над тем, как выполнить это со сценарием ниже или альтернативой для достижения.

HTML:

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="UTF-8">
      <head>
        <a name="top"></a>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>スタジオ</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

        <script>
        $(document).ready(function() {
          Slider = $('#slider').Swipe({
            auto: 3000,
            continuous: true
          }).data('swipe');
          $('.next').on('click', Slider.next);
          $('.prev').on('click', Slider.prev);
        });
        </script>
      </head>

    <body>
      <div class="banner">スタジオ</div>
      <div class="header">NAME<br>LASTNAME.</div>

      <div class="pofabut">About</div>

      <div class="contact-social">

        <div class='github'>
              <a href="https://github.com/user" alt="github" target="_blank">
              <img width="19px" src="components/img/github.svg"/> </a>
        </div>

        <div class='instagram'>
          <a href="https://www.instagram.com/user" alt="instagram" target="_blank">
          <img width="20"  src="components/img/instagram.png"/> </a>
        </div>

        <div class='email'>
              <a href="mailto:email" alt="email" target="_blank">
              <img width="25px" src="components/img/email.png"/> </a>
        </div>

        <div class='linkedin'>
              <a href="" alt="linkedin-user" target="_blank">
              <img width="20px" src="components/img/linkedin.svg"/> </a>
        </div>
      </div>

      <div class="image-one">&nbsp;
         <img src="components/img/001.png" alt="landing_page_one"></div>
      <div class="circle">




      <div class="wd-name">01 DESIGN</div>

      <div class="demo-wrapper">
        <div id="slider" class="swipe">
          <div class="swipe-wrap">
            <div>
              <img src="components/img/wb-001.png" width="520" height="725">
            </div>
            <div>
              <img src="components/img/wb-002.png" width="520" height="725">
            </div>
            <div>
              <img src="components/img/wb-003.png" width="520" height="725">
            </div>
          </div>
          <span class="nav prev">Prev</span>
          <span class="nav next">Next</span>
        </div>
      </div>



    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
    </html>

CSS:

            html,body {
                margin: 0;
                padding: 0;
                height: 100%;
                overflow-x: hidden; 
            }

            @font-face{
                font-family:"shapiro-97-air-extd";
                src:url("https://fontsme.com/wp-data/s/566/15566/file/ogj-type-design-shapiro-97-air-extd.otf") format("woff"),
                url("https://fontsme.com/wp-data/s/566/15566/file/ogj-type-design-shapiro-97-air-extd.otf") format("opentype"),
                url("https://fontsme.com/wp-data/s/566/15566/file/ogj-type-design-shapiro-97-air-extd.otf") format("truetype");
            }
            @font-face {
              font-family: 'SHR97';
              src: url('components/typefaces/SHR97.otf') format('otf'),
            }
            @font-face {
              font-family: 'STT55';
              src: url('components/typefaces/STT55.otf') format('otf'),
            }
            /*Stem - Medium*/
            @font-face {
              font-family: 'STT65';
              src: url('components/typefaces/STT65.woff2') format('woff2');
            }
            /*Stem - bold*/
            @font-face {
                font-family: 'STT75';
                src: url('components/typefaces/STT75.woff2') format('woff2');
                }
            /*TTNorms - Thin*/
            @font-face {
                font-family: 'TTN45';
                src: url('components/typefaces/TTN45.woff2') format('woff2');
                }
            /*TTNorms - Regular*/
            @font-face {
                font-family: 'TTN55';
                src: url('components/typefaces/TTN55.otf') format('otf');
                }
            /*TTNorms - Medium*/
            @font-face {
                font-family: 'TTN65';
                src: url('components/typefaces/TTN65.otf') format('otf');
                }
            /*Avenir - RegularRoman*/
            @font-face {
                font-family: 'AV55';
                src: url('components/typefaces/AV55.woff2') format('woff2');
                }
            /*Avenir - DemiBold*/
            @font-face {
                font-family: 'AV65';
                src: url('components/typefaces/AV65.woff2') format('woff2');
                }

            .banner {
                font-family: 'STT55', sans-serif;
                font-style: normal;
                font-size: 1em;
                position: relative;
                left: 40px;
                top: 40px; 

            }

            .header { position: relative;
                font-family: 'shapiro-97-air-extd', sans-serif;
                font-size: 7.4em;
                letter-spacing: 0.8px;
                font-stretch: condensed;
                color:#D18B30;

                left: 90px;
                top: 360px; 
                margin: 0;
                padding: 0;
                z-index:-1;
            }

            .pofabut {
                font-family: 'TTN65', sans-serif;
                text-transform: uppercase;
                font-size: 0.7em;
                letter-spacing: 1px;
                line-height: 1.5;

                position: relative;
                left: 40px;
                top: 450px; 
            }

            .contact-social {
                display: flex;
                transform: translate(35px, 250px)}
            .instagram{
              margin: 5px;
              line-height: 90px;
              float: left; }
            .email{
              margin: 5px;
              line-height: 90px; }
            .github{
              margin: 5px;
              line-height: 90px; }
            .linkedin{
              margin: 5px;
              line-height: 90px;
            }

            .image-one { position: relative;
                left: 1050px;
                top: -400px;
                z-index:-3; }


            .circle{
                position: relative;
                width: 150px;
                height: 150px;
                background: url("components/img/002.png"); no-repeat;
                left: 700px;
                top:-550px;
            }
            .circle:hover{
                background: url("components/img/003.png"); no-repeat;}

            .first-footer-menu {
                font-family: 'TTN65', sans-serif;
                font-size: 0.9em;
                letter-spacing: 1px;
                line-height: 1.5;

                position: relative;
                left: 40px;
                top: 500px; }


            .wd-name{
                font-family: 'STT65', sans-serif;
                font-size: 3em;
                transform: translate(-610px, 400px);
            }

            .swipe {
              position: relative;
              max-width: 520px;
              width: 100%;
              height: 725px;
              margin: 100px auto 0;
            }

            .swipe-wrap {
              position: relative;
            }

            .swipe-wrap > div {
              float: left;
              width: 100%;
              position: relative;
            }

            .swipe .nav {
                position: absolute;
                width: 80px;
                height: 38px;
                z-index: 10;
                text-align: center;
                line-height: 40px;
                display: inline-block;
                color: #fff;
                top: 45%;
                cursor: pointer;
                background-color: rgba(0,0,0,0.8)
            }

            .swipe .nav.next {
                right: 0;
                -webkit-border-radius: 3px 0 0 3px;
                border-radius: 3px 0 0 3px;
            }

            .swipe .nav.prev {
                -webkit-border-radius: 0 3px 3px 0;
                border-radius: 0 3px 3px 0;
            }
1
marcoantonio123456 25 Сен 2019 в 19:31

1 ответ

Лучший ответ

Вам нужно добавить библиотеку слайдер, прежде чем называть это. Ваш код должен быть как следующий

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>スタジオ</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="banner">スタジオ</div>
    <div class="header">NAME
        <br>LASTNAME.</div>

    <div class="pofabut">About</div>

    <div class="contact-social">

        <div class='github'>
            <a href="https://github.com/user" alt="github" target="_blank">
                <img width="19px" src="components/img/github.svg" /> </a>
        </div>

        <div class='instagram'>
            <a href="https://www.instagram.com/user" alt="instagram" target="_blank">
                <img width="20" src="components/img/instagram.png" /> </a>
        </div>

        <div class='email'>
            <a href="mailto:email" alt="email" target="_blank">
                <img width="25px" src="components/img/email.png" /> </a>
        </div>

        <div class='linkedin'>
            <a href="" alt="linkedin-user" target="_blank">
                <img width="20px" src="components/img/linkedin.svg" /> </a>
        </div>
    </div>

    <div class="image-one">&nbsp;
        <img src="components/img/001.png" alt="landing_page_one"></div>
    <div class="circle">

        <div class="wd-name">01 DESIGN</div>

        <div class="demo-wrapper">
            <div id="slider" class="swipe">
                <div class="swipe-wrap">
                    <div>
                        <img src="components/img/wb-001.png" width="520" height="725">
                    </div>
                    <div>
                        <img src="components/img/wb-002.png" width="520" height="725">
                    </div>
                    <div>
                        <img src="components/img/wb-003.png" width="520" height="725">
                    </div>
                </div>
                <span class="nav prev">Prev</span>
                <span class="nav next">Next</span>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="//cdn.jsdelivr.net/gh/lyfeyaj/swipe/swipe.js"></script>
        <script>
            $(document).ready(function() {
                Slider = $('#slider').Swipe({
                    auto: 3000,
                    continuous: true
                }).data('swipe');
                $('.next').on('click', Slider.next);
                $('.prev').on('click', Slider.prev);
            });
        </script>
</body>

</html>

Я удалил ненужные файлы JS, вы можете добавить их, если вам нужны они в других частях страницы.

Я создал суть для вас на следующем URL

https://gist.github.com/sgssandhu/5df852e95402784d63210f8016100060

Не стесняйтесь комментировать, если у вас все еще есть какие-либо проблемы

2
SGS Sandhu 25 Сен 2019 в 17:11