5

I am using owl carousel on my magento 2 website. I have created a custom module for that.

While I am loading my website first time owl carousel slider is not appearing,.

When I move to other page and comeback to home page slider is appearing.

Can anyone help on this.

requirejs-config.js

var config = {
    map: {
        "*": {
            bannerowlcarousel: "Vendor_Banner/js/owl.carousel.min"
        }
    }
};

banner.phtml

<script type="text/javascript">
    require([
        'jquery',
        'bannerowlcarousel'
    ], function ($) {
        $("#banner-slider-demo-1").owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: true,
            nav: true,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            navText: ["<em class='icon-left'></em>","<em class='icon-right'></em>"]
        });
    });
</script>
  • share your code here – Ronak Chauhan Jan 4 '17 at 6:40
  • please check the updated question. – rajat kara Jan 4 '17 at 7:00
  • please let me know if you have issue. – Rakesh Jesadiya Jan 4 '17 at 7:16
  • have you done static content deploy . – Amit Bera Jan 4 '17 at 7:19
  • yes i did that. – rajat kara Jan 4 '17 at 7:20
1

requirejs-config.js :

var config = {
"map": {
    "*": {
        "OwlCarousel": "<vodeorname>_<modulename>/js/owl-carousel"
    }
}

};

phtml Template :

<?php $items = $this->getItemCollection()->getData(); ?>

<div id="owl-demo" data-mage-init='{
"OwlCarousel":{
    "autoPlay": 3000,
    "items" : 2,
    "itemsDesktop" : [1199,3],
    "itemsDesktopSmall" : [979,3]
   }
 }'>
   <?php foreach ($items as $item) { ?>
    <div class="item"><img src="<?php echo $this->imageurl . $item['item_image']; ?>" alt="Owl Image"></div>
<?php } ?>
</div>

Let me know if you have an issue.

|improve this answer|||||
1

The probable issue is that when you load your page first time your owlcarousel is not initialized and later on when you refresh your page once it does. You can try initializing without configuration first i.e as below:

<script type="text/javascript">
    require([
        'jquery',
        'bannerowlcarousel'
    ], function ($) {
        $("#banner-slider-demo-1").owlCarousel();
        $("#banner-slider-demo-1").owlCarousel({
            items: 1,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: true,
            dots: true,
            nav: true,
            navRewind: true,
            animateIn: 'fadeIn',
            animateOut: 'fadeOut',
            loop: true,
            navText: ["<em class='icon-left'></em>","<em class='icon-right'></em>"]
        });
    });
</script>
|improve this answer|||||
0

Just change your requirejs-config.js file code,

 var config = {
        paths: {            
                'bannerowlcarousel': "Vendor_Banner/js/owl.carousel.min"
            },   
        shim: {
            'bannerowlcarousel': {
                deps: ['jquery']
            }
        }
    };

Remove var and clear cache.

|improve this answer|||||
  • Have you checked using above method? – Rakesh Jesadiya Jan 6 '17 at 6:06
0

Try adding domReady! as a require JS dependency, this will ensure the carousel is not initialised until the page has loaded.

<script type="text/javascript">
    require([
        'jquery',
        'bannerowlcarousel',
        'domReady!'
    ], function ($) {
        // Your code
    });

I also recommend adding your script in a JS file rather than a template.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.