dikucher

спасибо Andrej_in_ua, его идея сработала )

вот рабочий код

<div id="container">

		<div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>

		<div id="slider">

			<ul>

				<li><img src="photos/1.jpg" width="558" height="235" alt="Image One" /></li>

				<li><img src="photos/2.jpg" width="558" height="235" alt="Image Two" /></li>

				<li><img src="photos/3.jpg" width="558" height="235" alt="Image Three" /></li>

				<li><img src="photos/4.jpg" width="558" height="235" alt="Image Four" /></li>

			</ul>

		</div>

		<div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>

		<ul id="pagination" class="pagination">

			<li onclick="slideshow.pos(0)"></li>

			<li onclick="slideshow.pos(1)"></li>

			<li onclick="slideshow.pos(2)"></li>

			<li onclick="slideshow.pos(3)"></li>

		</ul>

	</div>

	<div id="container2">

		<div class="sliderbutton" id="slideleft2" onclick="slideshow2.move(-1)"></div>

		<div id="slider2">

			<ul>

				<li><img src="photos/1.jpg" width="558" height="235" alt="Image One" /></li>

				<li><img src="photos/2.jpg" width="558" height="235" alt="Image Two" /></li>

				<li><img src="photos/3.jpg" width="558" height="235" alt="Image Three" /></li>

				<li><img src="photos/4.jpg" width="558" height="235" alt="Image Four" /></li>

			</ul>

		</div>

		<div class="sliderbutton" id="slideright2" onclick="slideshow2.move(1)"></div>

		<ul id="pagination2" class="pagination">

			<li onclick="slideshow2.pos(0)"></li>

			<li onclick="slideshow2.pos(1)"></li>

			<li onclick="slideshow2.pos(2)"></li>

			<li onclick="slideshow2.pos(3)"></li>

		</ul>

	</div>

</div>

<script type="text/javascript">

var slideshow=new TINY.slider.slide('slideshow',{

	id:'slider',

	auto:5,

	resume:true,

	vertical:false,

	navid:'pagination',

	activeclass:'current',

	position:0,

	rewind:false,

	elastic:true,

	left:'slideleft',

	right:'slideright'

});

</script>

<script type="text/javascript">

var slideshow2=new TINY.slider.slide('slideshow2',{

	id:'slider2',

	auto:5,

	resume:true,

	vertical:false,

	navid:'pagination2',

	activeclass:'current2',

	position:0,

	rewind:false,

	elastic:true,

	left:'slideleft2',

	right:'slideright2'

});

</script>

и добавляю CSS, я не стал его редактировать, он здесь такой, какой стоит у меня на странице

#container {

	position:relative;

	background:#fff;

	padding:32px;

	height:235px;

	border:1px solid #ccc;

	border-radius: 15px;

}

#container2 {

	position:relative;

	background:#fff;

	padding:32px;

	height:235px;

	border:1px solid #ccc;

	border-radius: 15px;

}

.sliderbutton {

	cursor:pointer;

	opacity:0.5;

 }

#slideleft {

	display:block;

	width:43px;

	height:42px;

	position:absolute;

	left:35px;

	top:159px;

	z-index:10;

	background:url(images/icons.gif) -50px -265px no-repeat

}

#slideleft:hover {

	background-position:-0 -265px

}

#slideright {

	background:url(images/icons.gif) 0 90px no-repeat

}

#slideright:hover {

	background-position:-50px 90px

}

#slider {

	float:left;

	position:relative;

	overflow:auto;

	width:558px;

	height:235px

}

#slider2 {

	float:left;

	position:relative;

	overflow:auto;

	width:558px;

	height:235px

}

#slider ul {

	position:absolute;

	list-style:none;

	top:0;

	left:0

}

#slider2 ul {

	position:absolute;

	list-style:none;

	top:0;

	left:0

}

#slider li {

	float:left;

	width:558px;

	height:235px

}

#slider2 li {

	float:left;

	width:558px;

	height:235px

}

.pagination {

	position:absolute;

	top:40px;

	right:61px;

	list-style:none;

	height:25px

}

.pagination li {

	float:left;

	cursor:pointer;

	height:8px;

	width:8px;

	background:#ccc;

	margin:0 4px 0 0;

	border:1px solid #fff

}

.pagination li:hover, li.current {

	background:#fff

}

я подумал что CSS не понадобиться. Есть связка html / JS . У меня этот скрипт работал при разных стилях

---------- Добавлено 01.06.2013 в 01:30 ----------

Я подумал что CSS здесь не важен . Мне показалось , что главное здесь связка html/JS , так как у меня этот скрипт работает при разных стилях

.

---------- Добавлено 01.06.2013 в 01:34 ----------

		<div class="sliderbutton" id="slideleft2" onclick="slideshow2.move(-1)"></div>
		<div id="slider2">
			<ul>
				<li><img src="photos/1.jpg" width="558" height="235" alt="Image One" /></li>
				<li><img src="photos/2.jpg" width="558" height="235" alt="Image Two" /></li>
				<li><img src="photos/3.jpg" width="558" height="235" alt="Image Three" /></li>
				<li><img src="photos/4.jpg" width="558" height="235" alt="Image Four" /></li>
			</ul>
		</div>
		<div class="sliderbutton" id="slideright2" onclick="slideshow2.move(1)"></div>
		<ul id="pagination2" class="pagination">
			<li onclick="slideshow.pos(0)"></li>
			<li onclick="slideshow.pos(1)"></li>
			<li onclick="slideshow.pos(2)"></li>
			<li onclick="slideshow.pos(3)"></li>
		</ul>
<script type="text/javascript">
var slideshow2=new TINY.slider.slide('slideshow',{
	id:'slider2',
	auto:3,
	resume:true,
	vertical:false,
	navid:'pagination2',
	activeclass:'current',
	position:0,
	rewind:false,
	elastic:true,
	left:'slideleft2',
	right:'slideright2'
});
</script>

Пробовал я такой метод, при чем еще лез непосредственно менял значения в скрипте. Но так как менял я сам толком не зная чего , то в результате ничего не вышло.

Но вот чего я не делал, так это не менял значение у var slideshow2=new TINY.slider.slide ... И попробавть не могу, так как на рабочем компе полетело видеокарта. Надеюсь, что завтра мне удасться проверить, и этот простой способ заработает

Не приходось еще работать с бутстрапом. Там что у меня будет возможность реализовать поставленную задачу ?

В бэкэнде я вообще 0. Ну помоему JS это уже как должное на странице. Как бы вы решали данную задачу ?

П.с. В свете того, что не владею JS , при верстке если возможно что то сделать на html/css , то я делаю это на html/css