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.

Kopieren owl.carousel.min.jsund owl.carousel.jsund fügen Sie ihn inskin/frontend/pakage_name/theme_name/js
Kopieren owl.carousel.cssund einfügen inskin/frontend/pakage_name/theme_name/css
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

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 .

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

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);
    };
});

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

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

(Verzeichnis erstellen, falls noch nicht vorhanden)

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.
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']
    }
}
};

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>

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>

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).
Ü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

So rufen Sie Owl Slider in Magento2 auf

Antworten: