Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts

    How to place two slideshows next to each other?

    Hi,

    This is my site at the moment in testing: http://whnpf.perdu.servertrust.com/

    I have the ideal layout of my slides underneath the actual slide itself. My problem is, everytime I copy the code and place it in again, for some reason the slide goes to the next line and not next to the other slide.

    Here is my code for the current slide:

    <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>
    <script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">
    </script>
    <style type="text/css">
    .stepcarousel{
    position: relative; /*leave this value alone*/
    border: 1px solid GREY;
    overflow: scroll; /*leave this value alone*/
    width: 313px; /*Width of Carousel Viewer itself*/
    height: 262px; /*Height should enough to fit largest content's height*/
    }
    .stepcarousel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
    }
    .stepcarousel .panel{
    float: left; /*leave this value alone*/
    overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
    margin: 0px; /*margin around each panel*/
    width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    }
    </style>
    <script type="text/javascript">
    stepcarousel.setup({
    galleryid: 'mygallery', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'panel', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:3000},
    panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
    defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
    })
    </script>
    <div id="mygallery" class="stepcarousel">
    <div class="belt">
    <div class="panel">
    <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
    </div>
    <div class="panel">
    <img src="/v/vspfiles/assets/images/POPULAR.jpg" />
    </div>
    <div class="panel">
    <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
    </div>
    <div class="panel">
    <img src="/v/vspfiles/assets/images/POPULAR.jpg" />
    </div>
    <div class="panel">
    <img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
    </div>
    </div>
    </div>


    Any help would be greatly appreciated, thank you
    Last edited by myameego; 01-26-2012 at 05:30 PM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    This is a CSS issue. To place block level elements next to each other you'll either need position:absolute or float:left. Otherwise a new block level element will start on a new line

  • Users who have thanked devnull69 for this post:

    myameego (01-26-2012)

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    26
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Right ive done that now with the float:left

    The problem I have now is the fact which the slides after the first one are not working and are just still images with no forward and back buttons, although the code is copied and pasted exactly the same :/

    Any ideas on this front?

    Thank you very much in advance!


  •  

    Posting Permissions

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