Results 1 to 3 of 3

Thread: Step Carousel Viewer in Responsive Design

  1. #1
    Join Date
    Jan 2011
    Thanked 0 Times in 0 Posts

    Default Step Carousel Viewer in Responsive Design

    1) Script Title: Step Carousel Viewer v1.9

    2) Script URL (on DD):

    3) Describe problem:

    Please see

    I have included the script for the videos in responsive site. On the desktop when the browser is resized from full width to minimum width say 340 px then it is not showing all the contents by clicking the navigation arrow. Right now there are 5 and it is showing upto 3 only when the browser is resized. I cleared the cache and refreshed the page also.


        position: relative; 
        overflow: scroll; 
        width: 100%; 
        height: 230px; 
    .stepcarousel .panel{
        float: left; 
        overflow: hidden; 
        margin: 10px; 
        width: 250px;
    @media only screen and (min-width: 420px)  {
           .stepcarousel .panel {
    		margin:10px 25px;
    Any help is appreciated.

    Thank you,
    Last edited by Paramasivan; 08-11-2013 at 07:35 PM.

  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries



    First - Backup everything we are about to change, just in case. (the page, the styles.css file, the js/demo-video-page.js file, the stepcarousel.js file)

    OK, at that narrow of a window width, you are going to need the panel divs even narrower than 250px in order to fit all of them in (style.css around line #1753 changes highlighted):

    .stepcarousel .panel{
        float: left; /*leave this value alone*/
        overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
        margin: 8px; /*margin around each panel*/
        width: 170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    And of course you're right about needing to refresh the page in order to recalculate the the left and right nav movement, and belt size - Unless we modify the script a little and add some code to the page. This version of the script (right click and 'Save As'):


    allows you to reinitialize the panels, belt and default back and forth nav on resize (the nav already does that actually). Use it in place of your current version.

    Finally, add this to the end of the js/demo-video-page.js file:

    		$.each(stepcarousel.configholder, function(i, c){
    			stepcarousel.alignpanels($, c, true);
    The browser cache may need to be cleared and/or the page refreshed to see changes.

    For others who might want to try this, that code goes after the last stepcarousel.setup call for the page. In this particular case, that happens to be in the external js/demo-video-page.js file. For a typical installation, it's in the head of the page in an internal script block.
    Last edited by jscheuer1; 08-11-2013 at 09:02 PM. Reason: update attached script
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Paramasivan (08-11-2013)

  4. #3
    Join Date
    Jan 2011
    Thanked 0 Times in 0 Posts



    Thank you very much.

Similar Threads

  1. Step Carousel Viewer (auto step)
    By Mission Impossible in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 04-22-2013, 11:48 AM
  2. Can Step Carousel be used in a 'Responsive' design?
    By samsen in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 12-02-2012, 10:57 PM
  3. Step Carousel Viewer v1.8
    By jasonsilver in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-30-2010, 04:17 PM
  4. Resolved Step Carousel Viewer v1.6.1
    By armababy in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 01-24-2009, 10:00 PM
  5. loading Step Carousel Viewer in middle of carousel
    By sam4682 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-31-2008, 11:07 PM


Posting Permissions

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