Results 1 to 3 of 3

Thread: Featured Content Slider

  1. #1
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Featured Content Slider

    1) Script Title:
    Featured Content Slider

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem:
    If I add a css for position like (position: relative), the fade between each 'tab' stops working. Somthing like this
    Code:
    <div id="slider1" class="contentslide">
    <div class="opacitylayer">
    
    <div class="contentdiv">
    <div id="divContainer_1" style="overflow: hidden; position: relative; width: 100%; height: 100%; min-height: 160px;">
      <div id="divContent_1" style="padding: 5px; position: absolute;"> 
      Content 1
      </div>
    </div>
    </div>
    
    <div class="contentdiv">
    <div id="divContainer_1" style="overflow: hidden; position: relative; width: 100%; height: 100%; min-height: 160px;">
      <div id="divContent_1" style="padding: 5px; position: absolute;"> 
      Content 2
      </div>
    </div>
    </div>
    
    </div>
    </div>
    
    <div class="pagination" id="paginate-slider1"></div>
    
    <script type="text/javascript">
    //Define: ContentSlider("slider_ID", [autorotate_miliseconds], [custompaginatelinkstext], [customnextlinktext])
    ContentSlider("slider1")
    
    </script>

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Are you sure it's the position:relative declaration that's disabling the fade effect? Using the default example HTML, adding that in doesn't break the fade effect:

    Code:
    <div id="slider1" class="contentslide">
    <div class="opacitylayer">
    
    <div class="contentdiv" style="overflow: hidden; position: relative;">
    Content 1
    </div>
    
    <div class="contentdiv" style="overflow: hidden; position: relative;">
    Content 2
    </div>
    
    <div class="contentdiv" style="overflow: hidden; position: relative;">
    Content 3
    </div>
    
    </div>
    </div>

  3. #3
    Join Date
    Aug 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    For me it broke the effect. I redesigned the content with out any positioning which seems to be working fine now.

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
  •