2

Can anyone help me, I am new to Magento 2. I want to call custom jquery slider on home page on my local site. I have tried myself but not getting how to use it with requirejs-config.js. It will be very helpful if you explain from basic step by step.

Improve this question
1
  • you can use bootstrap slider , if you need to add bootstrap then I can help you out and with bootstrap you can use other features as well
    – Manoj Deswal
    Commented Jul 1, 2017 at 12:27

2 Answers 2

Reset to default
4

For example to call custom jQuery slider in home page of Magento you need to follow this steps

Step 1: Call you custom slider's CSS and JS in home page layout

Override cms_index_index.xml to your custom theme

app/code/Vendor/theme/Magento_Cms/layout/cms_index_index.xml

<?xml version="1.0" ?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Magento_Cms/js/myslider.js"/>
        <css src="Magento_Cms/css/myslider.css"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="index.home" template="Magento_Cms::slider.phtml"/>
        </referenceContainer>
    </body>
</page>

Step 2: Define your custom JS in requirejs-config.js

app/code/Vendor/theme/Magento_Cms/requirejs-config.js

var config = {
    map: {
        '*': {
            mySlider: 'Magento_Cms/js/myslider'
        }
    },
    shim: {
        magnificPopup: {
            deps: ['jquery']
        }
    }
};

Step 3: create phtml file which we called in layout for your slider html and js

app/code/Vendor/theme/Magento_Cms/templates/slider.phtml

  <!-- Your Custom Slider HTML -->

  <script type="text/javascript">
    requirejs(['jquery', 'myslider' ],
      function ($, myslider) {
          $(document).ready(function(){

              // Custom Slider JS

          });
      });
  </script>

I have created popup manager module with custom jQuery popup you can take reference from here:

https://github.com/mageprince/Magento2-PopupManager

Improve this answer
0

Step 1:

IN your requiredjs-config.js put this code

File path:Extension/your_Module/view/frontend/requirejs-config.js

var config = {

    paths: {
        'helloWorld': 'Mageplaza_HelloWorld/js/jquery-bxslider-min' 
    }

};

Step-2:Extension/your_Modul/view/frontend/templates/post.phtml

Put below code in these location

    <link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Mageplaza_HelloWorld::css/jquery.bxslider.css')?>">
    <div>
    <ul class="posts bxslider" >  
                        <li class="post">
 <img src=""/>
 <img src=""/>
 <img src=""/>
 <img src=""/>
                    </li>
         <?php  } ?> 
    </ul>
    </div>

put below code in these location

step-3:Extension/your_Module/view/frontend/web/css/jquery.bxslider.css

.bx-wrapper {
  position: relative;
  margin: 0 auto 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
  width:100%;
  text-align: center;
}
.bxslider {
  margin: 0;
  padding: 0;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/
.bx-wrapper {
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  border: 5px solid #fff;
  background: #fff;
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('images/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('images/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('images/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('images/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  /*text-align: left;
  width: 80%;*/
  text-align: center;
  width: 100%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

Put images in these location

file path::Extension/your_Module/view/frontend/web/css/images

Improve this answer
1
  • Your answer is incomplete and will not work.
    – themanwhoknowstheman
    Commented Feb 22, 2018 at 13:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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