HTML how to make work the carousel in Architecture template

Replace your style.css codes with the following:

HTML:

html, body, ul, li, h1, h2, h3, h4 {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #544e38;
}
img {
    border: 0px;
}
a {
    text-decoration: underline;
}
a:hover {
    text-decoration: underline;
}
.prev {
float: left;
}

.next {
float:right;
}
.left {
    float: left;
}
.right {
    float: right;
}
.more {
    text-align: right;
}
.clear {
    clear: both;
}

body {
    background: white;
    text-align: center;
    font: 11px verdana, arial, sans-serif;
}
#wrapper {
    text-align: left;
    margin: auto;
    width: 728px;
}

#body {
    background: url(images/body_bg.gif) repeat-y;
    color: white;
    width: 100%;
}
#body-top {
    background: top left url(images/body_top.gif) no-repeat;
    position: relative;
}
#body-bot {
    background: bottom left url(images/body_bot.gif) no-repeat;
    padding-bottom: 17px;
}
#body-top-2 {
    position: absolute;
    top: 12px;
    left: 251px;
    width: 463px;
    height: 11px;
    background: top left url(images/body_top_2.gif) no-repeat;
}

#wrapper {
    position: relative;
    padding-top: 68px;
}
h1 {
    position: absolute;
    top: 36px;
    left: 13px;
    font-size:26px;
    color:#3f3c2d;
    font-variant: small-caps;
    font-family: Arial, Helvetica, sans-serif;
}
#banner{
        position: absolute;
        background-image: url(images/smalllogo.jpg);
    width: 229px;
    height: 46px;
    top: 20px;
    banner: 1px solid #ff0000;
    left: 12px;
}
#nav {
    position: absolute;
    top: 43px;
    left: 256px;
    
}
#nav  a {
    background-image:url(images/menu.gif);
    width:90px;
    height:19px;
    display:inline;
    float:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-align:center;
    padding-top:6px;
    text-decoration:none;
    color:#e9e4d0;
    font-weight:bolder;
}
#nav  a:hover {
    color:#544e38;
}

#body-bot {
    padding-top: 12px;
}
#welcome {
    float: left;
    width: 231px;
    padding-left: 13px;
    
}
#welcome a {
    color: #F2F7F8;
}
#welcome a:hover {
    color: #CFCCBF;
}
#welcome h2 {
    text-align: center;
    margin: 11px;
    color:#ceb085;
    font-size:24px;
}
#welcome p {
    margin: 0px 19px;
}
#welcome .more {
    margin-top: 18px;
    margin-bottom: 10px;
}

#content {
    float: right;
    width: 418px;
    padding-right: 34px;
    padding-top: 23px;
    color: #686454;
}
#content .left {
    margin-right: 10px;
}
#content a {
    color: #5A5644;
}
#content a:hover {
    color: #26241A;
}

#intro {
    margin: 12px;
}

.fineline {
    border-bottom: 1px solid #D3CAA9;
    margin-bottom: 12px;
}

.fineline-flat {
    border-bottom: 1px solid #D3CAA9;
}

.fineborder {
    border: 1px solid #D3CAA9;
    padding: 2px;
    width: 186px;
    margin-bottom: 12px;
}

.bar-lit {
    padding-left: 6px;
    background: 0px 4px url(images/bar_lit.gif) no-repeat;
}
.bar-drk {
    padding-left: 6px;
    background: 0px 4px url(images/bar_drk.gif) no-repeat;
}

#picbar {
    background: #A3A189;
    width: 415px;
    margin: 2px 0 19px 0;
}

#arr-left, #arr-right  {
    float: left;
    width: 15px;
}


.jCarouselLite {
    float: left;width: 385px;
}

.picbox {
    float: left;
    width: 117px;
    padding: 2px;
    border: 1px solid #8B846A;
    margin: 5px 0px 5px 4px;
}

#picbar img {
    display: block;
}

#arr-right {
    margin-left: 4px;
}

#planer {
    float: left;
    width: 186px;
    border-right: 1px solid #D3CAA9;
    padding-right: 20px;
    padding-top: 5px;
}
#stories {
    float: right;
    width: 195px;
    padding-top: 5px;
}

#planer p, #stories p {
    margin: 4px 0px;
}

#planer .more, #stories .more {
    margin: 12px 0px;
}

.clear-flat {
    margin-bottom: 4px;
}


#footer {
    font: 11px arial, sans-serif;
    color: #4E4A3A;
    text-align: right;
    padding-right: 47px;
}
#footer p {
    margin-top: 0.5em;
}



    #slider ul, #slider li{
        margin:0;
        padding:0;
        list-style:none;
        }
    #slider li{ 
        /* 
            define width and height of list item (slide)
            entire slider area will adjust according to the parameters provided here
        */ 
        width:117px;
        overflow:hidden; 
        }
    span#prevBtn{}
    span#nextBtn{}                    

 

Thank you, Tom, for not abandoning me, but replacing the style.jss didn't change much the situation VARIMMO

Only locally the right arrow looks to be where it should, but the other images are shifted and the carousel doesn't move

 

How about now? VARIMMO

Still nothing happens, though

 

For some reason those three images have to be coded like this:

HTML:

<li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="http://www.freewebsitetemplates.com/forum/images/pic_3.jpg" alt="" height="90" width="128"></li>
<li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="http://www.freewebsitetemplates.com/forum/images/pic_4.jpg" alt="" height="90" width="128"></li>
<li style="overflow: hidden; float: left; width: 128px; height: 90px;"><img src="http://www.freewebsitetemplates.com/forum/images/pic_5.jpg" alt="" height="90" width="128"></li>

Maybe someone can explain.

BTW: jcarousellite.js is not needed.

 

Yes, it works!

My fix was just to make the images display correctly but you do need jcarousellite.js for scrolling.

 

Wow, it really works now! You're a genius, ISHKEY, and Tomw! Thanks a lot, but please explain in simple words what was wrong

 

Too many copy and paste and typos along the way!

You said this at one time:

 

I'm having the same problem, can't get the images and buttons to stay on one line.