Причина не показа изображения в первом слайдере-карусели и ее решение - PullRequest
Новая
       23

Причина не показа изображения в первом слайдере-карусели и ее решение

0 голосов
/ 09 февраля 2020

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

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/style.css">

<link rel="stylesheet" href="css/slick-theme.css">
<link rel="stylesheet" href="css/slick.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css">
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/reset-css.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

    <title>Document</title>


</head>
<div class="wrapper">
 <div class="owl-carousel owl-theme">
                        <div class="item"><img src="https://images.pexels.com/photos/2929290/pexels-photo-2929290.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
                        <div class="item"><img src="https://images.pexels.com/photos/3519656/pexels-photo-3519656.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
                        <div class="item"><img src="https://images.pexels.com/photos/3577391/pexels-photo-3577391.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
                        <div class="item"><img src="https://images.pexels.com/photos/3648850/pexels-photo-3648850.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></div>
                        <div class="item"><img src="img/pin.png"></div>
                        <div class="item"><img src="img/bandicam 2019-08-02 16-25-03-568.jpg"></div>
                        <div class="item"><img src="img/bandicam 2019-08-02 17-07-24-742.jpg"></div>
                        <div class="item"><img src="img/bandicam 2019-08-02 17-08-20-757.jpg"></div>
                        <div class="item"><img src="img/bandicam 2020-02-05 14-48-02-096.jpg"></div>
                        <div class="item"><img src="img/bandicam 2019-07-29 20-39-41-098.jpg"></div>

                    </div>


                </div>



            </div>
        </section>
    </div>










    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="js/slick.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>


    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                type: 'progressbar',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>

    <script>
        $('.owl-carousel').owlCarousel({
    loop:true,
    autoPlay:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
    </script>


</body>

</html>
...