Results 1 to 2 of 2

Thread: Carousel Position Problem

  1. #1
    Join Date
    Jul 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Carousel Position Problem

    1) Script Title: Step Carousel
    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...epcarousel.htm

    3) Describe problem:

    I embedded a step caraousel viewer in my document. It gets really strange positions, which means its always on the right. Even if i try to center it with margin-left: auto; and margin-right: auto; it isnt centered. Does anyone have an idea?

    HTML Code:
    <div id="port2">
    
           
    <div id="slider" class="stepcarousel">
    <div class="belt">
    
    
    <div class="slidepanel">
    <img src="http://i30.tinypic.com/531q3n.jpg" />
    </div>
    
    <div class="slidepanel">
    <img src="http://i29.tinypic.com/xp3hns.jpg" />
    </div>
    
    <div class="slidepanel">
    <img src="http://i26.tinypic.com/11l7ls0.jpg" />
    </div>
    
    <div class="slidepanel">
    <img src="http://i31.tinypic.com/119w28m.jpg" />
    </div>
    
    <div class="slidepanel">
    <img src="http://i27.tinypic.com/34fcrxz.jpg" />
    </div>
    
    </div>
    </div>
    
    
    
    <p id="slider-paginate" style="width: 250px; text-align:center">
    <img src="opencircle.png" data-over="graycircle.png" data-select="closedcircle.png" data-moveby="1" />
    </p>
    
    <p>
    <a href="javascript:stepcarousel.stepBy('slider', -1)">Back 1 Panel</a> <a href="javascript:stepcarousel.stepBy('slider', 1)">Forward 1 Panel</a> <br />
    
    <a href="javascript:stepcarousel.stepTo('slider', 1)">To 1st Panel</a> <a href="javascript:stepcarousel.stepBy('slider', 2)">Forward 2 Panels</a>
    </p>
    
    </div>
    the css

    HTML Code:
    #port2 {position:relative; width:100%; left:100%;-webkit-transition: 0.4s ease-in-out;-moz-transition: 0.4s ease-in-out;-o-transition: 0.4s ease-in-out;transition: 0.4s ease-in-out;}
    
    
    
    .stepcarousel{
    position: relative; /*leave this value alone*/
    
    overflow: scroll; /*leave this value alone*/
    width: 600px; /*Width of Carousel Viewer itself*/
    height: 200px; /*Height should enough to fit largest content's height*/
    margin-left:auto;
    margin-right:auto;
    }
    
    .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 around each panel*/
    width: 600px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
    }

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Have you tried positioning the whole thing with CSS? It appears to be positioned relatively, so try something like:
    Code:
    left: -100px;
    Inside the CSS for stepcarousel. Tell us if that moves it at all.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

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
  •