jQuery caoursel滑块没有更新窗口大小的宽度

时间：2018-05-06 15:22:23

标签： javascript jquery html css slider

我最近在我的页面上添加了一个滑块，经过一些调整之后，除了一个问题之外它还可以正常工作 - 当我调整窗口大小时，特别是让它变小，滑块不再居中并且在Firefox上分辨率低箭头在窗口外面，这里是滑块的代码

＆＃13;
＆＃13; 
$(function () {

console.log('DOM1');
$(document).ready(function () {


        var speed = 6000;
        var run = setInterval(rotate, speed);
        var slides = $('.slide');
        var container = $('#slides ul');
        var width = $('#slides ul');
        var elm = container.find(':first-child').prop("tagName");
        var item_width = container.width();
        var prev = 'prev'; //id of previous button
        var next = 'next'; //id of next button


        slides.width(item_width); //set the slides to the correct pixel width
        container.parent().width(item_width);
        container.width(slides.length * item_width); //set the slides container to the correct total width
        container.find(elm + ':first').before(container.find(elm + ':last'));
        resetSlides();



        $('#buttons a').click(function (e) {


            if (container.is(':animated')) {
                return false;
            }
            if (e.target.id === prev) {
                container.stop().animate({
                    'left': 0
                }, 1000, function () {
                    container.find(elm + ':first').before(container.find(elm + ':last'));
                    resetSlides();
                });
            }

            if (e.target.id === next) {
                container.stop().animate({
                    'left': item_width * -2
                }, 1000, function () {
                    container.find(elm + ':last').after(container.find(elm + ':first'));
                    resetSlides();
                });
            }


            return false;

        });

        $('#carousel').mouseenter(function () {
            clearInterval(run);
        }).mouseleave(function () {
            run = setInterval(rotate, speed);
        });


        function resetSlides() {
            container.css({
                'left': -1 * item_width
            });
        }

    });

    function rotate() {
        $('#next').click();
    }
});
＆＃13; 
#carousel {
 position: relative;
 width:100%;
 margin-top: 10px;
 flex-basis: 100%;
 display: flex;
 justify-content: center;
}
   .btn-bar{
 position: absolute;
 width: 100%;
 @media only screen and (max-width: 1200px) {
width: 100%;
 }
    z-index: 4;
  }
  #buttons a {
 position: absolute;
 text-align:center;
 display:block;
 font-size:50px;
 float:left;
 outline:0;
 margin:-50px 60px;
 color:#FFFFFF;
 text-decoration:none;
 padding:9px;
 width:35px;
  }
a#prev{
 cursor: pointer;
 left: 0;
 width: 40px;
 height: 40px;
 border-bottom: 1px solid white;
 border-left: 1px solid white;
 transform: rotate(45deg);
 @media only screen and (max-width: 720px) {
   display: none;
  }
}
a#next{
 cursor: pointer;
 right: 0;
 width: 40px;
 height: 40px;
 border-top: 1px solid white;
 border-right: 1px solid white;
 transform: rotate(45deg);
    @media only screen and (max-width: 720px) {
   display: none;
 }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<title>OHIR &mdash; Imprint Media</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="shortcut icon" href="images/3d5bb643659eb0b2a80acbe35c5073e5.png">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <header>
        <div class="container">
        <div class="logo" id="OVERLAY"></div>
        <div class="ohir"><p class="col">OHIR</p></div>
        <nav class="col">
            <a href="#STORY">Książka</a>
            <a href="#FRAGMENT">Fragment</a>
            <a href="#AUTHOR">Autor</a>
            <button>KUPUJĘ</button>
        </nav>
    </div>
    <section class="OVERLAY hidden">
        <a>MODERNIST CUISINE</a>
        <a>IMPRINT MEDIA</a>
        <a>WYDAWNICTWO BARBELO</a>
        <button onclick="hideOverlayFunction()">POWRÓT</button>
    </section>
</header>

<main>
    <button onclick="topFunction()" id="myBtn" title="Go to top"><img src="images/arrow_up.svg"></button>
    <section class="container OHIR">
        <p>OHIR</p>
    </section>

    <section class="container ONBOARD">
        <div class="book"></div>
        <!--<img class='col' src="images/62d204dec2048b53e33842d869865586.png">-->
        <div class="border">
            <p> > Witaj na pokładzie Ohira.</p>
            <p> > Kiedy będziesz gotowy na podróż w nieznane?</p>
            <button>KUPUJĘ</button>

        </div>
        <div id="carousel">
            <div class="btn-bar">
                <div id="buttons"><a id="prev" onclick="prevFunction()"></a><a id="next" onclick="nextFunction()"></a> </div>
            </div>
            <div id="slides">
                <ul>
                    <li class="slide">
                        <div class="quoteContainer">
                            <p class="quote-phrase">Tak bardzo chciałbym odrodzić się jako Ohir.</span>

                            </p>
                        </div>
                        <div class="authorContainer">
                            <p class="quote-author HAL">HAL 9000</p>
                        </div>
                    </li>
                    <li class="slide">
                        <div class="quoteContainer">
                            <p class="quote-phrase">
                                Po przeczytaniu Ohira zbudowałem mój pierwszy ścigacz.</p>
                        </div>
                        <div class="authorContainer">
                            <p class="quote-author">Anakin Skywalker</p>
                        </div>
                        <div class="counter">
                        </div>
                    </li>
                    <li class="slide">
                        <div class="quoteContainer">
                            <p class="quote-phrase"></span>Chciałbym, żeby mój następny statek był taki, jak Ohir.</p>
                        </div>
                        <div class="authorContainer">
                            <p class="quote-author">Kapitan Jean-Luc Picard</p>
                        </div>
                        <div class="counter">
                        </div>
                    </li>
                    <li class="slide">
                        <div class="quoteContainer">
                            <p class="quote-phrase">Gdybym znów miał walczyć z cylinami, chciałbym mieć Ohira we flocie.</p>
                        </div>
                        <div class="authorContainer">
                            <p class="quote-author">Admirał William Adama</p>
                        </div>
                    </li>
                </ul>

            </div>
            <div class="counter">
                <span class="dot active"></span>
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
            </div>
        </div>
    </section>

    <a class="anchor" id="STORY"></a>
    <section class="container STORY">
        <video id="videoStory" onpause="pauseFunction()">
            <source src="video/Ohir_fb%20video%20cover.mp4" type="video/mp4">
        </video>
        <button onclick="playFunction()" id="playBtn" title="play video">OHIR, OPOWIEDZ MI O&nbsp;KSIĄŻCE</button>
    </section>

    <section class="container FRAGMENT">
        <a class="anchor" id="FRAGMENT"></a>
        <div class="book"></div>
        <div class="col">
            <h3>ZAINTERESOWANY?</h3>
            <p>Przeczytaj darmowy fragment i&nbsp;dowiedz się jak zaczyna się przygoda z&nbsp;Ohirem. Wpisz swój adres e-mail, aby otrzymać PDF</p>
            <!--<input type="email" placeholder="e-mail">-->
            <form action="http://YOURWEBSITE/index.php?option=com_acymailing&ctrl=sub" method="post">
                <input id="user_email"   type="text" name="user[email]" value="" placeholder="e-mail" />
            </form>
            <button>PROSZĘ O FRAGMENT</button>
        </div>
        <div class="AUTHOR">
            <a class="anchor" id="AUTHOR"></a>
            <h3>SZCZEPAN AUGUST URAWSKI</h3>
            <span><p>Autor Ohira. Urodzony drogą naturalną w&nbsp;Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i&nbsp;pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i&nbsp;fascynująca powieść SF.</p></span>
        </div>
    </section>
    <section class="mobile author">
        <div class="mobileAUTHOR">
            <h3>SZCZEPAN AUGUST URAWSKI</h3>
            <span><p>Autor Ohira.<br> Urodzony drogą naturalną w&nbsp;Warszawie, niemodyfikowany, bez dotacji unijnych. Rocznik 1983. Losy poprowadziły go ku ziemiom obcym, gdzie pracuje, tęskni, marzy i&nbsp;pisze. Pisał od kiedy pamięta. Bywały to scenariusze. Ku jego zaskoczeniu powstała też ogromna i&nbsp;fascynująca powieść SF.</p></span>
        </div>
    </section>

    <section class="container SHOP">
        <div class="book"></div>
        <div class="border">
            <h3>KUP KSIĄŻKĘ</h3>
            <span> > Piękne wydanie Ohira</span>
            <span> > 432 strony tekstu</span>
            <span> > Sprawna i&nbsp;tania wysyłka kurierska za 9.90</span>
            <h2 class="price">30 PLN</h2>
            <button>KUPUJĘ</button>
        </div>
    </section>

    <section class="container FOUR">
        <div class="book"></div>
        <div class="border">
            <h3>ZESTAW CZTERECH KSIĄŻEK</h3>
            <span> > Cztery książki drukowane</span>
            <span> > 432 stron każda</span>
            <span> > Sprawna i&nbsp;tania wysyłka kurierska za 9.90</span>
            <div class="priceROW"><h2 class="price">99 PLN </h2><button>KUPUJĘ</button></div>

        </div>
    </section>

</main>

<footer>
    <img class="col" src="./images/Imprint%20Media_logo.svg">
    <span>
        <p><b>Imprint Media Agencja Wydawnicza</b></p>
        <p>ul. Chmielna 2/31</p>
        <p>00-020 Warszawa</p>
    </span>
    <div class="line"></div>
    <span>
        <p>Znajdź nas na Facebooku!</p>
        <p>tel. 22 24 15018</p>
        <p>sklep@imprintmedia.pl</p>
    </span>
    <div class="line"></div>
    <span>
        <p>Jak wydać książkę?</p>
        <p>Poznaj ofertę Imprint Media</p>
        <p>Projektowanie i&nbsp;dystrybucja książek</p>
    </span>
</footer>
</body>
＆＃13;
＆＃13;
＆＃13;

我真的需要帮助，如果有人能帮助我，那就太好了。

谢谢！

0 个答案:

没有答案
相关问题
最新问题