Owl Carousel in Magento 2 not working correctly

Question

Owl Carousel in Magento 2 isn't working correctly for me.

I can move it left and right but the images are stacked below each other instead of next to each other like a carousel.

Does anyone know the solution? (image below is what it looks like).

This is what I did to add Owl Carousel:

requirejs-config.js in Magento_Catalog

owl.carousel.css in Magento_Catalog/web/css

owl.carousel.js in Magento_Catalog/web/js

And the following in my template file:

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owl.carousel.css')?>">

<div id="owlslider" class="">
    <ul>
        <li><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg"></li>
        <li><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg"></li>
    </ul>
</div>
<script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $("#owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds
                    items : 1
                });
            });
        });
    })();
</script>

Answer 1

You can use java script like this

<script>
    require(['jquery', 'owlcarousel'], function($) {
           $("#owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds
                    items : 1
                });

    });
</script>

or Try this

<script>
    require(['jquery', 'mgzOwlCarousel'], function($) {
    $("#owlslider").owlCarousel({
                        navigation : true, // Show next and prev buttons
                        autoPlay: false, //Set AutoPlay to 3 seconds
                        items : 1
                    });

        });
    </script>