• Home
  • Add-ons
  • Templates
  • Page builder
  • Blog
  • Home
  • Add-ons
  • Templates
  • Page builder
  • Blog

    Full width slider

    Guides

    Learn how to add full width image slider in Matrix Themes.

    There are 3 ways to add full width slider in Matrix Themes:

     

    01.

    Widget/HTML

    02.

    module 'Gallery' + variables

    03.

    module 'Photo' +JS

    01. Widget/HTML

    In Matrix Themes admin menu select 'Shortcodes' and then 'Slider'. There are 2 options: content carousel and full width content carousel. Choose the second one.

    Stand out with a professional Jimdo website

    Read more

    Stand out with a professional Jimdo website

    Read more

    Stand out with a professional Jimdo website

    Read more

    Edit here your content carousel

    Note: 

    Inside the Widget/HTML you'll find the option to change the height of the slider for desktop and mobile devices:

    
    <style>
    /* <![CDATA[ */
    .is-new-slider .item {
       height:600px!important;
    }
       
    @media only screen and (max-width: 459px) {
    .is-new-slider .item {
       height:300px!important;
       }
     }
    
    /*]]>*/
    </style>

    02. Module 'Gallery' and variables

    Note: 

    This option available only in the latest Matrix themes with imported CSS file '09-Updates.css'

    1. Add a module 'Columns' with only one column.

    2. Inside of it, display 'Photo Gallery'.

    3. Upload the images and select 'Slideshow'.

     

    is-100 bg-darkgray add-5

     

    4. Inside the same column, add a module 'Widget/HTML' with the following variables:


    <var>is-fullwidth has-custom-slider </var>

    5. Click the save button and refresh the page. Your slideshow should look like this:

     

    is-fullwidth has-custom-slider

    03. Module 'Photo' and JS

    This guide is available in Matrix Themes menu> Enterprise Package > Carousel

    1. Add a module 'Columns' with just one column.

    2. Inside the column, add a module 'Photo' and upload the pictures. Make sure that all images have the same size.

    is-100 bg-darkgray add-5

     

     

    3. Add Alt Text 'is-slider' in one of the photo:

     

    is-100 bg-darkgray add-5

    4. Now add a module 'Widget/HTML' which should be outside(!) of the module column with Photos, with the following code:


    <style> /*<![CDATA[*/ .is--owl .cc-imagewrapper img { width:100%!important;
    } /*]]>*/ </style><script type="text/javascript"> //<![CDATA[ jQuery.noConflict(); (function($) { // Init $(document).ready(function() { // make it owl carousel $(".matrix-column:has('.is-slider')").children('[id]').addClass(' is-fullwidth is--owl has-center-caption').owlCarousel({ transitionStyle : "fade",// other options 'fadeUp', 'goDown' autoPlay: 5000, slideSpeed:600, lazyLoad : true, stopOnHover:true, items : 1, itemsDesktop : [1199,1], itemsDesktopSmall : [980,1], itemsTablet: [768,1], itemsMobile : [479,1], navigation : true, autoHeight:false }); }); })(jQuery); //]]> </script> <div class="matrix-msg invisible"> is-matrix-slider </div>

    is-slider

    is-matrix-slider

    Notes:

    - in admin menu you'll always have an empty item of slider ( e.g. if you upload 3 images, in admin mode you'll see 4). See below screenshot.

    is-100 bg-darkgray add-5

    Resources

    • Overview
    • Default vs Custom template
    • Style Editor
    • Global Updates
    • Theme Updates
    • Common support issues

    Features

    • Templates
    • Page Builder
    • Add-ons
    • Landing pages
    • Alt Classes
    • Matrix variables

    Get inspired

    • Most popular templates
    • Website examples
    • Custom widgets
    • Block Elements
    • Fluid Sections

    Quick links

    • Marketplace
    • Matrix Themes for Agencies
    • Matrix Themes for Web Designers
    • Small Business websites
    • Create a new website
    hide-in-doc-page

    draggable-logo

    Showcase

     

    Main colors
       bg-primary
       bg-primary-light
       bg-primary-dark
       bg-secondary
       bg-secondary-dark
    Template sections
       body
       top-header
       header
       content
    Footer Styles
       background
       text color
       link color
       horizontal line
    Buttons
       style 1
       style 2
       style 3
       text color
    Other elements
      social icons
      navigation color
      subnav background
    Mobile navigation
       background color
       navigation color
    Template configurations
     
    has-right-nav has-large-header g-font m-text-16
     
    Navigation styles
     
    size-16 weight-400 snip-nav
     
    Content styles
     
    form-white
     
    Footer styles
     
    o-form color-white

     

    Typography

    Heading H1
    weight-600
     
    Heading H2
    weight-600
     
    Heading H3
    weight-500
     
    Buttons
    weight-400
     
    Animations
     

    Note:
    All changes made here will be applied to your entire website.
    is-switcher

    Stand out with professional Jimdo website

    About | Privacy Policy | Cookie Policy | Sitemap
    Created with Jimdo
    Log in Log out | Edit
    • Scroll to top
    Close