Magento2에서 올빼미 슬라이더를 호출하는 방법

11

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지만 작동하지 않습니다.

도움을 주시면 감사하겠습니다.

— 다발
소스

2

우리는 또한이 가이드를 따를 수 : boolfly.com/magento-2-slider-with-owl-carousel

— 코아 TruongDinh

11

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명령을 실행하십시오.

— 라 케시 예사 디야
소스

하지만 CSS를 어디에 추가 할 수 있습니까? require.js 파일에 CSS를 추가해야합니까 ??

— Dhaval

require.js 파일에 CSS를 추가 할 수 없습니다

— Rakesh Jesadiya

나는 3 개의 올빼미 슬라이더 파일 owl.carousel.css , owl.carousel.js , owl.carousel.min을 가지고 있으며이 모든 파일을 추가해야하므로 모든 파일을 추가하고 호출 할 수 있으므로 어디서나 전체 마 젠토 사이트에서 사용할 수 있습니다 필요?

— Dhaval

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

— Rakesh Jesadiya

나는 updatead 답변 plz 확인

— Rakesh Jesadiya

9

먼저 슬라이더를

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 /

— 루시 비
소스

언제든지 그것이 당신을 위해 효과가 있다는 것을 알게되어 기쁘다 :)

— Rushvi

ahmedabad 출신입니까?

— Dhaval

requirejs-config.js에 올빼미 슬라이더 js가 있지만 js가 프론트 엔드에 표시되지 않습니다. 당신은 어떤 아이디어가 있습니까?

— Dhaval

@watson pub / static 폴더 내용을 제거하고 php bin / magento setup : static-content : deploy 명령을 실행하십시오.

— Rushvi

나는 여러 번 그것을하지만 작동하지 않았다.

— Dhaval

4

추가 할 경우 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>

— 볼로디미르리스 니악
소스

0

다른 두 가지 대답은 훌륭하고 두 가지 요소를 모두 복사했지만 때때로 오류 메시지 "$는 함수가 아닙니다"와 "정의되지 않은 '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 명령을 포함하는 다양한 방법이 있음).
웹 사이트에서 확인하십시오

— 셔스 보이
소스

시도했지만 슬라이더가 오지 않습니다. 내가 요소 올빼미 클래스를 검사 할 때 div에 추가됩니다

— surbhi agr

-1

define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

owl.carousel.min.jsmagento2에 추가해야합니다

— 프라 카쉬
소스