Accordion slider
  • Great Slider works well, looks good. But unable to make multiple copies on the same page!  second slider comes out with with all images statically shown horizontally down the page! Any ideas?
  • Hi maryweb,

    Thank you for your purchase :)

    It certainly can be done... you'll have to replace all the code in the head area of the HTML Code Fragment of the additional slider for this:

    <script type="text/javascript">
    var j = jQuery.noConflict();
     j(document).ready(function() {
    j("#acc-slider2").zAccordion({
    tabWidth: 100,
    speed: 650,
    slideClass: 'acc-slider',
    animationStart: function () {
    j('#acc-slider2').find('li.acc-slider-open div').css('display', 'none');
    j('#acc-slider2').find('li.acc-slider-previous div').css('display', 'none');
    },
    animationComplete: function () {
    j('#acc-slider2').find('li div').fadeIn(600);
    },
    width: 900,
    height: 400
    });
     });
    </script>
    <style type="text/css">
    #acc-slider2 {
      margin: 0;
    }
    #acc-slider2 li {
    overflow:visible!important;
    }
    #acc-slider2 img {
     -webkit-box-shadow:#000000 0 0 12px;
      box-shadow:#000000 0 0 12px;
    }
    #acc-slider2 div {
    background-image: url(acc-bg.png);
    bottom:0;
    height:110px;
    left:0;
    position:absolute;
    width:100%;
    z-index:10;
    }
    #acc-slider2 .acc-slider-closed div {
    width:100px;
    }
    #acc-slider2 strong {
    color:#fff;
    font-family: 'Arial', sans-serif;
    display:block;
    margin-bottom:5px;
    padding:10px 10px 0;
    text-shadow:none;
    }
    #acc-slider2 p {
    color:#fff;
    font-family: 'Arial', sans-serif;
    display:block;
    font-size:14px;
    padding:0 10px;
    text-shadow:none;
    }
    #acc-slider2 .acc-slider-open strong {
    color:#fff;
    font-size:22px;
    }
    #acc-slider2 .acc-slider-closed strong {
    font-size:18px;
    margin-bottom:5px;
    }
    #acc-slider2 .acc-slider-closed p {
    display:none;
    }
    </style>


    Then in the body area, replace this:

    <ul id="acc-slider">

    For this:

    <ul id="acc-slider2">

    Let us know if you need any more help

    Neil
  • Many thanks. Works well. Now on my 5th!
  • Thanks for the update Mary and glad Neil's knowledge of the code sorted the issue for you ;)
This discussion has been closed.
All Discussions

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion