Carosel swap

[JimboS]

We are wanting to use different images on our home page carousel on mobile so they look better (more portrait than landscape).

If there a way to specify using carousel one and if the screen size gets down to xxxx pixel use carousel 2?

James

[NormanRouxel]

Here's a way to have a second carousel and it will swap with the the first one depending on the window width.

Go to Design / Library / Layouts / Promotional Lists / Promotional Carousel / Click here to edit list layout settings.
Replace Start of List with:

<script language="javascript" type="text/javascript">
    function checkslidersize(){
        if ( $( "div.slidercontmobile" ).length )
            {
            if ( $( window ).width() >= 500 )
                {
                $( "div.slidercontmobile" ).hide();
                $( "div.slidercontstd" ).show();
                }
            else
                {
                $( "div.slidercontmobile" ).show();
                $( "div.slidercontstd" ).hide();
                }
            }
        }
    var scripts = document.getElementsByTagName('script');
    (function()
        {
        var oThisScript = scripts[scripts.length - 1];
        
        $(document).ready(function(){
            var oDivBXSlider = $(oThisScript).next().children().first();
            oDivBXSlider.data('sd_BXSlider', oDivBXSlider.bxSlider({
                minSlides     : <actinic:variable name="CarouselSlides" />,
                moveSlides  : <actinic:variable name="CarouselMovingSlides" />,
                maxSlides   : <actinic:variable name="CarouselMaxSlides" />,      
                slideWidth  : <actinic:variable name="CarouselSlideWidth" />,
                auto             : <actinic:variable name="SliderAuto" />,
                autoHover     : <actinic:variable name="SliderPauseOnHover" />,
                pause         : <actinic:variable name="SliderDwellms" />,
                mode             : '<actinic:variable name="SliderTransition" />',
                onSliderResize : function(){checkslidersize();}
              }));
        });}
    ());
</script>
<div class="slidercont slidercontstd sidebar">
<div class="bxSlider<actinic:variable name="FragmentID" />">

OK out until you're back in the Library.

Right-click Promotional Carousel and choose Copy.
Rename that copy to be Promotional Carousel Mobile.
Double click Promotional Carousel Mobile and Click here to edit list layout settings.
Replace Start of List with:

<script language="javascript" type="text/javascript">
    var scripts = document.getElementsByTagName('script');
    (function()
        {
        var oThisScript = scripts[scripts.length - 1];
        
        $(document).ready(function(){

            var oDivBXSlider = $(oThisScript).next().children().first();

            oDivBXSlider.data('sd_BXSlider', oDivBXSlider.bxSlider({
                minSlides     : <actinic:variable name="CarouselSlides" />,
                moveSlides  : <actinic:variable name="CarouselMovingSlides" />,
                maxSlides   : <actinic:variable name="CarouselMaxSlides" />,      
                slideWidth  : <actinic:variable name="CarouselSlideWidth" />,
                auto             : <actinic:variable name="SliderAuto" />,
                autoHover     : <actinic:variable name="SliderPauseOnHover" />,
                pause         : <actinic:variable name="SliderDwellms" />,
                mode             : '<actinic:variable name="SliderTransition" />',
                onSliderLoad : function(){if ( typeof checkslidersize === 'function' ) checkslidersize();}
              }));              
        });}
    ());
    
</script>
<div class="slidercont slidercontmobile sidebar">
<div class="bxSlider<actinic:variable name="FragmentID" />">

OK out until you're back in the Library.

Go to Fragments / Promo List Carousel and choose Copy.
Rename that copy to be Promo List Carousel Mobile.
Edit Promo List Carousel Mobile. and replace all code (there's only 1 line) with:

<actinic:variable name="PromotionalLists" value="Promotional Carousel Mobile" />

That's it done.

To use it create new Fragment immediately after your existing carousel and in Fragment Details / Layout
select Promo List Carousel Mobile.
In Marketing select a different set of items.

Notes:
The window width at which it switches to the mobile view is set via code
in Design / Library / Layouts / Promotional Lists / Promotional Carousel.
Look for 500 and change as required.

[JimboS]

Thanks Norman will give it a go.

James

[JimboS]

Genius NormanRouxel thank you so much,

James

[NormanRouxel]

This is a more sophisticated version that pauses any hidden slide-shows and resumes them when they return to view.
It also replaces SD's rather clumsy inline JavaScript with a cleaner way of implementing bxSlider.

Here's a way to have a second carousel and it will swap with the the first one depending on the window width.

Go to Design / Library / Layouts / JavaScript Header Functions / Standard Javascript Header Functions.
Scroll to the bottom and append the following:

<script language="javascript" type="text/javascript">
    // bxSlider support for alternate images on small screens V1.00

    // switch between standard and mobile sliders depending on screen width
    function checkslidersize(isfirst){
        // only activate if we have both sets of images and only trigger when 1st item resizes
        if ( $( "div.slidercontstd" ).length && $( "div.slidercontmobile" ).length && isfirst )
            {
            if ( $( window ).width() >= 700 )
                {
                $( "div.slidercontmobile" ).hide();
                $( "div.slidercontstd" ).show();
                $( "div.sliderlistmobile" ).each(function(){if ( $(this).attr('data-auto') ) $(this).data('bx').stopAuto(false);});
                $( "div.sliderliststd" ).each(function(){if ( $(this).attr('data-auto') ) $(this).data('bx').startAuto(false);});
                }
            else
                {
                $( "div.slidercontmobile" ).show();
                $( "div.slidercontstd" ).hide();
                $( "div.sliderlistmobile" ).each(function(){if ( $(this).attr('data-auto') ) $(this).data('bx').startAuto(false);});
                $( "div.sliderliststd" ).each(function(){if ( $(this).attr('data-auto') ) $(this).data('bx').stopAuto(false);});
                }
            }
    }

    // initialise bxSlider
    $(document).ready(function(){
        $( "div.sliderlist" ).each(function(idx){
            var bx = $(this);
            bx.data('bx', bx.bxSlider({
                minSlides         : bx.attr('data-minSlides'),
                moveSlides      : bx.attr('data-moveSlides'),
                maxSlides       : bx.attr('data-maxSlides'),      
                slideWidth      : bx.attr('data-slideWidth'),
                auto                 : bx.attr('data-auto'),
                autoHover         : bx.attr('data-autoHover'),
                pause             : bx.attr('data-pause'),
                mode                 : bx.attr('data-mode'),
                onSliderResize : function(){checkslidersize(idx == 0);}    // we only need to resize when 1st slider changes size
                })
            );
        });

    checkslidersize(1);        // check on initial page load
    });
</script>

Go to Design / Library / Layouts / Promotional Lists / Promotional Carousel / Click here to edit list layout settings.
Replace Start of List with:

<div class="slidercont slidercontstd sidebar">
<div class="sliderlist sliderliststd bxSlider<actinic:variable name="FragmentID" selectable="false" />"
        data-minSlides="<actinic:variable name="CarouselSlides" selectable="false" />"
        data-moveSlides="<actinic:variable name="CarouselMovingSlides" selectable="false" />",
        data-maxSlides="<actinic:variable name="CarouselMaxSlides" selectable="false" />"      
        data-slideWidth="<actinic:variable name="CarouselSlideWidth" selectable="false" />"
        data-auto="<actinic:variable name="SliderAuto" selectable="false" />,
        data-autoHover="<actinic:variable name="SliderPauseOnHover" selectable="false" />"
        data-pause="<actinic:variable name="SliderDwellms" selectable="false" />"
        data-mode="<actinic:variable name="SliderTransition" encoding="perl" selectable="false" />"
>

OK out until you're back in the Library.

Right-click Promotional Carousel and choose Copy.
Rename that copy to be Promotional Carousel Mobile.
Double click Promotional Carousel Mobile and Click here to edit list layout settings.
Replace Start of List with:

<div class="slidercont slidercontmobile sidebar">
<div class="sliderlist sliderlistmobile bxSlider<actinic:variable name="FragmentID" encoding="perl" selectable="false" />"
        data-minSlides="<actinic:variable name="CarouselSlides" selectable="false" />"
        data-moveSlides="<actinic:variable name="CarouselMovingSlides" selectable="false" />",
        data-maxSlides="<actinic:variable name="CarouselMaxSlides" selectable="false" />"      
        data-slideWidth="<actinic:variable name="CarouselSlideWidth" selectable="false" />"
        data-auto="<actinic:variable name="SliderAuto" selectable="false" />,
        data-autoHover="<actinic:variable name="SliderPauseOnHover" selectable="false" />"
        data-pause="<actinic:variable name="SliderDwellms" selectable="false" />"
        data-mode="<actinic:variable name="SliderTransition" encoding="perl" selectable="false" />"
>

OK out until you're back in the Library.

Go to Fragments / Promo List Carousel and choose Copy.
Rename that copy to be Promo List Carousel Mobile.
Edit Promo List Carousel Mobile. and replace all code (there's only 1 line) with:

<actinic:variable name="PromotionalLists" value="Promotional Carousel Mobile" />

That's it done.

To use it create new Fragment after the one you want to have a mobile version for.
In Fragment Details / Layout select Promo List Carousel Mobile.
In Marketing select a different set of items.

Notes:
You can have several standard and mobile carousels on a page.
All will swap according to the window width.

The window width at which it switches to the mobile view is set via code
in Design / Library / Layouts / JavaScript Header Functions / Standard Javascript Header Functions.
Look for 700 and change as required.

[JimboS]

Will test them both

James

[NormanRouxel]

The one in post #5 is the better version.

[JimboS]

Thanks again NormanRouxel

This should be standard in the software i think as very often an image on desktop is the wrong aspect when just scaled for mobile.

James