0

I need to owl carousel slider in html file magneto 2.

app/code/Alps/Deliveryshipping/view/frontend/web/template/shipping-address/shipping-method-list.html

Owl slider code

<div id="checkout-slider-owl" class="owl-carousel owl-theme">
        <div class="item">
          <h4>1</h4>
        </div>
        <div class="item">
          <h4>2</h4>
        </div>
        <div class="item">
          <h4>3</h4>
        </div>
 </div>
<script>
require([
        'jquery',
        'owlcarousel'
    ],function() {
  jQuery("#checkout-slider-owl").owlCarousel({
      navigation : true, // Show next and prev buttons
      slideSpeed : 300,
      paginationSpeed : 400,
      navigation: true,
      items : 1, 
      responsiveClass:true,
        responsive:{
            0:{
                items:1
            },
            991:{
                items:1
            },
            1024:{
                items:1
            }
        }

  });
});
</script>

I have placed Owl slider js in

app/design/frontend/pakage_name/theme_name/default/web/js

I have called owl slider js in require.js

/**
 *  This is used for slider
 */
var config = {
    paths: {            
            'owlcarousel': "js/owl.carousel.min",
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

but it's not working.

Any help would be appreciated.

0

In order to have slider in knockout, you can add the slider html code and its script in static block and call static block in checkout page whereever you want.

To call static block on checkout page, use this - https://www.bizspice.com/blog/post/how-to-add-a-static-block-on-checkout-on-magento-2-using-knockoutjs , i checked and this worked.

Thank you

0

You have to created one requirejs-config.js file inside your theme like,

First Add owlcarousel.js file inside,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js

Add your css inside,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css

call css inside your tempalte file using,

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

Now create requirejs-config.js file

Magento_Catalog/requirejs-config.js

Define your slider,

var config = {
    paths: {            
            'owlcarousel': "Magento_Catalog/js/owlcarousel"
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

Now you can use owlcarousel under any phtml file,

<div id="owlslider" class="products list items product-items">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</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 : 5
                });
            });
        });
    })();
    </script>

Remove pub/static folder content and run php bin/magento setup:static-content:deploy -f command flush cache

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.