MG 2.2 Full sized slider

stromb0li

Well-known member
Is there a way to use the slider but have a single image full width of the page?

I've been trying to use the following, but the image size always seems to be limited to thumbnail size. I know the class says thumbnail, but it doesn't look like a specific width is defined? Height also doesn't seem to be honored at all.

The goal is to allow the width to fill the size of the page, but slide a few static images. While I'd reference the widget as-is, I don't want to for this single case since I would like to link to a few static images not in a gallery album itself.

HTML:
<xf:css src="xfmg_media_list.less" />
<xf:css src="lightslider.less" />

<xf:js src="vendor/lightslider/lightslider.js" min="1" />
<xf:js src="xfmg/slider.js" min="1" />

<div class="itemList itemList--slider" data-xf-init="item-slider"
    data-xf-item-slider="{&quot;item&quot;:1,&quot;itemWide&quot;:4,&quot;itemMedium&quot;:3,&quot;itemNarrow&quot;:2,&quot;auto&quot;:false,&quot;loop&quot;:true,&quot;pager&quot;:true,&quot;pauseOnHover&quot;:false}">

    <div class="itemList-item itemList-item--slider">
        <a href="/media/image-1.jpg">

            <span class='xfmgThumbnail xfmgThumbnail--image xfmgThumbnail--fluid'>
                <img
                    src='/media/image-1.jpg' loading='lazy'
                    width='3000' height='415' alt='image-1.jpg' />
                <span class='xfmgThumbnail-icon'></span>
            </span>

        </a>
    </div>
    <div class="itemList-item itemList-item--slider">
        <a href="/media/image-2.jpg">

            <span class='xfmgThumbnail xfmgThumbnail--image xfmgThumbnail--fluid'>
                <img
                    src='/media/image-2.jpg' loading='lazy'
                    width='3000' height='415' alt='image-2.jpg' />
                <span class='xfmgThumbnail-icon'></span>
            </span>

        </a>
    </div>
</div>
 
Last edited:
Back
Top Bottom