нельзя использовать два слайдера nivo на веб-странице

Question

Мне нужны два ползунка для моей веб-страницы. при нажатии на значок будет отображаться один, а при нажатии на другой значок первый ползунок исчезнет, ​​а на его месте появится следующий. Слайдер, который я использую, - это слайдер nivo (слайдер jquery). но проблема в том, что отображается только первый слайдер (слайдер, который записывается первым в HTML-код). для второго отображается макет и gif загрузки. нет никаких проблем с изображениями (я мог видеть их, используя firebug). когда я переупорядочиваю ползунки, это происходит снова .. только ползунок, написанный первым в коде, отображается. проблема с id ползунков. потому что я должен сделать копию того же кода, идентификатор повторяется. но только один экземпляр кода присутствует в любое время. код слайдера

<div id="techimageslides">
   <div id="slider-wrapper">
       <div id="slider" class="nivoSlider">
           /* images */                            
       </div>
   </div>
</div>

я пробовал с разными идентификаторами, но это не работает. даже макет не отображается с идентификаторами различий (также изменен в CSS). Я думаю, что он используется в d javascript слайдера

Пожалуйста, предложите способ заставить его работать ..

Answer 1

В основном вам просто нужно изменить идентификатор и следовать классам, стилизирующим их в CSS

<div id="slider" class="nivoSlider">
    <img src="../yourotherimage/images/firstimg.png"/>
</div>

<div id="slider2" class="nivoSlider">
    <src="../yourimage/images/img1p.png" alt="" title="Caption 1" /></a>
</div>

, затем в области

<script type="text/javascript">
*$(window).load(function() {
    $('#slider').nivoSlider();
    setTimeout(function(){
            $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
    }, 1000);
});
</script>

Вы практически правы.Слайдер nivo управляется в jquery.nivo.slider.pack.js

Если вы проверите демонстрацию и практически скопируете ее, вы можете заставить ее работать.

Answer 2

Вместо изменения идентификатора div, в котором отображается ползунок, лучшим вариантом было бы выбрать div с классом, а не id в javascript.

<div id="slider" class="nivoSlider">
    <img src="../yourotherimage/images/firstimg.png"/>
</div>

если у вашего div есть id = "slider" и class = "nivoSlider", вы должны использовать его следующим образом

<script type="text/javascript">
*$(window).load(function() {
    $('.nivoSlider').nivoSlider();
         //code of displaying slider here
    });
});
</script>

найдите этот скрипт в php-файле слайдера nivo и замените селектор тем, что я написал. Надеюсь, это поможет

Answer 3

Просто дайте им разные идентификаторы и затем назовите их обоих.Их отдельный идентификатор не позволит им конфликтовать здесь, я использовал тот же метод на elasti slider

<div class="photo">
<div class="head2">
<h2>Photo Gallery</h2>
</div>
<ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
</ul>
</div>
<div class="photo">
<div class="head2">
<h2>Video Gallery</h2>

<ul id="carousel2" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="images/small/20.jpg" alt="image20" /></a></li>
</ul>


</div>

enter code here

и назвал их как

<script type="text/javascript">

$( '#carousel' ).elastislide();
$( '#carousel2' ).elastislide();
</script>