спасибо 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
