Сова Карусель не отзывчива и не умещается на экране, если я использую маленький компьютер - PullRequest
Новая
       19

Сова Карусель не отзывчива и не умещается на экране, если я использую маленький компьютер

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

html

<html>
<head>
        <meta charset="utf-8">
        <title>Owl carousel slider</title>
        <link rel="stylesheet" href="/new/owl.carousel.min.css">
        <link rel="stylesheet" href="/new/owl.theme.default.min.css">
        <style type="text/css">
            .wrapper {width:100%; height: auto;overflow: hidden;min-width: 2500px;}
            .item {height:auto; margin-right:60px; margin-left:4.5%;}
            .owl-theme .owl-dots .owl-dot span {position:relative; width: 20px; height:3px; border-radius: 0;bottom: 30px; background: #000000}
            .prvBtn {position:absolute;top:45%; left: 140px;z-index: 1;}
            .nxtBtn {position:absolute;top:45%; right:140px;z-index: 1;}
        </style>
    </head>
    <body>
    <div class="wrapper">
        <div class="owl-carousel sliderWapper owl-theme">
            <div class="item"><img src="/images/cats2.jpg"></div>
    <div class="item"><img src="/images/cats.jpg"></div>
    <div class="item"><img src="/images/cats3.jpg"></div>
    <div class="item"><img src="/images/cats.jpg"></div>
    <div class="item"><img src="/images/cats4.jpg"></div>
</div>
        <div class="sliderControl">
        <div class="owl-controls">
        <div class="owl-nav">
        <div class="prvBtn"><img src="/new/prev.png" height=65px width=65px></div>
        <div class="nxtBtn"><img src="/new/next.png" height=65px width=65px></div>
    </div>
    <div class="owl-dots">
        <div class="owl-dot active"><span></span></div>
        <div class="owl-dot"><span></span></div>
        <div class="owl-dot"><span></span></div>
    </div>
</div>
        </div>
        </div>
        <script src="/new/jquery-3.4.1.min.js"></script>
        <script src="/new/owl.carousel.min.js"></script>
        <script src="/new/jquer1.js"></script>
    </body>    
</html>

jqeur1

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
    loop:true,
    autoplay:2500,
    margin:10,
    nav:false,
    responsiveClass:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        },
        9000:{
            items:1
        }
    }
    })
});

var owl = $('.sliderWapper');
owl.owlCarousel();
// Go to the next item
$('.nxtBtn').click(function() {
    owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.prvBtn').click(function() {
    // With optional speed parameter
    // Parameters has to be in square bracket '[]'
    owl.trigger('prev.owl.carousel', [300]);
})

Пожалуйста, помогите! я боролся с этим в течение нескольких недель и обратите внимание, что я использовал «min-width: 2500px» в обертке, потому что если нет, то он не подходит моей странице.

1 Ответ

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

Попробуйте удалить следующие строки из файла jqeur1 

var owl = $('.sliderWapper');
owl.owlCarousel();

, а также удалить: overflow: hidden;минимальная ширина: 2500 пикселей;из класса оболочки. Это сработало для меня. Надеюсь, это поможет.

...