...

View Full Version : Resolved How to place two slideshows next to each other?



myameego
01-26-2012, 04:05 PM
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:)

devnull69
01-26-2012, 04:32 PM
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

myameego
01-26-2012, 04:34 PM
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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum