Help with CSSSliders on variants

[designer_k]

Hello.

I'm trying to build a website using multiple sliders I produced using CSSSlider. I'm running into an issue with the sliders across variants, however.

I originally tried just resizing the placeholder box on the mobile side with the exact same CSSSlider code that is running on the desktop variant. But the slider would not display on the mobile variant.

So I created a new CSSSlider with smaller images and all new code for the mobile variant. The desktop variant plays, but the mobile variant does not.

Also, I have a different slideshow playing on a subpage. The code in the placeholder/widget for both variants is the same, but it only plays on the mobile variant, not the desktop. But you can see the navigation buttons for the slider on the desktop side and it shows the slider as smaller than it should be for desktop.

Here's a link to the test site:
http://www.igcconnection.com/sliderconflict/


Here's the code for the desktop slideshow that is in the placeholder/widget:

<!-- Start cssSlider.com -->
<!-- Generated by cssSlider.com 2.1 -->
<link rel="stylesheet" href="cssslider_slideshow1_files/csss_engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="cssslider_slideshow1_files/csss_engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="cssslider_slideshow1_files/csss_engine1/ie.js"></script><![endif]-->
<div class="csslider1 autoplay ">
<input name="cs_anchor1" id="cs_slide1_0" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_slide1_1" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_slide1_2" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_slide1_3" type="radio" class="cs_anchor slide">
<input name="cs_anchor1" id="cs_play1" type="radio" class="cs_anchor" checked="">
<input name="cs_anchor1" id="cs_pause1_0" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_1" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_2" type="radio" class="cs_anchor pause">
<input name="cs_anchor1" id="cs_pause1_3" type="radio" class="cs_anchor pause">
<ul>
<li class="cs_skeleton"><img src="cssslider_slideshow1_files/csss_images1/slideshow_america.jpg" style="width: 100%;"></li>
<li class="num0 img slide"> <img src="cssslider_slideshow1_files/csss_images1/slideshow_america.jpg" alt="Slideshow_America" title="Slideshow_America"></li>
<li class="num1 img slide"> <img src="cssslider_slideshow1_files/csss_images1/slideshow_charliedaniels.jpg" alt="Slideshow_CharlieDaniels" title="Slideshow_CharlieDaniels"></li>
<li class="num2 img slide"> <img src="cssslider_slideshow1_files/csss_images1/slideshow_ginblossoms.jpg" alt="Slideshow_GinBlossoms" title="Slideshow_GinBlossoms"></li>
<li class="num3 img slide"> <img src="cssslider_slideshow1_files/csss_images1/slideshow_kansas.jpg" alt="Slideshow_kansas" title="Slideshow_kansas"></li>
</ul>


<div class="cs_arrowprev">
<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
<label class="num3" for="cs_slide1_3"><span><i></i><b></b></span></label>
</div>
<div class="cs_arrownext">
<label class="num0" for="cs_slide1_0"><span><i></i><b></b></span></label>
<label class="num1" for="cs_slide1_1"><span><i></i><b></b></span></label>
<label class="num2" for="cs_slide1_2"><span><i></i><b></b></span></label>
<label class="num3" for="cs_slide1_3"><span><i></i><b></b></span></label>
</div>
<div class="cs_bullets">
<label class="num0" for="cs_slide1_0"> <span class="cs_point"></span>
</label>
<label class="num1" for="cs_slide1_1"> <span class="cs_point"></span>
</label>
<label class="num2" for="cs_slide1_2"> <span class="cs_point"></span>
</label>
<label class="num3" for="cs_slide1_3"> <span class="cs_point"></span>
</label>
</div>
</div>
<!-- End cssSlider.com -->


Here is the code for the mobile slider in the placeholder/widget:

<!-- Start cssSlider.com -->
<!-- Generated by cssSlider.com 2.1 -->
<link rel="stylesheet" href="home_mobile2_cssslider_files/csss_engine4/style.css">
<!--[if IE]><link rel="stylesheet" href="home_mobile2_cssslider_files/csss_engine4/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="home_mobile2_cssslider_files/csss_engine4/ie.js"></script><![endif]-->
<div class="csslider4 autoplay ">
<input name="cs_anchor4" id="cs_slide4_0" type="radio" class="cs_anchor slide">
<input name="cs_anchor4" id="cs_slide4_1" type="radio" class="cs_anchor slide">
<input name="cs_anchor4" id="cs_slide4_2" type="radio" class="cs_anchor slide">
<input name="cs_anchor4" id="cs_slide4_3" type="radio" class="cs_anchor slide">
<input name="cs_anchor4" id="cs_play4" type="radio" class="cs_anchor" checked="">
<input name="cs_anchor4" id="cs_pause4_0" type="radio" class="cs_anchor pause">
<input name="cs_anchor4" id="cs_pause4_1" type="radio" class="cs_anchor pause">
<input name="cs_anchor4" id="cs_pause4_2" type="radio" class="cs_anchor pause">
<input name="cs_anchor4" id="cs_pause4_3" type="radio" class="cs_anchor pause">
<ul>
<li class="cs_skeleton"><img src="home_mobile2_cssslider_files/csss_images4/slideshow_america_sm.jpg" style="width: 100%;"></li>
<li class="num0 img slide"> <img src="home_mobile2_cssslider_files/csss_images4/slideshow_america_sm.jpg" alt="Slideshow_America_sm" title="Slideshow_America_sm"></li>
<li class="num1 img slide"> <img src="home_mobile2_cssslider_files/csss_images4/slideshow_charliedaniels_sm.jpg" alt="Slideshow_CharlieDaniels_sm" title="Slideshow_CharlieDaniels_sm"></li>
<li class="num2 img slide"> <img src="home_mobile2_cssslider_files/csss_images4/slideshow_ginblossoms_sm.jpg" alt="Slideshow_GinBlossoms_sm" title="Slideshow_GinBlossoms_sm"></li>
<li class="num3 img slide"> <img src="home_mobile2_cssslider_files/csss_images4/slideshow_kansas_sm.jpg" alt="Slideshow_kansas_sm" title="Slideshow_kansas_sm"></li>
</ul>



<div class="cs_bullets">
<label class="num0" for="cs_slide4_0"> <span class="cs_point"></span>
</label>
<label class="num1" for="cs_slide4_1"> <span class="cs_point"></span>
</label>
<label class="num2" for="cs_slide4_2"> <span class="cs_point"></span>
</label>
<label class="num3" for="cs_slide4_3"> <span class="cs_point"></span>
</label>
</div>
</div>
<!-- End cssSlider.com -->

I'm also attaching a stripped down Xara file with just the sliders.

Hopefully someone can see what I am missing or has had luck getting these sliders to work on variants.

Thank you for your time!
-Kelly

[Egg Bramhill]

Hi Designer-K. How about a totally different approach? Create your slider within a standalone supersite. Set the transition to instant and Scale to fit screen (or width, not sure of what's best)

Publish it and then create a placeholder in your main site calling your slider supersite. Here's an example, try changing the browser size to view effect.

http://eggbram.xara.hosting/designer-k/#xl_xr_page_index

[designer_k]

Egg,

I had tried a similar approach in the past on a different project, building my own slider in a supersite, but could not get it to stretch to fit the width of the broswer window. When I had requested help back then, it was suggested I use an external generator like WowSlider or CSSSlider.

Or are you suggesting that I place the CSSSlider code in the standalone Xara supersite and then placing that in my main site?

Thank you,
-Kelly

[Egg Bramhill]

Hi Kelly, basically yes, load a slider supersite into a placeholder on your main & mobile site. Here's an example:

http://eggbram.xara.hosting/designer-kate/

[designer_k]

Egg,

I will give the supersite with my CSSSlider a try.

Thank you.
-Kelly

[designer_k]

Egg,

I tried the CSSSlider embedded in the presentation site, and then the presentation HTML file called in an iframe in the main site.

It works only on the desktop variant AND we are back to my original problem from last year - the slider isn't stretching to fit. Am I missing something in the steps? Your example site does stretch to fit the width of the browser and shows up on the mobile.

http://www.igcconnection.com/testslider/

Thank you.
-Kelly

[Chris M]

Kelly, the iFrame needs to be set to stretch full width. Select iFrame Placeholder > Utilities > Web Sticky/Stretchy > Full Width (radio button)

Egg, does the slider need to be in a Supersite? Why not a conventional? I ask to try and understand the workings better.

[Egg Bramhill]

Egg, does the slider need to be in a Supersite? Why not a conventional? I ask to try and understand the workings better.

Late here Chris, not 100% sure. On a quick reply I'd just say a fixed site won't resize but I maybe very wrong.

[Chris M]

Late here Chris, not 100% sure. On a quick reply I'd just say a fixed site won't resize but I maybe very wrong.

Sleep well. If i get a quiet spot today I'll test it out.

I was hoping for some profound reason that would enrich my life beyond all my wildest dreams

[Egg Bramhill]

I was hoping for some profound reason that would enrich my life beyond all my wildest dreams

Hey, your talking to me!