Cannot get Coda Slider to work

StackOverflow https://stackoverflow.com/questions/14756809

Question

I've been going at this for 2 days now. I'm trying to setup a simple content slider using this jQuery plugin. The slider I have in mind has only 2 panels(slides), both should have fixed height and width.

I tried according to its documentation, got nowhere. I downloaded the source and dissected the index page, removed all the other HTML except for the slider and coped that structure along with the required files but still no avail and I'm totally frustrated now.

Below is the code I have now.

HTML

<html>
<head>
<title>Untitled Document</title>
<!--stylesheets-->
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/coda-slider.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/myStyles.css" />

<!--scripts-->
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.0.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery.coda-slider-3.0.js"></script>

<script type="text/javascript">
$(function() {
    $('#main-slider').codaSlider({
      autoHeight: false,
      continuous:false,
      dynamicArrows: false,
      dynamicTabs: false
    });
    $('#showcase').codaSlider();
});

</script>
</head>
<body>

<div class="coda-slider"  id="main-slider"><!-- Main Slider -->
    <div>

          <div class="coda-slider"  id="showcase"><!-- Showcase Slider -->

                <div id="first"><!-- first panel -->
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of first panel -->

                <div id="second"><!-- second panel -->
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of second panel -->

          </div> <!-- End Showcase Slider -->

    </div>
</div><!-- End Main Slider -->

</body>
</html>

CSS

body {
    background-color:#FC9;  
}

#main-slider {
    width:1000px;
    height:600px;
    background-color:#FFF;
    margin:80px auto;
}

]
#showcase {
    width:1000px;
    height:600px;
}

#first {
    width:1000px;
    height:600px;
    background-color:#CF6;
}

#second {
    width:1000px;
    height:600px;
    background-color:#F36;
}

Maybe I'm just overlooking something. Its supposed to be very easy according to the documentation. Can somebody please tell me what I'm missing here? Or better yet, slap together an example if not too much of a trouble? I'd really appreciate it!

Thank you.

Was it helpful?

Solution

I've never tried that plugin, but have you tried simply changing

$(function() {
    $('#main-slider').codaSlider({
      autoHeight: false,
      continuous:false,
      dynamicArrows: false,
      dynamicTabs: false
    });
    $('#showcase').codaSlider();
});

into 

$(function() {
    $('#main-slider').codaSlider({
      autoHeight: false,
      continuous:false,
      dynamicArrows: false,
      dynamicTabs: false
    });
});

At the moment it seems like you're trying to create a slider inside a slider, but I get the feeling from your question that that's not your intended behavior.

Addition: Forgot to mention to also change this:

<div class="coda-slider"  id="main-slider"><!-- Main Slider -->
    <div>

          <div class="coda-slider"  id="showcase"><!-- Showcase Slider -->

                <div id="first"><!-- first panel -->
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of first panel -->

                <div id="second"><!-- second panel -->
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
                </div><!-- end of second panel -->

          </div> <!-- End Showcase Slider -->

    </div>
</div>

into

<div class="coda-slider"  id="main-slider"><!-- Main Slider -->
      <div id="first"><!-- first panel -->
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
      </div><!-- end of first panel -->

      <div id="second"><!-- second panel -->
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubiaCras vulputate libero ut lorem varius quis dignissim orci malesuada. Duis tempus feugiat libero at tempor. Integert felis ultrices et. Duis sit amet risus sed magna convallis mattis. Vestibulum congue, odio suscipit tempor vulputate, massa lectus dapibus massa, quis dictum mauris purus at velit.Pellentesque ligula erat, tincidunt ut ornare vitae, tincidunt porttitor eros. Cras consectetur tellus odio. 
      </div><!-- end of second panel -->

</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top