Learn how to add full width image slider in Matrix Themes.
There are 3 ways to add full width slider in Matrix Themes:
Widget/HTML
module 'Gallery' + variables
module 'Photo' +JS
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.
<style>
/* <![CDATA[ */
.is-new-slider .item {
height:600px!important;
}
@media only screen and (max-width: 459px) {
.is-new-slider .item {
height:300px!important;
}
}
/*]]>*/
</style>
1. Add a module 'Columns' with only one column.
2. Inside of it, display 'Photo Gallery'.
3. Upload the images and select 'Slideshow'.
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:
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.
3. Add Alt Text 'is-slider' in one of the photo:
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>
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.