Giter Club home page Giter Club logo

magento-2-banner-slider's Introduction

Magento 2 Banner Slider Extension by Mageplaza

Mageplaza Banner slider for Magento 2 is an banner slider extension for Magento that enables you to create image carousel slider, image scroller and video LightBox. The extension supports images, YouTube, Vimeo, mp4 and webm videos. It's fully responsive, works on iPhone, iPad, Android, Firefox, Chrome, Safari, Opera and Internet Explorer.

Fully written in jQuery, touch enabled extension based on OWL Carousel that lets you create beautiful responsive carousel slider.

1. Documentation

2. How to install

✓ Install via composer (recommend)

Run the following command in Magento 2 root folder:

composer require mageplaza/magento-2-banner-slider-extension
php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

✓ Install Package from Mageplaza

3. FAQs

Q: I got error: Mageplaza_Core has been already defined

A: Read solution: https://github.com/mageplaza/module-core/issues/3

Q: My site is down

A: Please follow this guide: https://www.mageplaza.com/blog/magento-site-down.html

4. SWEET MAGEPLAZA EXTENSIONS TO BRING YOU MORE MONEY

☞ ↑30% INCREASE CONVERSION RATE

☞ ↓66% DECREASE ABANDONMENT CART

☞ ↓80% REDUCE CHECKOUT TIME

☞ ↑84% USER'S FILTERING EXPERIENCE

☞ ↑25% CONVERSION RATE

☞ ↓67% SHOPPING TIME

☞ Amazon Product Recommendation Solution

☞ AJAX loading for better performance

☞ Support Custom Options and all product types

☞ Physical, virtual or combined gift cards

☞ Different gift card values from prices

☞ Send cards via email, SMS, post office or messenger

☞ Display on Product Page, Category Page, Shopping Cart page

☞ AJAX loading for better performance.

☞ Flexible layout and design.

☞ Increase signup rate up-to 30%

☞ Supports 11 Types: Facebook, Google Plus, Twitter, Linkedin, Instagram, Yahoo, Github, Foursquare, VK, Live, Amazon

☞ Easy custom design fit with your store design

Social Login on Github

☞ Fully Compatible with Layered Navigation

☞ Instant Search brands

☞ Import brands

☞ Multiple Affiliate Campaigns

☞ Smart Referral Links

☞ Affiliate Report

5. Introduce Banner Slider

Fully Customisable

Over 60 options. Easy for novice users and even more powerful for advanced developers.

banner slider

Touch and Drag Support

Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!

Fully Responsive

Almost all options are responsive and include very intuitive breakpoints settings.

Modern Browsers

Owl uses hardware acceleration with CSS3 Translate3d transitions. Its fast and works like a charm!

Easy custom banner slider

This feature allows admin custom banner with an attractive text. You can choose an interesting content and add the position you want such as: top, right, bottom, left, top left, top right, bottom left, bottom right, middle, etc. Banner with content text will become more eye-catching and engaging.

Create unlimited banners, slider

It is very easy for you to upload, edit and delete the image for banner in banner information in backend. Banner Slider extension supports multi image types as: jpg, jpeg, gif, png. If you require other image kinds, please contact us to configure.

banner slider

Custom banner slider effects

Normal types of sliders will be bored and reduce the effectiveness of your promotional campaign. Now, you can easily to create sliders with different effects and set the active time for them.

Place banner slider everywhere

36 positions available to show sliders (banners) on your website. That is easy and convenient to choose the most suitable one in order to increase the effectiveness of your Banner Slider. Moreover, you can also preview how it looks when setting up banners.

Full features of Banner Slider

  • Allow upload image for banner
  • Support adding button and link for banner
  • Easily add content text for banner
  • Choose flexible and suitable position of content text
  • Support multi effects for banner ( included over 12 effects)
  • Preview banner while setting the content and position of banner
  • Support 36 positions to put banner on site
  • Support for SEO
  • Can view reports on clicks and impressions of banners
  • Can create your own slider style by inserting custom codes

Other features

  • Display Featured Products
  • Open source 100%.
  • Easy to install and configure.
  • User-friendly interface.
  • Fully compatible with Mageplaza extensions
  • Supports multiple stores.
  • Supports multiple languages.

6. User Guide

In this guide, I will show you how to insert A banner slider into Homepage of Magento 2 store.

Step 1: Add new banners

First of all, you should add banners into your store.

  • From Magento 2 Admin > Banner Slider > Banners > Add New Banner

  • Fill information, upload image file to Upload File file.

mageplaza banner slider

  • Then Click Save Banner

You can add as many banners as you want. After finish adding banners, you can go to next step: add a new slider.

Step 2: Add a new slider

  • From Magento 2 Admin > Banner Slider > Sliders > Add New Slider

  • Fill Slider information as the following:

fill banner slider

  • Click on Banners tab, and choose uploaded banners. You also can sort order by position.

banner tab

  • Then Save Banner, you can see slider_id in this example is 1

save banner slider

Step 3: Insert into Homepage

  • Go to Admin > Content > Pages > Homepage > Content
{{ block class="Mageplaza\BetterSlider\Block\Slider" template="Mageplaza_BetterSlider::slider.phtml" banner_id="1" }}

You can change your own banner_id value depend on your store.

  • Then click Save Page.

Step 4: Flush Cache and Check result

To flush Magento cache, you can follow this guide: Magento 2 how to flush cache

Navigate your browser to Magento homepage and check result. Here is what we get.

How to insert Banner Slider in layout file

In Xml file, you can insert the following block of code::

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/	Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block template="slider.phtml" class="Mageplaza\BetterSlider\Block\Slider" name="mageplaza_betterslider"/>
    </referenceContainer>
</page>

Why Mageplaza developed this module for Developers

  • Optimize performnace do not slow your Magento 2 store by adding banner slider everywhere, every positions (~36 positions) on the site.
  • Details and quality documentations for developers.
  • Implement with ease.
  • No need, no added.
  • Free, Open-source.

Mageplaza extensions on Magento Marketplace, Github

Magento 2 One Step Checkout extension

Magento 2 Blog extension

Magento 2 Layered Navigation extension

Magento One Step Checkout

Magento 2 Blog on Github

Magento 2 Social Login on Github

Magento 2 SEO on Github

Magento 2 SMTP on Github

Magento 2 Product Slider on Github

Magento 2 Banner on Github

magento-2-banner-slider's People

Contributors

btn114 avatar haitv282 avatar imsamthomas avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.