So rufen Sie Owl Slider in Magento2 auf

11

Wenn wir Owl Slider in Magento 1.X hinzufügen möchten, gehen Sie wie folgt vor.

  1. Kopieren owl.carousel.min.jsund owl.carousel.jsund fügen Sie ihn inskin/frontend/pakage_name/theme_name/js
  2. Kopieren owl.carousel.cssund einfügen inskin/frontend/pakage_name/theme_name/css
  3. Springen app/design/frontend/pakage_name/theme_name/layout/page.xmlund Call js und css

Und wir können Owl Slider überall auf der Magento 1.X-Site verwenden.

Also in Magento 2, wie wir den Owl-Schieberegler aufrufen können und er sollte überall auf der Site aufgerufen werden, damit ich ihn verwenden kann, wann immer ich will.

Für dieses Problem habe ich auf diesen Link verwiesen, aber es ist nicht bis zur Marke und es funktioniert nicht.

Im Moment habe ich Owl Slider Js in platziert, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsaber es funktioniert nicht.

Jede Hilfe wäre dankbar.

javascript  theme  magento-2.0.7  slider 
— Dhaval
quelle
2
Wir können auch dieser Anleitung folgen: boolfly.com/magento-2-slider-with-owl-carousel
— Khoa TruongDinh

Antworten:

11

Sie müssen eine requirejs-config.jsDatei in Ihrem Thema erstellen, wie z.

Fügen Sie zuerst die Datei owlcarousel.js hinzu .

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

Fügen Sie Ihre CSS hinzu,

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

Rufen Sie CSS in Ihrer Tempalte-Datei mit auf.

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

oder rufen Sie css in einer Layoutdatei auf (Best Practice), je nach Ihren Anforderungen:

  • ganze Seite : default.xmlzum Beispielapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
  • Homepage :cms_index_index.xml
<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

Erstellen Sie nun die Datei requirejs-config.js

Magento_Catalog/requirejs-config.js

Definieren Sie Ihren Schieberegler,

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

Jetzt können Sie Owlcarousel unter jeder HTML-Datei verwenden.

<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>

Entfernen Sie den Inhalt des Pub- / statischen Ordners und führen Sie den php bin/magento setup:static-content:deployBefehl aus.

— Rakesh Jesadiya
quelle
aber wo kann ich css hinzufügen? und ich muss CSS in der Datei require.js hinzufügen?
— Dhaval
Sie können CSS nicht in die Datei
— require.js
Ich habe 3 Owl Slider-Dateien owl.carousel.css , owl.carousel.js , owl.carousel.min und muss diese alle Dateien hinzufügen, damit ich diese alle Dateien hinzufügen und aufrufen kann, damit ich sie auf der gesamten Magento-Site verwenden kann, wo immer ich bin wollen?
— Dhaval
app / design / frontend / pakage_name / theme_name / Magento_Catalog / web / css
— Rakesh Jesadiya
Ich habe Updatead Antwort PLZ Check
— Rakesh Jesadiya
9

Zuerst müssen Sie den Schieberegler auf setzen.

Schritt 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Schritt 2 Führen Sie eine Zuordnung für die Datei in themename / themename / Magento_Theme / requirejs-config.js durch

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Schritt 3 : Ich habe in der Bestseller-Datei wie folgt verwendet, wo Sie Slider-Mapping, Themenname / Themenname / Magento_Catalog / templates / product / Bestseller_list.phtml einschließen müssen:

<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>

Schritt 4 : Für diese Struktur sollte wie folgt sein :

<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>


Sie können auch weitere Links unter http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/ http://cookie-code.net/magento-2 besuchen
/ using-requirejs-in-magento-2-implementieren-owl-slider /

— Rushvi
quelle
Jederzeit.
— Ich bin
Kommst du aus ahmedabad
— Dhaval
Ich habe den Call Owl Slider js in requirejs-config.js, aber mein js wird nicht im Frontend angezeigt. Hast du irgendeine Idee?
— Dhaval
@watson Entfernen Sie den Inhalt des pub / static-Ordners und führen Sie den Befehl php bin / magento setup: static-content: deploy aus.
— Rushvi
Ich mache es so oft, aber es hat nicht funktioniert.
— Dhaval
4

Wenn Sie hinzufügen möchten , owl carouselin Magento 2Art und Weise, sollten Sie die folgenden Schritte aus .

  1. Kopieren owl.carousel.jsnach app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

  2. Fügen Sie Ihr requirejsModul hinzu app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

    define([
    'jquery',
    'owlCarousel'
], function($) {
    return function(config, element) {
        $(element).owlCarousel(config);
    };
});

  3. In requirejsconfig app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

    var config = {
    map: {
        '*': {
            'carousel': 'js/carousel',
            'owlCarousel': 'js/owl-carousel/owl.carousel'
        }
    }
};

Wie benutzt man:

  • Verwenden Sie das data-mage-initAttribut, um das Eulenkarussell in ein bestimmtes Element einzufügen:

    <div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'>
    <div class="item">Item 1</div>
    ...
    <div class="item">Item n</div>
</div>

  • Verwendung mit <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>
— Volodymyr Lisniak
quelle
0

Die anderen beiden Antworten sind ausgezeichnet, und ich habe Elemente von beiden kopiert, aber ich habe gelegentlich Probleme mit den Fehlermeldungen "$ ist keine Funktion" und "Eigenschaft 'fn' von undefined kann nicht gelesen werden" gefunden. Außerdem wollte ich eine Methode, die sich auf die Inhaltsseiten konzentriert.

Diese kombinierte Methode könnte also jemandem helfen

  1. Kopieren Sie owl.carousel.js in app / design / frontend / vendorname / themename / Magento_Theme / web / js

(Verzeichnis erstellen, falls noch nicht vorhanden)

  1. Die andere CSS-Lösung könnte genauso gut funktionieren, oder Sie könnten owl.carousel.css und owl.theme.default.css in die .Less-Datei für das Thema kopieren und das Styling an Ihre Vorlieben anpassen.
  2. Kopieren Sie den folgenden Code in app / design / frontend / vendorname / themename /Magento_Theme/require-config.js

(Erstellen Sie bei Bedarf eine Datei / ein Verzeichnis. Dieser Code scheint das Problem "Eigenschaft von FN kann nicht gelesen werden" zu lösen.)

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

  1. Fügen Sie im Seiteninhalt den folgenden Code ein, um die Karussellbilder zu definieren

    <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>

  2. Fügen Sie nach dem obigen Code den folgenden Code für das Karussell hinzu (dies scheint den Fehler "$ ist keine Funktion" zu beheben).

    <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>

  3. Stellen Sie den statischen Inhalt bereit, z. B. php magento setup: static-content: deploy (Beachten Sie, dass es dafür verschiedene Methoden gibt, die das manuelle Löschen von Cache-Ordnern und den Befehl php magento cache: clean umfassen).

  4. Überprüfen Sie es auf der Website

— Shires-Boy
quelle
Ich habe es versucht, aber der Schieberegler kommt nicht. obwohl, wenn ich Element Eule Klasse inspiziere, wird zum div
— surbhi agr
-1 
define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

Sie sollten owl.carousel.min.jsmagento2 hinzufügen

— Prakash
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.