Magento 1.X 에 Owl Slider 를 추가 하려면 다음 단계를 따르십시오.
- 복사
owl.carousel.min.js
하여owl.carousel.js
붙여 넣기skin/frontend/pakage_name/theme_name/js
- 복사
owl.carousel.css
하여 붙여 넣기skin/frontend/pakage_name/theme_name/css
- 고토
app/design/frontend/pakage_name/theme_name/layout/page.xml
와 전화 JS 및 CSS
그리고 Magento 1.X 사이트 어디에서나 Owl Slider를 사용할 수 있습니다.
Magento 2에서 올빼미 슬라이더를 호출하는 방법은 사이트의 어느 곳에서나 호출해야하므로 언제든지 사용할 수 있습니다.
내이 문제에 대해서는이 링크를 참조 했지만 표시가 아니며 작동하지 않습니다.
지금 올빼미 슬라이더 js를 넣었 app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js
지만 작동하지 않습니다.
도움을 주시면 감사하겠습니다.
답변
requirejs-config.js
테마 안에 하나의 파일 을 만들어야 합니다.
먼저 owlcarousel.js 파일을 내부에 추가하십시오 .
app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js
안에 CSS를 추가하십시오.
app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css
tempalte 파일 내에서 CSS를 호출하여
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">
또는 필요에 따라 레이아웃 파일 내에서 CSS를 호출 (모범 사례)하십시오.
- 전체 사이트 :
default.xml
예를 들어app/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
- 홈페이지 :
cms_index_index.xml
<page ...>
<head>
<css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>
이제 requirejs-config.js 파일을 만듭니다
Magento_Catalog/requirejs-config.js
슬라이더를 정의하고
var config = {
paths: {
'owlcarousel': "Magento_Catalog/js/owlcarousel"
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};
이제 phtml 파일에서 owlcarousel을 사용할 수 있습니다.
<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>
pub / static 폴더 내용을 제거하고 php bin/magento setup:static-content:deploy
명령을 실행하십시오.
답변
먼저 슬라이더를
1 단계 themename/themename/Magento_Theme/web/js/owl.carousel.js
2 단계 themename / themename / Magento_Theme / requirejs-config.js에서 파일에 대한 맵핑 수행
/**
* Copyright © 2015 Magento. All rights reserved.
* See COPYING.txt for license details.
*/
var config = {
map: {
'*': {
owlcarouselslider: 'Magento_Theme/js/owl.carousel'
}
}
};
3 단계 : 슬라이더 매핑, themename / themename / Magento_Catalog / templates / product / bestseller_list.phtml을 포함 해야하는 아래 베스트 셀러 파일에서 사용했습니다.
<script>
require([
'jquery',
'owlcarouselslider'
], function () {
'use strict';
jQuery.noConflict();
jQuery("#best-seller-carousel").owlCarousel({
autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
margin:5,
items : 5,
itemsDesktop : [1199,5],
itemsDesktopSmall : [979,5],
itemsTablet : [768,5],
navigation : true,
pagination : false
});
});
</script>
Step4 : 그 구조는 다음과 같아야합니다.
<div id="demo">
<div id="best-seller-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
</div>
</div>
당신은 또한 더 많은 링크 @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/ http://cookie-code.net/magento-2를 방문 할 수 있습니다
/ using-requirejs-in-magento-2-implementing-owl-slider /
답변
추가 할 경우 owl carousel
의 Magento 2
방법을, 다음이 단계를 수행해야합니다.
- 에 복사
owl.carousel.js
하십시오app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/
. -
requirejs
모듈을 추가하십시오app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js
.define([ 'jquery', 'owlCarousel' ], function($) { return function(config, element) { $(element).owlCarousel(config); }; });
-
에
requirejs
구성을 추가하십시오app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js
.var config = { map: { '*': { 'carousel': 'js/carousel', 'owlCarousel': 'js/owl-carousel/owl.carousel' } } };
사용하는 방법:
-
data-mage-init
특정 요소에 올빼미 회전 목마를 삽입 하려면 속성을 사용하십시오 .<div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'> <div class="item">Item 1</div> ... <div class="item">Item n</div> </div>
-
함께 사용
<script type="text/x-magento-init" />
:<div id="owl-carousel" class="owl-carousel"> <div class="item">Item 1</div> ... <div class="item">Item n</div> </div> <script type="text/x-magento-init"> { "#owl-carousel": { "carousel": {"option": value} } } </script>
답변
다른 두 가지 대답은 훌륭하고 두 가지 요소를 모두 복사했지만 때때로 오류 메시지 “$는 함수가 아닙니다”와 “정의되지 않은 ‘fn’속성을 읽을 수 없습니다”라는 오류 메시지가 발견되었습니다. 또한 콘텐츠 페이지를 중심으로 한 방법을 원했습니다.
따라서이 결합 된 방법은 누군가를 도울 수 있습니다
- owl.carousel.js를 app / design / frontend / vendorname / themename / Magento_Theme / web / js에 복사하십시오.
(아직 디렉토리가 없으면 작성하십시오)
- 다른 CSS 솔루션도 마찬가지로 작동하거나 owl.carousel.css 및 owl.theme.default.css를 테마의 .Less 파일로 복사하고 원하는대로 스타일을 조정할 수 있습니다.
- 다음 코드를 app / design / frontend / vendorname / themename /Magento_Theme/require-config.js에 복사하십시오.
(필요한 경우 파일 / 디렉토리를 작성하십시오.이 코드는 “FN의 특성을 읽을 수 없습니다”문제를 해결하는 것으로 보입니다.)
var config = {
paths: {
'owlcarousel': "Magento_Theme/js/owl.carousel"
},
shim: {
'owlcarousel': {
deps: ['jquery']
}
}
};
-
페이지 컨텐츠에 다음 코드를 배치하여 회전식 이미지를 정의하십시오.
<div class="owl-carousel owl-theme"> <div><img src="{blah blah}"/></div> <div><img src="{blah blah}"/></div> <div><img src="{blah blah}"/></div> <div><img src="{blah blah}"/></div> </div>
-
위 코드 뒤에 회전식 메뉴에 다음 코드를 추가합니다 ( “$는 함수가 아닙니다”오류를 해결하는 것으로 나타남).
<script> require([ 'jquery', 'owlcarousel' ], function () { 'use strict'; jQuery.noConflict(); jQuery(".owl-carousel").owlCarousel({ nav: true, // Show next and prev buttons navText:["<",">"], //show prev next loop: true, autoplay: true, //Set AutoPlay autoplayHoverPause: true, //stop when mouse on carousel items : 1 }); }); </script>
-
정적 컨텐츠 (예 : php magento setup : static-content : deploy)를 배치하십시오 (캐시 폴더의 수동 지우기 및 php magento cache : clean 명령을 포함하는 다양한 방법이 있음).
-
웹 사이트에서 확인하십시오
답변
define([
"jquery",
], function ($) {
!function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});
owl.carousel.min.js
magento2에 추가해야합니다