Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Oct 2019
    Location
    Florida, United States
    Posts
    23

    Default 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
    Attached Files Attached Files

  2. #2
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Help with CSSSliders on variants

    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


    Attached Files Attached Files
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  3. #3
    Join Date
    Oct 2019
    Location
    Florida, United States
    Posts
    23

    Default Re: Help with CSSSliders on variants

    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

  4. #4
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Help with CSSSliders on variants

    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/
    Attached Files Attached Files
    Last edited by Egg Bramhill; 22 July 2020 at 07:27 PM. Reason: Got your name wrong!
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  5. #5
    Join Date
    Oct 2019
    Location
    Florida, United States
    Posts
    23

    Default Re: Help with CSSSliders on variants

    Egg,

    I will give the supersite with my CSSSlider a try.

    Thank you.
    -Kelly

  6. #6
    Join Date
    Oct 2019
    Location
    Florida, United States
    Posts
    23

    Default Re: Help with CSSSliders on variants

    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

  7. #7
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,921

    Default Re: Help with CSSSliders on variants

    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.

  8. #8
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Help with CSSSliders on variants

    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.
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  9. #9
    Join Date
    Dec 2018
    Location
    Australia
    Posts
    1,921

    Default Re: Help with CSSSliders on variants

    Quote Originally Posted by Egg Bramhill View Post
    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

  10. #10
    Join Date
    Aug 2000
    Location
    Harwich, Essex, England
    Posts
    22,090

    Default Re: Help with CSSSliders on variants

    I was hoping for some profound reason that would enrich my life beyond all my wildest dreams
    Hey, your talking to me!
    Egg

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •