Help with CSSSliders on variants
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
Reply With Quote
Bookmarks