Slider not displayed

Question

din3sh 0 Newbie Poster

11 Years Ago

i tried everything to get the slider working @ http://din3shie.x10.mx/IndEnt/

index.html file :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Rifle   
Description: A two-column, fixed-width design with simple color scheme.
Version    : 1.0
Released   : 20120520
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Indian Enterprises</title>
<link href="http://fonts.googleapis.com/css?family=Abel|Arvo" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.slidertron-1.1.js"></script>
<script type="text/javascript">

$(function() 
{
        $('#menu > ul').dropotron({

            mode: 'fade',

            globalOffsetY: 11,

            offsetY: -15

        });


        $('#slider').slidertron({

            viewerSelector: '.viewer',

            indicatorSelector: '.indicator span',

            reelSelector: '.reel',

            slidesSelector: '.slide',

            speed: 'slow',

            advanceDelay: 4000

        });
    });

</script>
</head>
<body>
<div id="wrapper">
    <div id="header-wrapper">
        <div id="header">



<img src="logo.png" width="100%" height="100%"/>

            </div>
        </div>
    </div>
    <!-- end #header -->
    <div id="menu-wrapper">
        <ul id="menu">
            <li class="current_page_item"><a href="#"><span>Home</span></a></li>

            <li><a href="Products.html"><span>Products</span></a></li>
            <li><a href="#"><span>Services</span></a></li>
            <li><a href="#"><span>About Us</span></a></li>
            <li><a href="#"><span>Contact Us</span></a></li>
        </ul>
        <script type="text/javascript">
            $('#menu').dropotron();
        </script>
    </div>
    <!-- end #menu -->
    <div id="slider">
        <div class="viewer">
            <div class="reel">
                <div class="slide">
                    <img src="images/imported-pine.jpg" alt="" />
                </div>
                <div class="slide">
                    <img src="images/images.jpg" alt="" />
                </div>
                <div class="slide">
                    <img src="images/images2.jpg" alt="" />
                </div>
                <div class="slide">
                    <img src="images/images3.jpg" alt="" />
                </div>

            </div>
        </div>
        <center><div class="indicator">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div></center>
    </div>
    <div id="page">
        <div id="content">
            <div class="contentbg">
                <div class="post">
                    <h2 class="title"><a href="#">Welcome to Indian Enterprises</a></h2>

                    <div class="entry">
                        <p>We are into Timber trading business since 1974 and since then there has been no looking back. Under the efficient leadership of our Directors, Late Mr. M Y Khan and Mr M Shahzada Khan, we have been scaling the heights of success at an accelerating pace. His long experience in the field, deep understanding, and policy of evaluating the entire system has enhanced our status as a modern production unit. Our main focus is and will be providing excellent products and complete customersatisfaction.</p>

                    </div>
                </div>
                <div class="post">
                    <h2 class="title"><a href="#">Our Competitive Strength </a></h2>

                    <div class="entry">
                        <p>We are the most preferred one in the industry due to the following factors :<br>
<ul type="disc">
<li>Prompt and assured supply 24 x 7</li>
<li>4 Decades experience.</li>
<li>Wide national contacts for procurement of Timber.</li>
<li>Satisfactory supplies to company.</li>
<li>International Quality at domestic price.</li>
</ul> 

 </p>
                    </div>
                </div>
                <div class="post">
                    <h2 class="title"><a href="#">Why Us?</a></h2>

                    <div class="entry">
                        <p>
                        <ul type="disc">
<li>Superior infrastructure</li>
<li>Innovative designs</li>
<li>Research based products designed for comfort</li>
<li>Competitive pricing</li>
<li>Customization of goods to meet the demands of customers</li>
<li>Timely delivery</li>
</ul> 

</p>
                    </div>
                </div>
                <div style="clear: both;">&nbsp;</div>
            </div>
        </div>
        <!-- end #content -->
        <div id="sidebar-bg">
            <div id="sidebar">
                <ul>
                    <li>
                        <div id="sidebar-header">Indian Enterprises</div>
                        <ul>
                            <li><a href="Products.html"><font color="black">Home</font></a></li>
                            <li><a href="#"><font color="black">Products</font></a></li>
                            <li><a href="#"><font color="black">Services</font></a></li>
                            <li><a href="#"><font color="black">About Us</font></a></li>
                            <li><a href="#"><font color="black">Contact Us</font></a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
        <!-- end #sidebar -->
        <div style="clear: both;">&nbsp;</div>
    </div>
    <!-- end #page -->
</div>
<div id="footer">
    <p>2012. www.indianenterprises.com. All rights reserved. Design by Dinesh Ramchandani Images by <a href="http://fotogrph.com/">fotogrph</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>

style.css file :

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
    margin: 0;
    padding: 0;
    background: white;
    font-family: 'Arvo', serif;
    font-size: 14px;
    color: #CFCFCF;
}

h1, h2, h3 {
    margin: 0px;
    padding: 0px;

    font-family: 'Arvo', sans-serif;
    font-weight: 400;
    color: #424242;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 2.4em;
}

h3 {
    font-size: 1.6em;
}

p, ul, ol {
    margin-top: 0;
    line-height: 180%;
}

ul, ol {
}

a {
    text-decoration: underline;
    color: #9C9A9A;
}

a:hover {
    text-decoration: none;
}

img.border {
    border: 6px solid #EEE7DF;
}

img.alignleft {
    float: left;
    margin-right: 25px;
}

img.alignright {
    float: right;
}

img.aligncenter {
    margin: 0px auto;
}

#wrapper {
    margin: 0 auto;
    padding: 0;
}

/* Header */

#header-wrapper {
    /*vertical-align:top;*/
    width: 980px;
    height: 240px;
    margin: 10px ;
    padding: 0px;
    background: url(logo.jpg) repeat-x;
    border-radius: 5px;
    color: #000000;
}

#header {
    width: 970px;
    height: 240px;
    margin: 0 auto;
}

/* Logo */

#logo {
    width: 980px;
    height: 100px;
    margin: 0px auto;
    padding: 80px 0px 0px 0px;
    color: #8D7B64;
}

#logo h1, #logo p {
    display: block;
    margin: 0px;
    padding: 0px;

}

#logo h1 {
    letter-spacing: -2px;
    text-align: center;

    font-size: 80px;
    color: #ECE1CF;
}

#logo h1 a {
    color: #ECE1CF;
}

#logo p {
    text-align: center;
    font-family: 'Arvo', sans-serif;
    font-size: 20px;
}

#logo a {
    border: none;
    background: none;
    text-decoration: none;
    color: #8D7B64;
}

/* Search */

#search {
    float: right;
    width: 280px;
    height: 100px;
    padding: 0;
}

#search form {
    height: 41px;
    margin: 0;
    padding: 60px 0 0 30px;
}

#search fieldset {
    margin: 0;
    padding: 0;
    border: none;
}

#search-text {
    width: 195px;
    padding: 6px 10px;
    border: none;
    background: #FFFFFF;

    font: normal 11px;
    color: #7F7F81;
}

#search-submit {
    display: none;
}

/* Menu */

#menu-wrapper {
    width: 980px;
    height: 60px;
    margin: 0px auto;
    padding: 0px;
    background: url(images/img02.gif) repeat-x;
    border-radius: 5px;
    color: #000000;
}

#menu {
    margin: 0;
    padding: 0px 20px;
    list-style: none;
    line-height: 60px;
    letter-spacing: -1px;
    text-decoration: none;

    text-shadow: 1px 1px 1px #ffffff;
    font-family: 'Arvo', sans-serif;
    font-size: 18px;
    font-weight: normal;
    color: #000000;
}

#menu li {
    float: left;
    margin-right: 1px;
}

#menu a {
    display: block;
    float: left;
    height: 60px;
    margin: 0px;
    color: #000000;
    text-decoration: none;
}

#menu .current_page_item a {
    text-shadow: 2px 2px 2px rgba(0,0,0,.3);
    background: rgba(60,40,20,0.5);
    color: #ffffff;
}

#menu a:hover {
    background: rgba(60,40,20,0.5);
    color: #ffffff;
    text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

#menu span {
    padding: 0px 20px;
}

#menu > li {
}

#menu > li.active {
    background: rgba(60,40,20,0.5);
    color: #FFFFFF;
    text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}

.dropotron li.opener {
    border-right: solid 2px #FFFFFF;
}

.dropotron {
    margin: 0px;
    padding: 10px 0px;
    background: #8D7B64;
    list-style: none;

    font-family: 'Arvo', sans-serif;
    font-size: 16px;
    font-weight: normal;
    color: #FFFFFF;
}

.dropotron a {
    color: #fff;
    text-decoration: none;
}

.dropotron li {
    margin: 0px;
    padding: 5px 20px;
}

.dropotron li:hover, .dropotron li.active {
    background: #ECE1CF;
    color: #000000;
}

.dropotron li:hover a, .dropotron li.active a {
    color: #000000;
}

/* Page */

#page {
    width: 980px;
    margin: 0px auto;
    padding: 20px 0px 20px 0px;
    background: rgba(0,0,0,0);
    border-radius: 5px;
}

/* Content */

#content {
    float: right;
    width: 750px;
    background: rgba(0,0,0,0.3);
    border-radius: 5px;
}

#content .contentbg {
    width: 590px;
    padding: 10px 30px 0px 30px;
}

.post {
    clear: both;
    padding-bottom: 10px;
    border-bottom: 1px solid #000000;
}

.post .title {
    padding-top: 10px;
    letter-spacing: -1px;

    font-size: 40px;
    color: #FFFFFF;
}

.post .title a {
    border: none;
    color: #ECE1CF;
    text-decoration: none;
}

.post .meta {
    padding-bottom: 10px;
    text-align: left;
    font-size: 11px;
    font-style: italic;
}

.post .meta a {
}

.post .entry {
    text-align: justify;
    margin-bottom: 25px;
    padding: 10px 0px 0px 0px;
}

.links {
    display: block;
    width: 96px;
    padding: 2px 0px 2px 0px;
    background: #A53602;
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    color: #FFFFFF;
}

/* Sidebar */

#sidebar-bg {
background: url(images/img01.gif) repeat;
    border:2px solid;
/* padding:10px 10px; 
 */

border-radius:5px;

    float: left;
    width: 200px;
    margin-left :5px;

}
#sidebar-header {
background:url(images/img03.gif);
margin:2px;
color:black;
text-align:center;
border-radius:2px;
font-weight:bold;
}
/*#sidebar {
    line-height: 60px;
    letter-spacing: -1px;
    text-decoration: none;

    text-shadow: 1px 1px 1px #ffffff;
    font-family: 'Arvo', sans-serif;
    font-size: 18px;
    font-weight:bold;
    color:#FFFFFF;
    overflow: hidden;
    width: 200px;
    padding: 20px 20px 20px 30px;
}*/

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;


}

#sidebar li {


    margin: 0;
    padding: 0;

}

#sidebar li ul {
    margin: 0px 0px;
    /* padding-bottom: 30px; */
}

#sidebar li li {
    line-height: 35px;
}

#sidebar li li span {
    display: block;
    margin-top: -20px;
    padding: 0;
    font-size: 11px;
    font-style: italic;
}
#sidebar a:link,a:visited
{
display:block;
/*  */
color:white;
/*background-color:#98bf21;
width:120px;*/
text-align:left;
 padding-left: 5px;
text-decoration:none;

}
#sidebar a:hover,a:active
{
background: rgba(60,40,20,0.5);
    color: white;
    /* text-shadow: 2px 2px 2px rgba(0,0,0,.3); */
}
#sidebar h2 {

    text-align:center;
    height: 30px;
    margin-bottom: 10px;
    padding: 5px 0 0 0px;
    border-bottom: 1px solid black;
    letter-spacing: -1px;
    font-size: 25px;
    color: #ffffff;
}

#sidebar p {
    margin: 0 0px;
    padding: 0px 20px 30px 0px;
    text-align: justify;
}

#sidebar a {
    border: none;
}

#sidebar a:hover {
}

/* Calendar */

#calendar {
}

#calendar_wrap {
    padding: 20px;
}

#calendar table {
    width: 100%;
}

#calendar tbody td {
    text-align: center;
}

#calendar #next {
    text-align: right;
}

/* Footer */

#footer {
    margin: 40px 0 120px 0;
}

#footer p {
    margin: 0;
    padding-top: 18px;
    line-height: normal;
    text-align: center;

    font-family: 'Arvo', sans-serif;
    font-size: 16px;
    color: #76716C;
}

#footer a {
    text-decoration: underline;
}

br.clearfix {
    clear: both;
}

#slider {
    position: relative;
    width: 590px;
    margin: 0px auto 20px auto;
}

#slider .viewer {
    width: 590px;
    height: 300px;
    overflow: hidden;
    margin: 0 auto;
}

#slider .viewer .reel {
    display: none;
    height: 300px;
}

#slider .slide {
    width: 890px;
    height: 250px;
    padding: 10px;
}

#slider .indicator {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 20px 0 0 0;
}

#slider .viewer .reel .slide {
    position: relative;
    width: 590px;
    height: 300px;
}

#slider .indicator span {
    display: inline-block;
    text-indent: -9999em;
    width: 12px;
    height: 12px;
    background: #E3DFDF;
    border-radius: 6px;
    margin: 0 2px 0 2px;
}

#slider .indicator span.active {
    background: #6E6E6E;
}

#splash {
    width: 980px;
    margin: 30px auto 30px auto;
}

#splash img {
    border-radius: 5px;
}

i copied all the slider code from a css template which works perfectly .. however couldnt get this to work. Help.

Thanks in advace.
Dinesh Ramchandani.

css slider web-design

3 Contributors
9 Replies
329 Views
2 Days Discussion Span
Latest Post 11 Years Ago Latest Post by din3sh

All 9 Replies

blocblue 238 Posting Pro in Training

11 Years Ago

Can you post a link to the slider API?

Also, the reel is set to display:none; on line #517. Removing that gets the images to display. However, without seeing the API it's hard to know whether that's something the slider should be doing (without trawling through the JS source too).

blocblue 238 Posting Pro in Training

11 Years Ago

Where did you get the JavaScript plugin from?

Well developed plugins include an document telling you how to use it, with code examples. Post a link to that document.

Otherwise, what should the slider do? As there are likely alternatives that do the same and do explain how they should be used.

ko ko 97 Practically a Master Poster

11 Years Ago

$('#slider').slidertron({

            viewerSelector: '.viewer',

            indicatorSelector: '.indicator span',

            reelSelector: '.reel',

            slidesSelector: '.slide',

            speed: 'slow',

            advanceDelay: 4000

        });

Are you sure this is the correct settings of the plugin ? I just searched and download this plugin. There is documentation inside the package. Check it carefully. It is the original link of the plugin.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

din3sh 0 Newbie Poster · Answer 1 · 2012-08-03T16:56:27+00:00

din3sh 0 Newbie Poster

11 Years Ago

nebody pls ?

din3sh 0 Newbie Poster · Answer 2 · 2012-08-03T16:59:53+00:00

i m a newbie .. i dont know what an api here means .. pls elaborate ..

din3sh 0 Newbie Poster · Answer 3 · 2012-08-03T17:08:31+00:00

i corrected line #517 .. it is showing the image .. but cant change it ..

din3sh 0 Newbie Poster · Answer 4 · 2012-08-05T12:34:28+00:00

i downloaded one readymade css template with the layout that i found appropriate but with a splash image http://www.freecsstemplates.org/preview/rifle/ .. n another with a slider .. so i was trying to replace the image with the slider http://www.freecsstemplates.org/preview/bigbusiness2/ .. copy pasted every piece of code possible that i thought would make the slider work ..

din3sh 0 Newbie Poster · Answer 5 · 2012-08-05T12:38:13+00:00

@blocblue i want the slider image to change automatically after ssay 5 secs .. also manually on clicking the slider indicators ..

din3sh 0 Newbie Poster · Answer 6 · 2012-08-05T13:17:00+00:00

@zero13 : I downloaded the javascript .. tried out every possible way to make it work .. cant .. it works when i use it alone .. but when i use it in my page .. it doesn't .. is something overridding the code which makes it work ?

Slider not displayed

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers