Adding autoplay + prev&next buttons to slider - javascript

im using the slider explained in codrops tutorial http://tympanus.net/codrops/2014/03/13/tilted-content-slideshow/comment-page-2/#comment-458990.
It uses a simple ordered list to display the slides:
<div class="slideshow" id="slideshow">
<ol class="slides">
<li class="current">
<div class="description">
<h2>Slide 1 Title</h2>
<p>Slide 1 content</p>
</div>
<div class="tiltview col">
<img src="img/1_screen.jpg"/>
<img src="img/2_screen.jpg"/>
</div>
</li>
<li>
<div class="description">
<h2>Slide 2 title</h2>
<p>Slide 2 content</p>
</div>
<div class="tiltview row">
<img src="img/3_mobile.jpg"/>
<img src="img/4_mobile.jpg"/>
</div>
</li>
</ol>
</div><!-- /slideshow -->
Then a navigation is created using javascript, this navigation display a set of that when clicked they display the slides:
TiltSlider.prototype._addNavigation = function() {
// add nav "dots"
this.nav = document.createElement( 'nav' )
var inner = '';
for( var i = 0; i < this.itemsCount; ++i ) {
inner += i === 0 ? '<span class="current"></span>' : '<span></span>';
}
this.nav.innerHTML = inner;
this.el.appendChild( this.nav );
this.navDots = [].slice.call( this.nav.children );
}
TiltSlider.prototype._initEvents = function() {
var self = this;
// show a new item when clicking the navigation "dots"
this.navDots.forEach( function( dot, idx ) {
dot.addEventListener( 'click', function() {
if( idx !== self.current ) {
self._showItem( idx );
}
} );
} );
}
It all works fine but does anybody have any idea of how could I add autoplay and prev&next buttons to this slider??


You can create the autoplay function manually by using jquery. My code will call the each slide after 10 seconds. (i.e) the next slider will called after 10 seconds
$(document).ready(function(){
new TiltSlider( document.getElementById( 'slideshow' ) );
window.setInterval(function(){
$('nav>.current').next().trigger('click');
if($('nav > .current').next().index() == '-1'){
$('nav > span').trigger('click');
}
}, 10000);
});

Related

Link to another tab within accordion, embedded links will not work

I have an accordion within a tab, I would like to create a link within the accordion to link to another accordion within another tab.
This is the code I have so far:
$(function() {
$(document).ready(function(){
var getHash = function(key){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
return _key < parts.length ? parts[_key] : false;
};
var setHash = function(key, value){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
parts[_key] = value
window.location.hash = '#' + parts.join('|');
};
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
animated: 'slide',
navigation: true,
activate: function(event, ui) {
if(ui.newHeader.length > 0){
// A new accordion panel is open
setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
}else{
// In case accordion panel is closed
setHash(1, '');
}
},
active: false
});
$( "#tabs" ).tabs({
collapsible: true,
activate: function(event, ui) {
if(ui.newTab.length > 0){
// A new tab is open
var tabHash = ui.newTab.parent().children().index(ui.newTab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}else{
// In case we close tab, hash is cleared
window.location.hash = ''
}
},
create: function(event, ui){
if(ui.tab.length > 0){
var tabHash = ui.tab.parent().children().index(ui.tab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}
},
// Make sure to parseInt hash value, because jquery-ui require an integer
// Remove the " || 0 " if you want all to be closed
active: parseInt(getHash(0)) || 0
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
<h2>Tab1 Header</h2>
<div class="accordion">
<h3>Tab1 Accordion 1</h3>
<div>
<p>This should take you to tab2</p>
</div>
<h3>Tab1 Accordion 2</h3>
<div>
<p>Tab1 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab2">
<h2>Tab2 Header</h2>
<div class="accordion">
<h3>Tab2 Accordion 1</h3>
<div>
<p>Tab2 Accordion 1 Content</p>
</div>
<h3>Tab2 Accordion 2</h3>
<div>
<p>Tab2 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab3">
<h2>Tab3 Header</h2>
<div class="accordion">
<h3>Tab3 Accordion 1</h3>
<div>
<p>Tab3 Accordion 1 Content</p>
</div>
<h3>Tab3 Accordion 2</h3>
<div>
<p>Tab3 Accordion 2 Content</p>
</div>
</div>
</div>
</div>
Thanks to Code-Source for providing the code for the hash function
So, if you look at tab 1, accordion 1, you could see that I have created a link that should take you to tab2 but it doesn't work, that link works only if I enter it in the address bar. Any idea why and how to fix?
EDIT: Sorry I didn't make this clear at the original post, I basically would like to have the ability to link to another tab or another accordion within another tab using that hash.
Thanks

To open accordion inside other tab, first use a custom data attribute to specify the index of the accordion to be opened, in the below example data-accordion-target is used.
HTML
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
<h2>Tab1 Header</h2>
<div class="accordion">
<h3>Tab1 Accordion 1</h3>
<div>
<p>This should take you to tab2 accordion 1</p>
</div>
<h3>Tab1 Accordion 2</h3>
<div>
<p>This should take you to tab3 accordion 2</p>
</div>
</div>
</div>
<div id="tab2">
<h2>Tab2 Header</h2>
<div class="accordion">
<h3>Tab2 Accordion 1</h3>
<div>
<p>This should take you to tab1 accordion 1</p>
</div>
<h3>Tab2 Accordion 2</h3>
<div>
<p>This should take you to tab3 accordion 1</p>
</div>
</div>
</div>
<div id="tab3">
<h2>Tab3 Header</h2>
<div class="accordion">
<h3>Tab3 Accordion 1</h3>
<div>
<p>This should take you to tab1 accordion 2</p>
</div>
<h3>Tab3 Accordion 2</h3>
<div>
<p>This should take you to tab2 accordion 2</p>
</div>
</div>
</div>
</div>
Use jQuery trigger to navigate to the desired tab, and re-load the accordion of that tab while setting which accordion option will be active.
In the example below, the addition in your code is for a set of internal links inside your tab accordions
$(function() {
$(document).ready(function(){
var getHash = function(key){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
return _key < parts.length ? parts[_key] : false;
};
var setHash = function(key, value){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
parts[_key] = value;
window.location.hash = '#' + parts.join('|');
};
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
animated: 'slide',
navigation: true,
activate: function(event, ui) {
if(ui.newHeader.length > 0){
// A new accordion panel is open
setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
}else{
// In case accordion panel is closed
setHash(1, '');
}
},
active: false
});
$( "#tabs" ).tabs({
collapsible: true,
activate: function(event, ui) {
if(ui.newTab.length > 0){
// A new tab is open
var tabHash = ui.newTab.parent().children().index(ui.newTab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}else{
// In case we close tab, hash is cleared
window.location.hash = '';
}
},
create: function(event, ui){
if(ui.tab.length > 0){
var tabHash = ui.tab.parent().children().index(ui.tab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}
},
// Make sure to parseInt hash value, because jquery-ui require an integer
// Remove the " || 0 " if you want all to be closed
active: parseInt(getHash(0)) || 0
});
});
////////////////////////Addition to your code/////////////////////
var internalLinks = $(".accordion").find("a");
$.each(internalLinks,function(i,v){
$(v).on('click',function(e){
var h3Index = parseInt($(v).attr("data-accordion-target"));
e.preventDefault();
var id = $(v).prop("href").split("#")[1];
$("li").find("a[href=#"+id+"]").trigger("click");
//$($( "#"+id).find("h3")[h3Index]).trigger("click");
$( "#"+$(v).prop("href").split("#")[1]).find(".accordion").accordion('option','active', h3Index);
});
});
/////////////////////////////////////////////////////////////////////
});
http://jsbin.com/qebocevete/edit?html,js,output

Simply you can use .trigger('click') event to goto tab2 like this:
$('#gotoTab2').click(function(){
$(".ui-state-default a[href='#tab2']").trigger('click');
});
gotoTab2: id of <a> tag that should take you to tab2.
<a id="gotoTab2" href="#tab2">This should take you to tab2</a>
See : Working Fiddle
Working Snippet:
$(function() {
$('#gotoTab2').click(function(){
$(".ui-state-default a[href='#tab2']").trigger('click');
});
$(document).ready(function(){
var getHash = function(key){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
return _key < parts.length ? parts[_key] : false;
};
var setHash = function(key, value){
var parts = window.location.hash.substr(1).split(/\|/);
var _key = parseInt(key) || 0;
parts[_key] = value
window.location.hash = '#' + parts.join('|');
};
$(".accordion").accordion({
heightStyle: "content",
collapsible: true,
animated: 'slide',
navigation: true,
activate: function(event, ui) {
if(ui.newHeader.length > 0){
// A new accordion panel is open
setHash(1, ui.newHeader.parent().children('h3').index(ui.newHeader));
}else{
// In case accordion panel is closed
setHash(1, '');
}
},
active: false
});
$( "#tabs" ).tabs({
collapsible: true,
activate: function(event, ui) {
if(ui.newTab.length > 0){
// A new tab is open
var tabHash = ui.newTab.parent().children().index(ui.newTab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.newPanel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}else{
// In case we close tab, hash is cleared
window.location.hash = ''
}
},
create: function(event, ui){
if(ui.tab.length > 0){
var tabHash = ui.tab.parent().children().index(ui.tab);
if(tabHash == getHash(0)){
// In case current tab is the one in Hash, we open wanted accordion panel
// Make sure to parseInt hash value, because jquery-ui require an integer
ui.panel.find('.accordion').accordion('option', 'active', parseInt(getHash(1)));
}else{
setHash(1,'');
}
setHash(0, tabHash);
}
},
// Make sure to parseInt hash value, because jquery-ui require an integer
// Remove the " || 0 " if you want all to be closed
active: parseInt(getHash(0)) || 0
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab1">
<h2>Tab1 Header</h2>
<div class="accordion">
<h3>Tab1 Accordion 1</h3>
<div>
<p><a id="gotoTab2" href="#tab2">This should take you to tab2</a></p>
</div>
<h3>Tab1 Accordion 2</h3>
<div>
<p>Tab1 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab2">
<h2>Tab2 Header</h2>
<div class="accordion">
<h3>Tab2 Accordion 1</h3>
<div>
<p>Tab2 Accordion 1 Content</p>
</div>
<h3>Tab2 Accordion 2</h3>
<div>
<p>Tab2 Accordion 2 Content</p>
</div>
</div>
</div>
<div id="tab3">
<h2>Tab3 Header</h2>
<div class="accordion">
<h3>Tab3 Accordion 1</h3>
<div>
<p>Tab3 Accordion 1 Content</p>
</div>
<h3>Tab3 Accordion 2</h3>
<div>
<p>Tab3 Accordion 2 Content</p>
</div>
</div>
</div>
</div>

Here's my solution, triggers the click on the tab with click();
$("#tabs > ul li a").each(function(){
var tab = $(this);
$("#tabs > div a[href="+tab.attr("href")+"]").on("click", function(e) {
e.preventDefault();
tab.click();
});
});

Make JS carousel repeat

I'm using the following code for a simple carousel. I'd like to make it repeat after you get to the third quote-item.
Can anyone help? Thank you.
Here's the JS:
<script>
show()
$(function() {
var currentCarousel = 0;
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
currentCarousel = currentCarousel + 1;
setTimeout(function(){ changeCarousel(); }, 8000);
}
changeCarousel();
$('.quote-change').click(function(e) {
e.preventDefault();
changeCarousel();
});
});
</script>
And this is the HTML:
<div class="quote" >
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text one
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text Two...
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text THREE...
</div>
</div>
next
</div>

Try this:
$(function () {
var currentCarousel = 0;
var timeoutID = null;
var timeoutDuration = 2000;
var quoteChange = $('.quote-change');
var quoteItems = $('.quote-item');
var numQuotes = quoteItems.length;
function changeCarousel() {
quoteItems.hide();
quoteItems.eq(currentCarousel).show();
currentCarousel += 1;
if (currentCarousel === numQuotes) { currentCarousel = 0; }
clearTimeout(timeoutID);
timeoutID = setTimeout(function () {
changeCarousel();
}, timeoutDuration);
}
changeCarousel();
quoteChange.click(function (e) {
e.preventDefault();
changeCarousel();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quote">
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1" />
</div>
<div class="quote-text">quote text one</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 2" />
</div>
<div class="quote-text">quote text Two...</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 3" />
</div>
<div class="quote-text">quote text THREE...</div>
</div>
next
</div>
Also you were missing a clearTimeout(); since you have a click handler calling the same changeCarousel() function as well. There is a conflict.
So imagine that by default, your setTimeout keeps calling changeCarousel() recursively and assuming it was right in the middle of another loop (4 seconds) when you decide to click on next button and jump to next carousel item by yourself. Because of that, your newly displaying carousel item will now only stay visible for the remaining 4 seconds but instead it should have had a full 8 seconds stay. Making sense?
Hope you find it useful.

Update your changeCarousel so if currentCarousel >= slides.length it resets to 0
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
if(currentCarousel >= slides.length ){
currentCarousel = 0;
} else{
currentCarousel++;
}
setTimeout(function(){ changeCarousel(); }, 8000);
}

Creating div code using Javascript

While using masonary example, we can create this code to generate new masonary divs.
function getItemElement() {
var elem = document.createElement('div');
var wRand = Math.random();
var hRand = Math.random();
var widthClass = wRand > 0.92 ? 'w4' : wRand > 0.8 ? 'w3' : wRand > 0.6 ? 'w2' : '';
var heightClass = hRand > 0.85 ? 'h4' : hRand > 0.6 ? 'h3' : hRand > 0.35 ? 'h2' : '';
elem.className = 'item ' + widthClass + ' ' + heightClass;
return elem;
}
$( function() {
var $container = $('.masonry').masonry({
columnWidth: 60
});
$('#append-button').on( 'click', function() {
var elems = [ getItemElement(), getItemElement(), getItemElement() ];
$container.append( elems ).masonry( 'appended', elems );
});
});
This code generates this div with random heights and widths
<div class="item"></div>
I want to generate this code, using javascript, please help me in this, i'm very weak in JS:
<div class="product desat">
<div class="saleTag">
<div class="saleText">Sale</div>
<div class="trunImg"><img src="img/saleTagTrunImg.png" alt=""></div>
</div>
<div class="entry-media">
<img src="images/jewelry/280128_238089139552597_218540758174102_904483_8113368_o.jpg" alt="" class="lazyLoad thumb desat-ie" />
<div class="hover">
<ul class="icons unstyled">
<li>
<a href="images/women/skirt/430041-0014_1.jpg" class="circle" data-toggle="lightbox">
<span>View Detail</span>
</a>
</li>
</ul>
</div>
</div>
<div class="entry-main arrow_box">
<h5 class="entry-title">
Neckless
</h5>
<div class="entry-price">
<s class="entry-discount">$ 35.00</s>
<strong class="accent-color price">$ 25.00</strong>
</div>
<div class="clearfix"></div>
</div>
</div>

I recommend using JQuery Templates..
https://github.com/BorisMoore/jquery-tmpl
very nice plugin that will give you functionality you need the way you are using with Arrays of Inputs..
Other than that, you're right there - adding dynamically these div using .append or .after;
I suggest you try this, then expand on it when you have it working basically..
$('#yourContainerDiv').append('<div>Div Inside Selected Div</div>');
or
$('#yourDivs:last').after('<div>New Div</div>')
Thanks,
JFIT

Accordion with javascript

I've been trying to get an accordion movement going with javascript.
The problem that I'm having is having one close if it's already open and stay closed.
Right now the according closing one and opening another when I click a different div.
I see that the argument is always resolving to true because I'm removing the classes.. but I can't seem to find a away to get around that so I could have a nice accordion.
<div class="speaker-container">
<div class="span3 offset1 speaker" id="sp-info-0">
<div class="speaker-img">
<div class="hover"></div>
<img src="" alt="">
</div>
<h4>Title</h4>
</div>
<div class="speaker-info" id="sp-info-0">
<button class="close-speaker">Close</button>
<h2>Title</h2>
</div>
<div class="span3 offset1 speaker" id="sp-info-1">
<div class="speaker-img">
<div class="hover"></div>
<img src="" alt="">
</div>
<h4>Sub Title</h4>
</div>
<div class="speaker-info" id="sp-info-1">
<button class="close-speaker">Close</button>
<h2>Title</h2>
</div>
<div class="span3 offset1 speaker" id="sp-info-2">
<div class="speaker-img">
<div class="hover"></div>
<img src="" alt="">
</div>
<h4>Title</h4>
</div>
<div class="speaker-info" id="sp-info-2">
<button class="close-speaker">Close</button>
<h2>Title</h2>
</div>
</div>
var timer;
$('.speaker-container .speaker').on('click', function(){
var speakerContainer = document.getElementsByClassName('speaker-container');
var self = this;
var children = $('.speaker-container').children();
var selfHeight = this.clientHeight;
var parentOffset = this.parentElement.offsetHeight;
var selfOffset = this.nextElementSibling.offsetHeight;
console.dir(children);
console.log(parentOffset);
$('.speaker-container').removeClass('open').css({'height' : selfHeight + 'px'});
for (var i = 0; i < children.length; i++) {
if (children[i].className == 'speaker-info fade') {
console.dir(children[i]);
$(children[i]).removeClass('fade');
}
}
if (self.parentElement.className !== 'speaker-container open' && self.nextElementSibling.className !== 'speaker-info fade') {
timer = setTimeout(function(){
self.parentElement.setAttribute('class' , 'speaker-container open');
self.parentElement.style.height = selfOffset + selfHeight + 'px';
self.nextElementSibling.style.top = selfHeight + 'px';
self.nextElementSibling.setAttribute('class' , 'speaker-info fade');
// return false;
}, 500);
} else {
$('.speaker-container').removeClass('open').css({'height' : selfHeight + 'px'});
self.nextElementSibling.setAttribute('class' , 'speaker-info');
window.clearTimeout(timer);
}
});

Make a class that has the item open. (let's say the class is "open")
Make a class that has the item closed. (let's say the class is closed")
let's say all the accordion items are in the accordion class.
function that opens an item:
cycle through and remove any existing open item classes, add closed class.
add open class to the selected item.
by default, give closed class to all items (except the one you want open by default, if any)
with javascript it would look something like:
function openOnClick()
{
var openaccordion=document.getElementsByClassName('open');
openaccordion.className.replace( /(?:^|\s)open(?!\S)/g , 'close' );
this.className.replace( /(?:^|\s)close(?!\S)/g , 'open' );
}
with jQuery it would look like this:
$('div.accordion').click(function(){
$('.open').removeClass('open').addClass('close');
$(this).removeClass('close').addClass('open');
}
you can use jqueryui to get some sliding effects in there pretty simply too:
$(this).switchClass('close','open',1000);

js slideshow classname property of null

I am making a slideshow for a website i am making.
but my slideshow keeps getting error
Cannot set property 'className' of null
here is my code:
window.onload=function(){
var slideshow = document.getElementsByClassName('slideshow').item(0),
train = slideshow.getElementsByClassName('train').item(0),
lists = document.getElementsByClassName('btns').item(0).getElementsByClassName('btn'),
currentSlide = 0;
(go2slide = function (n) {
if(n>lists.length-1) n=0;
if(n<0) n=lists.length-1;
train.style.left=(-310*n)+'px';
lists.item(currentSlide).className = '';
lists.item(n).className = 'active';
currentSlide=n;
})(0); // set active of first li
nextSlide = function(){
go2slide(currentSlide+1);
}
prvSlide = function(){
go2slide(currentSlide-1);
}
var autoPlayIv = false;
(autoPlayStart = slideshow.onmouseout = function(){
if(autoPlayIv) return;
autoPlayIv = setInterval(nextSlide, 2000);
})(); // run auto play
autoPlayStop = slideshow.onmouseover = function(){
clearInterval(autoPlayIv);
autoPlayIv = false;
}
slideshow.getElementsByClassName('next').item(0).onclick=nextSlide;
slideshow.getElementsByClassName('previous').item(0).onclick=prvSlide;
for (var i=0; i<lists.length; i++) {
(function(j){
lists.item(j).onclick=function(){
go2slide(j);
}
})(i);
}
}
i DO have a li tag classes as btn and a btns ul.
its item(0).
and here is the html related to it
<div class="body">
<div class="slide">
<div class="s1">
<div class="slideshow">
<div class="train">
<script type="text/javascript">
var slidesLen = 3;
for(var i=1;i<=slidesLen;i++){
document.write("<div style=\"background-image:url('../images/pic"+i+".jpg');\"></div>");
}
</script>
</div>
<div class="previous"></div>
<div class="next"></div></div>
<ul class="btns">
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</ul>
</div>
<div class="s2"></div>
<div class="s3"></div>
<div class="s4"></div>
<div class="s5">
<div class="I"></div>
<div class="II"></div>
<div class="III"></div>
</div>
</div>
<div class="text"></div>
</div>
and of course its only the body.php i am posting here. I don't think header.php which contains the menu and the css and js association tags are needed. tell me if it is

Categories

Resources